Ako vznikla táto webstránka

Pôvodne to mal byť len menší test - chcel som zistiť, či vie Claude postaviť funkčnú webstránku podľa nejakého vzoru. Ukázalo sa, že mu to ide celkom dobre, tak som pokračoval ďalej, kým z toho nebola celá táto stránka.

Celkový vzhľad a štruktúra sú inšpirované webom michalvojtyla.sk - prevzal som len všeobecný smer dizajnu, nie konkrétny obsah, texty ani kód. Michal mi na použitie jeho webu ako vzoru dal písomný súhlas.

Namiesto písania kódu som Claude v chate postupne zadával, čo má stránka obsahovať a ako sa má správať. Claude generoval a upravoval kód priamo - HTML, CSS aj JavaScript - a každú verziu som si mohol hneď pozrieť a otestovať.

Každú ďalšiu úpravu - nový text, novú sekciu, opravu chyby, právnu zmenu - som poslal ako správu v chate a Claude upravil priamo príslušné súbory. Pred väčšími zmenami Claude spúšťal automatizovanú kontrolu (štruktúra HTML, nefunkčné odkazy, duplicitné ID), aby sa predišlo chybám.

Bez backendu. Statické HTML, CSS a JavaScript - žiadny CMS ani databáza.

Päťjazyčnosť (SK/EN/CS/DE/PL) s prepínačom, ktorý si pri prekliku pamätá aktuálnu stránku aj zvolený farebný režim. Každý jazyk má vlastné URL (napr. /en, /de) cez presmerovania na serveri, nie len parameter v adrese.

Tmavý/svetlý režim zosynchronizovaný naprieč celým webom a všetkými jazykmi.

Plnotextové vyhľadávanie naprieč celým webom, samostatné pre každý jazyk, ktoré funguje priamo v prehliadači bez servera.

SEO a GEO optimalizácia. Jazykové alternatívy (hreflang) na každej stránke, sitemap.xml, štruktúrované dáta (JSON-LD) pre vyhľadávače aj AI asistentov, vlastný súbor llms.txt, branded náhľadové obrázky pre zdieľanie na sociálnych sieťach v každom jazyku.

Kontaktný formulár cez FormSubmit.co - posiela e-maily bez potreby vlastného backendu.

Prístupnosť. Skip-link, sémantické HTML, aria-labely na ovládacích prvkoch, klávesová navigácia vo výsledkoch vyhľadávania, viditeľné focus stavy, popisné alt texty.

Súkromie a legislatíva. Cookie lišta, VOP, GDPR klauzuly, explicitný súhlas pred nahrávaním a AI prepisom stretnutí (Fireflies), žiadne externé fonty ani CDN - web nenačítava písmo z cudzích serverov, takže prehliadač návštevníka nikam neposiela jeho IP adresu.

Výkon. Cachovanie statických súborov a kompresia (gzip/deflate) nastavené priamo na serveri, žiadne externé knižnice ani frameworky, ktoré by spomaľovali načítanie.

Web beží na Websupport.sk, najväčšom slovenskom poskytovateľovi domén a hostingu (súčasť skupiny Loopia Group, ktorú vlastní severský investičný fond Axcel). Keďže ide o čisto statické súbory, fungoval by aj na akomkoľvek inom hostingu vrátane bezplatných možností ako GitHub Pages či Netlify.

Web má 110 HTML stránok - 22 unikátnych stránok v 5 jazykových verziách (SK/EN/CS/DE/PL). Celková veľkosť je necelých 4,4 MB, vrátane fotky, dvoch PDF zmlúv, branded náhľadových obrázkov pre každý jazyk a vyhľadávacieho indexu (spolu takmer 1 MB) pre všetkých päť jazykových verzií.

Vybral by som si niekoľko webstránok, ktoré sa mi páčia, a dal by som Claude vygenerovať niekoľko návrhov. Z nich by som si potom vybral jeden.

Niekoľko hodín. Reálne by sa to dalo spraviť aj omnoho rýchlejšie, ale je v tom aj čas, kedy som pridával a ladil texty, nastavoval drobnosti a študoval, čo všetko je potrebné, aby to správne fungovalo.

Web nie je hotový raz a navždy - priebežne ho dolaďujem: nové sekcie, texty, právne detaily aj menšie úpravy dizajnu. Všetko rovnakým spôsobom - cez rozhovor s Claude, bez ručného písania kódu. Celú históriu zmien nájdete vo verejnom changelogu.

Postup, ktorým túto stránku staviam, som zabalil aj do Claude Skillu na stiahnutie - dá sa ním postaviť podobná webová stránka od nuly, krok za krokom. Keď na živom webe nájdem a opravím reálnu chybu (napríklad v zarovnaní hlavičky), rovnakú opravu premietnem aj do tohto skillu, aby sa nezopakovala v žiadnej ďalšej stránke postavenej s jeho pomocou.

Postup a technický prístup si pokojne zoberte ako inšpiráciu - to nie je ničí exkluzívny nápad. Konkrétny obsah (moje meno, fotka, referencie, ceny) si, samozrejme, skopírovať nemôžete, to je moje. A ak vás inšpiruje dizajn nejakého webu, overte si, či nejde o priamu kópiu cudzej práce - u mňa to bolo s Michalovým písomným súhlasom, u vás by to malo byť podobne.