Portfolio Website

O projektu

Toto portfolio jsem navrhl od základu jako vlastní projekt, kde jsem chtěl propojit technickou zdatnost s promyšleným vizuálním zpracováním. Chtěl jsem vytvořit místo, které nereprezentuje jen kód, ale celkový moderní přístup k designu a uživatelskému zážitku. Každý detail tu má svůj reálný důvod a forma perfektně doplňuje obsah.

Cílem bylo vytvořit web, který působí jako sjednocený celek. Nabízí bleskové načítání, čistou typografii, plynulé přechody a interaktivní 3D prvek, který úvodní sekci originálně oživuje, aniž by prohlížeč jakkoliv zpomaloval.

Klíčové vlastnosti

• 3D Hero scéna: Interaktivní prostředí s vlastním plně renderovaným modelem, jemným nasvícením a měkkými stíny. Scéna využívá React Three Fiber a plnohodnotné WebGL. Model s přirozenou setrvačností reaguje na pohyb kurzoru, čímž úvodní stránku dynamicky oživuje bez zbytečné umělosti.
• Podpora dvou jazyků: Celý web je lokalizovaný do češtiny a angličtiny pomocí vlastního odlehčeného i18n systému. Přepínání jazyků se tak odehrává okamžitě, bez nutnosti obnovovat stránku.
• Tmavý a světlý režim: Plně integrovaný přepínač barevného schématu s jemnými plynulými přechody. Vaši osobní preferenci si navíc web trvale uloží do localStorage pro příští návštěvy.
• Plynulé rolovací animace: Při rolování stránkou se jednotlivé prvky vizuálně elegantně zjevují. Tento efekt pohání nativní Intersection Observer API, čímž se zcela eliminovala potřeba objemných externích animačních knihoven.
• Optimalizace pro vyhledávače a výkon: Statické generování (SSG) zaručuje obrovskou rychlost načítání a maximální skóre v analytických nástrojích jako je Lighthouse. Štítky OpenGraph, potřebná SEO metadata a dynamická mapa webu se tvoří automaticky přímo při sestavování platformy.

Technologie

• Astro: Hlavní stavební kámen. Poskytuje statický výstup a zaručuje nulový klientský JavaScript ve výchozím stavu. Je to naprosto ideální volba pro svižné prezentační weby.
• Three.js a React Three Fiber: 3D grafika akcelerovaná grafickou kartou, umožňující plynulé vykreslování modelů s plnohodnotnými shadery přímo v prohlížeči.
• Tailwind CSS v4: Moderní framework pro rychlé a konzistentní stylování pomocí utility tříd a design tokenů. Umožňuje mi tvořit komplexní rozhraní přesně na míru s dokonalou responzivitou pro telefony i velké monitory.
• TypeScript: Striktní typová bezpečnost, která dodává jistotu už při vývoji. Tento mechanismus spolehlivě zamezí většině logických chyb ještě předtím, než se kód vůbec dostane na produkci.

Výzvy a řešení

• 🔥 Propojení 3D sféry se statickým webem: Největším oříškem bylo začlenit plnohodnotné WebGL prostředí s 3D modelem do statického Astra bez jakéhokoliv negativního dopadu na rychlost načítání samotné stránky. Podařilo se mi to vyřešit tak, že se celá náročná 3D kompozice izolovaně načítá a spouští až přímo u uživatele v prohlížeči pomocí architektury Astro islands. Pro absolutní plynulost bez záseků je renderovací smyčka optimalizovaná pomocí volání nativní funkce requestAnimationFrame.
• 🌍 Vlastní i18n vícejazyčné řešení: Druhou výzvou bylo vytvořit spolehlivý systém pro překlady, aniž bych musel do projektu přidávat těžkopádné a objemné knihovny třetích stran. Řešením se stala vlastní odlehčená i18n abstrakce navázaná přímo na vestavěné směrování Astra. Díky ní je přepínání jazyků bleskové a překlady fungují nativně bez zbytečného balastu.