Jak powstała ta strona internetowa

Pierwotnie miał to być tylko mały test - chciałem sprawdzić, czy Claude potrafi zbudować działającą stronę internetową na wzór konkretnego wzorca. Okazało się, że radzi sobie z tym całkiem dobrze, więc kontynuowałem, aż powstała cała ta strona.

Ogólny wygląd i struktura są inspirowane stroną michalvojtyla.sk - przejąłem jedynie ogólny kierunek stylistyczny, a nie konkretną treść, teksty czy kod. Michal wyraził pisemną zgodę na wykorzystanie jego strony jako wzoru.

Zamiast pisać kod, stopniowo dyktowałem Claude w rozmowie, co strona ma zawierać i jak ma się zachowywać. Claude generował i dostosowywał kod bezpośrednio - HTML, CSS i JavaScript - a ja mogłem od razu obejrzeć i przetestować każdą wersję.

Każdą kolejną zmianę - nowy tekst, nową sekcję, poprawkę błędu, zmianę prawną - wysyłałem jako wiadomość w rozmowie, a Claude bezpośrednio edytował odpowiednie pliki. Przed większymi zmianami Claude przeprowadzał zautomatyzowaną kontrolę (struktura HTML, uszkodzone linki, duplikaty ID), żeby uniknąć błędów.

Bez backendu. Statyczny HTML, CSS i JavaScript - bez CMS, bez bazy danych.

Pięć języków (SK/EN/CS/DE/PL) z przełącznikiem, który przy zmianie języka pamięta aktualną stronę i wybrany motyw kolorystyczny. Każdy język ma własny adres URL (np. /en, /de) dzięki przekierowaniu po stronie serwera, a nie tylko parametr w adresie.

Tryb ciemny/jasny, zsynchronizowany na całej stronie i we wszystkich językach.

Wyszukiwarka pełnotekstowa działająca w całej witrynie, osobna dla każdego języka, bezpośrednio w przeglądarce, bez serwera.

Optymalizacja SEO i GEO. Alternatywy językowe (hreflang) na każdej stronie, plik sitemap.xml, dane strukturalne (JSON-LD) dla wyszukiwarek i asystentów AI, własny plik llms.txt, brandowane obrazy podglądu do udostępniania w mediach społecznościowych dla każdego języka.

Formularz kontaktowy przez FormSubmit.co - wysyła e-maile bez potrzeby własnego backendu.

Dostępność. Skip-link, semantyczny HTML, atrybuty aria na elementach sterujących, nawigacja klawiaturą w wynikach wyszukiwania, widoczne stany fokusu, opisowe teksty alternatywne.

Prywatność i prawo. Baner cookies, regulamin, klauzule RODO, wyraźna zgoda przed nagrywaniem i transkrypcją AI rozmów (Fireflies), żadnych zewnętrznych fontów ani CDN - strona nie ładuje krojów pisma z obcych serwerów, więc przeglądarka odwiedzającego nie wysyła nigdzie jego adresu IP.

Wydajność. Cache'owanie plików statycznych i kompresja (gzip/deflate) skonfigurowane bezpośrednio na serwerze, bez zewnętrznych bibliotek czy frameworków, które spowalniałyby ładowanie.

Strona działa u Websupport.sk, największego słowackiego dostawcy domen i hostingu (część Loopia Group, należącej do nordyckiego funduszu inwestycyjnego Axcel). Ponieważ są to wyłącznie pliki statyczne, działałaby również na dowolnym innym hostingu, w tym na darmowych opcjach takich jak GitHub Pages czy Netlify.

Strona ma 110 stron HTML - 22 unikalne strony w 5 wersjach językowych (SK/EN/CS/DE/PL). Całkowity rozmiar to niecałe 4,4 MB, łącznie ze zdjęciem, dwiema umowami PDF, brandowanymi obrazami podglądu dla każdego języka i indeksem wyszukiwania (prawie 1 MB) dla wszystkich pięciu wersji językowych.

Wybrałbym kilka stron internetowych, które mi się podobają, i poprosiłbym Claude o wygenerowanie kilku wersji. Spośród nich wybrałbym jedną.

Kilka godzin. Realistycznie mogłoby to pójść dużo szybciej, ale wliczam w to również czas, w którym uzupełniałem i dopracowywałem teksty, ustawiałem drobiazgi i zastanawiałem się, co wszystko jest potrzebne, żeby działało poprawnie.

Strona nie jest skończona raz na zawsze - stale ją dopracowuję: nowe sekcje, teksty, szczegóły prawne i drobne zmiany designu. Wszystko w ten sam sposób - poprzez rozmowę z Claude, bez ręcznego programowania. Całą historię zmian znajdziesz w publicznym Changelogu.

Sposób, w jaki buduję tę stronę, zamknąłem też w Claude Skill do pobrania - dzięki niemu można krok po kroku stworzyć podobną stronę od podstaw. Gdy na działającej stronie znajdę i naprawię prawdziwy błąd (na przykład w wyrównaniu nagłówka), przenoszę tę samą poprawkę również do tego Skilla, żeby nie powtarzała się w żadnej kolejnej stronie stworzonej z jego pomocą.

Sposób postępowania i podejście techniczne możesz śmiało potraktować jako inspirację - to nie jest mój ekskluzywny pomysł. Konkretnej treści (mojego nazwiska, zdjęcia, referencji, cen) oczywiście nie możesz skopiować, to należy do mnie. A jeśli inspirujesz się designem konkretnej strony, sprawdź, czy nie jest to bezpośrednia kopia cudzej pracy - w moim przypadku odbyło się to za pisemną zgodą Michala, u Ciebie powinno być podobnie.