Jak vznikl tento web

Původně to měl být jen menší test - chtěl jsem zjistit, jestli umí Claude postavit funkční webovou stránku podle nějakého vzoru. Ukázalo se, že mu to jde docela dobře, tak jsem pokračoval dál, dokud z toho nebyla celá tato stránka.

Celkový vzhled a struktura jsou inspirované webem michalvojtyla.sk - převzal jsem jen obecný směr designu, ne konkrétní obsah, texty ani kód. Michal mi k použití svého webu jako vzoru dal písemný souhlas.

Místo psaní kódu jsem Claude v chatu postupně zadával, co má stránka obsahovat a jak se má chovat. Claude generoval a upravoval kód přímo - HTML, CSS i JavaScript - a každou verzi jsem si mohl hned prohlédnout a otestovat.

Každou další úpravu - nový text, novou sekci, opravu chyby, právní změnu - jsem poslal jako zprávu v chatu a Claude upravil přímo příslušné soubory. Před většími změnami Claude spouštěl automatizovanou kontrolu (struktura HTML, nefunkční odkazy, duplicitní ID), aby se předešlo chybám.

Bez backendu. Statické HTML, CSS a JavaScript - žádný CMS ani databáze.

Pět jazyků (SK/EN/CS/DE/PL) s přepínačem, který si při prokliku pamatuje aktuální stránku i zvolený barevný režim. Každý jazyk má vlastní URL (např. /en, /de) přes přesměrování na serveru, ne jen parametr v adrese.

Tmavý/světlý režim synchronizovaný napříč celým webem a všemi jazyky.

Fulltextové vyhledávání napříč celým webem, samostatné pro každý jazyk, které funguje přímo v prohlížeči bez serveru.

SEO a GEO optimalizace. Jazykové alternativy (hreflang) na každé stránce, sitemap.xml, strukturovaná data (JSON-LD) pro vyhledávače i AI asistenty, vlastní soubor llms.txt, branded náhledové obrázky pro sdílení na sociálních sítích v každém jazyce.

Kontaktní formulář přes FormSubmit.co - posílá e-maily bez potřeby vlastního backendu.

Přístupnost. Skip-link, sémantické HTML, aria-labely na ovládacích prvcích, klávesová navigace ve výsledcích vyhledávání, viditelné focus stavy, popisné alt texty.

Soukromí a legislativa. Cookie lišta, VOP, GDPR klauzule, explicitní souhlas před nahráváním a AI přepisem schůzek (Fireflies), žádné externí fonty ani CDN - web nenačítá písmo z cizích serverů, takže prohlížeč návštěvníka nikam neposílá jeho IP adresu.

Výkon. Cachování statických souborů a komprese (gzip/deflate) nastavené přímo na serveru, žádné externí knihovny ani frameworky, které by zpomalovaly načítání.

Web běží na Websupport.sk, největším slovenském poskytovateli domén a hostingu (součást skupiny Loopia Group, kterou vlastní severský investiční fond Axcel). Jelikož jde o čistě statické soubory, fungoval by i na jakémkoli jiném hostingu včetně bezplatných možností jako GitHub Pages či Netlify.

Web má 110 HTML stránek - 22 unikátních stránek v 5 jazykových verzích (SK/EN/CS/DE/PL). Celková velikost je necelých 4,4 MB, včetně fotky, dvou PDF smluv, branded náhledových obrázků pro každý jazyk a vyhledávacího indexu (dohromady skoro 1 MB) pro všech pět jazykových verzí.

Vybral bych si několik webových stránek, které se mi líbí, a nechal bych Claude vygenerovat několik návrhů. Z nich bych si pak vybral jeden.

Několik hodin. Reálně by se to dalo udělat i mnohem rychleji, ale je v tom i čas, kdy jsem přidával a ladil texty, nastavoval drobnosti a studoval, co všechno je potřeba, aby to správně fungovalo.

Web není hotový jednou provždy - průběžně ho dolaďuji: nové sekce, texty, právní detaily i menší úpravy designu. Všechno stejným způsobem - přes rozhovor s Claude, bez ručního psaní kódu. Celou historii změn najdete ve veřejném changelogu.

Postup, kterým tuto stránku stavím, jsem zabalil i do Claude Skillu ke stažení - dá se s ním postavit podobná webová stránka od nuly, krok za krokem. Když na živém webu najdu a opravím reálnou chybu (například v zarovnání hlavičky), stejnou opravu promítnu i do tohoto skillu, aby se neopakovala v žádné další stránce postavené s jeho pomocí.

Postup a technický přístup si klidně vezměte jako inspiraci - to není ničí exkluzivní nápad. Konkrétní obsah (moje jméno, fotka, reference, ceny) si samozřejmě zkopírovat nemůžete, to je moje. A pokud vás inspiruje design nějakého webu, ověřte si, jestli nejde o přímou kopii cizí práce - u mě to bylo s Michalovým písemným souhlasem, u vás by to mělo být podobně.