Osobní projekt

Osobní portfolio

Přehled

Portfolio jsem vytvořil proto, abych své práci mohl dát více kontextu, než se vejde do klasického CV. Vedle zkušeností a dovedností proto dává prostor jednotlivým projektům a příběhům o problémech, rozhodnutích při implementaci a výsledcích, které za nimi stojí. Samotný vývoj se zároveň stal příležitostí vyřešit detaily dvojjazyčné Next.js aplikace, kterou lze kompletně nasadit jako statické soubory.

Moje role

Web jsem vyvinul pomocí Next.js App Routeru, Reactu, TypeScriptu a Tailwind CSS a vytvořil jsem znovupoužitelné komponenty pro project cards, seznamy technologií, navigaci a case-study stránky. Obsah portfolia jsem uložil do strukturovaného JSONu, takže přidání nového projektu nebo aktualizace pracovních zkušeností automaticky využije existující stránky bez nutnosti vytvářet pokaždé nový layout.
Web jsem rozšířil o anglické a české routy, přepínání jazyků a persistentní nastavení motivu. Abych ověřil, že se tyto funkce chovají správně i po nasazení, přidal jsem Playwright testy pro výběr locale, navigaci, omezení browser storage a vygenerované statické stránky.

Architektura a technologie

Stránky se generují při build time a exportují se jako HTML, CSS a JavaScript pro static hosting. Typované content soubory obsahují portfolio data pro jednotlivé jazyky, zatímco next-intl zajišťuje společné texty uživatelského rozhraní a locale-aware navigaci. Detailní routy projektů se generují ze slugů uložených v obsahu, takže seznam projektů i jednotlivé příběhy využívají stejný datový model.
Anglické a české stránky používají explicitní URL /en a /cs. Samostatná vstupní stránka vybírá jazyk v browseru podle uložené preference, podporovaných jazyků browseru a angličtiny jako fallbacku. Oddělené root layouty zajišťují správný jazyk dokumentu v exportovaných stránkách, zatímco sdílená document komponenta řeší inicializaci motivu. Lokalizovaná metadata obsahují canonical URL a jazykové alternativy.

Technické výzvy

Hlavní výzvou bylo zajistit, aby výběr jazyka působil přirozeně i při čistě statickém deploymentu. Pokud návštěvník otevře přímý odkaz, musí se zobrazit jazyk uvedený v URL bez ohledu na to, co naznačuje jeho browser nebo uložená preference. Automatickou detekci jsem proto ponechal pouze na root entry pointu a explicitní změna jazyka si zapamatuje uživatelovu volbu, přičemž zachová aktuální cestu, query parametry i fragment.
Preference musely fungovat i v méně ideálních situacích: browser storage může být blokovaný a přechod mezi jednotlivými locale layouty může ovlivnit inicializaci motivu. Přidal jsem proto defensivní práci se storage a sdílenou inicializaci theme a následně tyto interakce pokryl browser testy. Testování skutečného static exportu mi umožnilo ověřit přesně to chování, které návštěvník dostane na produkčním hostingu, včetně jazyka dokumentu, metadat a favicon odkazů.

Výsledky a přínos

Výsledkem je portfolio, které propojuje stručné představení s detailnějšími příběhy projektů, pracovními zkušenostmi a historií dalšího vzdělávání. Znovupoužitelná struktura stránek umožňuje web rozšiřovat převážně změnami dat, zatímco static export udržuje deployment nezávislý na běžícím Node.js serveru.
Projekt mi zároveň poskytl praktický prostor pro propojení lokalizace, browser preferences a static renderingu. Automatizované testy nyní pokrývají i podpůrné chování, které lze při vizuální kontrole stránky snadno přehlédnout - od výběru jazyka přes navigaci až po atributy vygenerovaného dokumentu.