Portfolio
Ta strona. Dwa języki, statyczny HTML, case study i CV generowane z tych samych danych, a kod napisany razem z Claude Code.
- Rola
- Projekt, kod z Claude Code, wdrożenie
- Rok
- 2026
- Stack
- Nuxt 4, Vue, TypeScript, Tailwind CSS 4, Nuxt Content, Cloudflare Pages
1 dzień
od pierwszego commita do wdrożenia
CSP
nagłówki bezpieczeństwa na Cloudflare
PL / EN
dwie wersje językowe
1 JSON
z niego powstaje strona i CV w PDF
Zadanie
Potrzebowałem strony, która w 30 sekund pokaże, że dowożę produkcyjne systemy, i da prostą drogę do kontaktu. Do tego dwa języki i CV, które nie rozjedzie się ze stroną.
Co zrobiłem
Plan, architekturę i teksty ustaliłem sam, kod pisałem z Claude Code. Każdą zmianę czytałem i sprawdzałem w przeglądarce, zanim trafiła na produkcję.
Decyzje
Statyczny HTML
Strony są prerenderowane, więc nie ma serwera do utrzymania. Jedyny endpoint to formularz kontaktowy, który działa jako funkcja na Cloudflare.
Animacje w CSS
Nagłówek, oś doświadczenia i wejścia sekcji działają na animacjach sterowanych scrollem, bez JavaScriptu. Przy ograniczeniu ruchu się wyłączają.
E-mail składany w przeglądarce
Pełnego adresu nie ma ani w HTML-u, ani w bundlu, więc boty zbierające adresy go nie znajdą.
Co poprawiałem po drodze
Treść sekcji czekała na hydratację i przy wolnym łączu mogła zostać niewidoczna. Odsłanianie przeniosłem do CSS i jednego obserwatora, niezależnego od ładowania sekcji.
Rok w stopce i w liczbie lat rozjeżdżał się po Nowym Roku między HTML-em a przeglądarką. Teraz trafia do payloadu z buildu.
Efekt
Strona działa pod adresem adriannita.pl. Każdy push przechodzi lint, typy, testy i build, a po wdrożeniu smoke test sprawdza stronę i formularz.
Animacje w CSS
Nagłówek, oś doświadczenia i przejścia między stronami na animacjach sterowanych scrollem i View Transitions.
CSP i nagłówki
Content Security Policy z hashami skryptów inline i nagłówki bezpieczeństwa na Cloudflare.
SEO
Schema.org ProfilePage, hreflang, sitemap i obrazki OG generowane przy buildzie.
CI/CD
Lint, typy, testy i build przy każdym pushu, smoke test po wdrożeniu i wydania CalVer.
Masz podobny projekt?
Napisz w kilku zdaniach, co chcesz zbudować.