Ako je táto stránka postavená
Technológie
Next.js 16 s App Routerom, React 19 a TypeScript, štýly v Tailwind CSS 4. Archív projektov používa TanStack Table s match-sorter na tolerantné vyhľadávanie, kontaktný formulár TanStack Form so Zod schémou zdieľanou prehliadačom aj serverom a next-intl zabezpečuje anglickú a slovenskú verziu.
Architektúra
Každá stránka sa generuje pri builde v oboch jazykoch. Obsah je v typovaných moduloch TypeScriptu a automatické kontroly pred každým buildom overia slugy, obrázky, odkazy, dátumy a preklady.
Stránky sú React Server Components; JavaScript sa posiela len pre interaktívne časti, napríklad navigačné menu, archív projektov, galériu obrázkov a kontaktný formulár. Každá stránka má vlastný vygenerovaný náhľad pre zdieľanie a štruktúrované dáta pre vyhľadávače.
Dizajn
Farby sú dizajnové tokeny v CSS premenných. Svetlý aj tmavý režim ponúka niekoľko tém, ktoré sa použijú ešte pred prvým vykreslením, takže stránka nikdy nezabliká v nesprávnych farbách.
Stránky a obrázky projektov prechádzajú medzi stránkami cez view transitions a obsah sa pri posúvaní plynulo objavuje pomocou CSS. Na väčších obrazovkách reaguje na kurzor jemné pole častíc kreslené cez WebGL2; v skrytej karte sa zastaví a pri obmedzení pohybu sa nezobrazí.
Testovanie a CI
GitHub Actions pri každom pushi spúšťa Biome, kompilátor TypeScriptu, Vitest a Playwright. End-to-end testy pokrývajú navigáciu, vyhľadávanie, formuláre a témy na desktope aj mobile a kontrolujú prístupnosť nástrojom axe podľa WCAG 2.2 AA.
Lighthouse CI drží výkon, prístupnosť, osvedčené postupy a SEO v pevných limitoch vrátane limitu na JavaScript, ktorý stránka posiela. Týždenná úloha kontroluje všetky externé odkazy a Dependabot udržiava závislosti aktuálne.
Hosting a súkromie
Stránka beží na Verceli a nasadzuje sa automaticky z hlavnej vetvy. Vercel Web Analytics a Speed Insights merajú návštevy a skutočné časy načítania bez cookies a zvolená téma sa ukladá len vo vašom prehliadači.
Prístupnosť
Stránka sa snaží spĺňať WCAG 2.2 na úrovni AA. Funguje s klávesnicou aj čítačkou obrazovky, fokus je vždy viditeľný, rešpektuje nastavenie obmedzeného pohybu a každá téma spĺňa požiadavky AA na kontrast.
Ak je niečo ťažko použiteľné, dajte mi prosím vedieť.