kuchnia od zaplecza

Jak powstała ta strona

Ta strona została w całości zaprojektowana i zbudowana przez Claude Fable 5 (Anthropic) w Claude Code — od koncepcji designu, przez wygenerowanie grafik, po warstwę SEO i audyty. Poniżej pełna dokumentacja: co, czym i dlaczego.

Stack technologiczny

Czysty, statyczny HTML + CSS + vanilla JavaScript — zero frameworków, zero build stepu. Cała treść jest renderowana serwerowo (leży wprost w plikach HTML), więc jest w 100% crawlowalna, a Lighthouse nie ma się do czego przyczepić.
Typografia self-hosted: Fraunces (tytuły), Albert Sans (tekst), Caveat (odręczne dopiski) — fonty variable przycięte serwerowo do polskiego zestawu znaków (css2 &text=, skrypt narzedzia/pobierz-fonty-pl.mjs): 5 plików woff2 zamiast 10, ~235 KB zamiast ~437 KB. Fallbacki systemowe mają zmierzone size-adjust, więc podmiana fontu nie przesuwa layoutu (CLS ≈ 0).
Animacje jako progressive enhancement: fale na wodzie i drobinki światła w hero (canvas 2D), odsłanianie sekcji (IntersectionObserver), grywalny handpan D-Kurd (SVG + Web Audio API — dźwięk syntezowany: ton + oktawa + kwinta nad oktawą, bez plików audio). Wszystko respektuje prefers-reduced-motion i działa bez JS (strona pozostaje kompletna).
Wideo w hero — akwarela ożywiona modelem Kling (Higgsfield): ładowane dopiero po zdarzeniu load, tylko na desktopie, bez wpływu na LCP; obraz WebP pozostaje posterem i fallbackiem.
YouTube jako fasada (lite embed) — na starcie renderuje się wyłącznie lokalna miniatura WebP, pełny iframe (youtube-nocookie.com) wstrzykiwany jest dopiero po kliknięciu.

Workflow generowania grafik (AI)

Obrazy wygenerowano modelem GPT Image 2 (przez Higgsfield CLI), z przekazaniem istniejących grafik społeczności jako referencji stylu — stąd spójna akwarelowa identyfikacja (granat atramentowy + pomarańcz + kremowy papier), zgodna z logo.
Wygenerowane assety: hero (handpan na wodzie), scena jam session w parku, 6 winiet miejscówek, poglądowa mapa Łodzi, obraz Open Graph z typografią. Hero dodatkowo zanimowano modelem Kling 3.0 (image-to-video) i skompresowano ffmpegiem do ~450 KB.
Obróbka: narzedzia/przetworz-obrazy.mjs (sharp) — kadrowanie do stałych proporcji, eksport WebP w kilku szerokościach (srcset), favicony wycięte z logo, OG 1200×630 JPEG.
Surowe pliki i logi generowania leżą w zasoby-generowane/ (poza stroną).

Warstwa SEO

Jeden <h1> z frazą główną i lokalizacją, logiczna hierarchia H2/H3, semantyczny HTML5 (header/nav/main/section/footer), polskie opisowe alt dla każdego obrazu.
Unikalny <title> (<60 znaków), meta description (<155 znaków), canonical, Open Graph + Twitter Card z dedykowanym obrazem, komplet favicon, lang="pl".
JSON-LD: Organization, 2 × MusicEvent (data, godzina, tryb offline, wstęp wolny, lokalizacja: Łódź), VideoObject (film z jam session), FAQPage (8 pytań).
Lokalne SEO: nazwy parków (Julianów, Zdrowie, Źródliska, Stawy Jana, Park Poniatowskiego) wplecione naturalnie w treść, sekcja mapy, dane społeczności w stopce.
Pliki techniczne: robots.txt (blokuje /strefa-czlonkow/), sitemap.xml (bez strefy członków), strona 404 z poprawnym kodem odpowiedzi.
Wydajność: obrazy WebP z srcset/sizes i jawnymi wymiarami (zero CLS), lazy loading poniżej foldu, preload LCP, długi cache dla zasobów statycznych, gzip na serwerze.
Krytyczny CSS: cały arkusz jest minifikowany (esbuild) i wstawiany do <head> każdej strony narzędziem narzedzia/wstaw-css.mjs — zero render-blokujących żądań. Po każdej zmianie w strona/style.css uruchom to narzędzie ponownie.
Sekcje głęboko pod foldem mają content-visibility:auto — przeglądarka pomija ich layout do czasu przewinięcia, co znacząco przyspiesza pierwszy paint.
Wynik audytu Lighthouse (przed → po optymalizacjach): mobile Performance 73 → 94 (LCP 4,8 s → 2,9 s; CLS 0,138 → 0,001 w trakcie prac), desktop Performance 100; Accessibility / Best Practices / SEO: 100 na obu. Raporty HTML leżą w zasoby-generowane/lighthouse/.

Strefa członków — jak działa i co potrafi

Podstrona /strefa-czlonkow nie ma backendu ani kont użytkowników — to jedno wspólne hasło dla całej społeczności (wzorzec StatiCrypt):

Treść strefy (linki do Dysku Google) jest zaszyfrowana AES-GCM 256, a klucz jest wyprowadzany z hasła przez PBKDF2 (SHA-256, 310 000 iteracji). W źródle strony, w JS ani w repozytorium nie ma jawnych linków.
Po poprawnym haśle strona zapamiętuje klucz (nie hasło) w localStorage — przycisk „Wyloguj” go usuwa.
Hasło zmienia się poleceniem: node narzedzia/szyfruj-strefe.mjs "NoweHaslo" (treść strefy edytuje się w narzedzia/strefa-tresc.html — ten plik nie jest publikowany).
Web Crypto wymaga bezpiecznego kontekstu: strefa działa na localhost i na HTTPS, nie zadziała z pliku otwartego podwójnym kliknięciem.

Uczciwie o bezpieczeństwie: to bramka wygodowa, nie twierdza. Chroni przed przypadkowymi gośćmi i wyszukiwarkami, ale każdy, kto zna hasło, może przekazać treść dalej. Właściwą kontrolę dostępu ustawiajcie na samym Dysku Google — udostępniając foldery konkretnym adresom Gmail (opcja „Poproś o dostęp”). Strefa ma też noindex, nofollow, jest wykluczona w robots.txt i nie występuje w sitemap.xml — żadna treść istotna dla SEO tam nie trafia.

Jak uruchomić projekt lokalnie

# wymagany Node.js 18+
cd "C:\Claude_NEW\handpan lodz 2"
node narzedzia/serwer.mjs
# strona: http://localhost:4173

Serwer (narzedzia/serwer.mjs, zero zależności) serwuje katalog strona/, obsługuje czyste adresy i 404. Zamiast niego może być dowolny hosting statyczny (Netlify, Cloudflare Pages, GitHub Pages) — wystarczy opublikować zawartość katalogu strona/. Narzędzia developerskie wymagają npm install w katalogu narzedzia/ (sharp, png-to-ico, ffmpeg-static).

Do uzupełnienia przed publikacją

TODO-LINK-DYSKU-NAGRANIA / -ZDJECIA / -NAUKA — linki do folderów Dysku Google (w narzedzia/strefa-tresc.html, potem ponowne szyfrowanie).
Domena: w plikach użyto roboczej domeny https://handpanlodz.pl — po wyborze prawdziwej domeny podmień ją w index.html (canonical, OG, JSON-LD), robots.txt i sitemap.xml.