Ta strona — Projekt własny

Nie ma tu przycisku „otwórz aplikację“, bo już w niej wchodzisz. Ta strona jest jednocześnie portfolio i własnym case study — pokazuję ją tutaj, bo najuczciwiej odpowiada na pytanie: co tak naprawdę potrafi ktoś, kto projektuje i koduje? Odpowiedź nie jest opisem. Jest stroną, po której się poruszasz.

Architektura: statyczny Astro, zero bazy danych

Strona jest zbiorem gotowych plików HTML — ładuje się natychmiast, nie ma czego zhakować, hosting kosztuje grosze. Cały system stoi na Astro 7 w trybie statycznym, z content collections opisanymi schematem Zod. Portfolio, case studies i projekty AI to osobne kolekcje z własnymi frontmatterami — dodanie nowego wpisu to wrzucenie pliku markdown i obrazka, bez grzebania w kodzie.

Dane portfolio mieszkają w works.ts — prosty typowany array z kategoriami (znaki, druk, firmowe, opakowania, kampanie), który napędza grid na stronie głównej i filtrację w portfolio. Każda praca to file, title, client, cat — minimum formalności, maksimum elastyczności.

Obrazy przechodzą przez sharp na etapie builda: Astro automatycznie generuje responsive srcset w WebP, z odpowiednimi sizes i loading strategią. Karty OG (1200×630) generuje osobny skrypt, który skanuje piksele litery „ı“, żeby posadzić paser co do subpiksela — zero ręcznego ustawiania.

System wizualny: farby, nie paleta

Cała identyfikacja jest wywiedziona z farb procesowych — tych samych, którymi przez ponad 10 lat zamykałem pliki do druku. Pomarańcz „lisa“ nie jest wybrany z palety — jest policzony jako nadruk magenty 60% na żółcieni 100% w trybie multiply. To nie metafora dopisana po fakcie: kolor w przeglądarce naprawdę powstaje z dwóch farb (mix-blend-mode: multiply), a nie z gotowego kodu heksadecymalnego.

Kropką nad bezkropkowym „ı“ w słowie „lıs“ jest paser — znak pasowania z arkusza drukarskiego, ten sam celownik, którym operator maszyny sprawdza, czy farby trafiły w rejestr. Podpisy techniczne są złożone monospace’em i niosą prawdziwe dane (nakład, farby), a nie ozdobny „eyebrow“. Typografia to variable font Bricolage Grotesque prowadzony na osiach szerokości. Każdy element odsyła do jednego źródła — do przygotowalni.

Znak, który żyje

Logotyp w nagłówku to dwie płyty farb złożone na sobie w czasie rzeczywistym — można je złapać kursorem i rozerwać, wrócą do rejestru na sprężynach. Litery oddychają szerokością przy najechaniu. Przy przewijaniu całe słowo dokuje w logo nawigacji — natywne scroll-driven animations, bez bibliotek.

Pod znakiem stoi kolofon odbitka #45DB · nakład 1/1. Każde wejście na stronę losuje inny numer i inne mikro-rozpasowanie płyt — jak każda odbitka z prawdziwego nakładu.

AI jako inżynier, nie generator

System zaprojektowałem sam — koncept farb, paser, architektura danych, każda decyzja typograficzna są moje. AI (Claude Code) była narzędziem inżynierskim, które pozwoliło mi przełożyć ten projekt na produkcyjny kod — samodzielnie, bez zespołu deweloperów, w ułamku czasu, jakiego wymagałaby ta sama robota ręcznie.

Rzemiosło siedzi w szczegółach

Dostępność to podłoga, nie ozdoba. Kto ma w systemie wyłączone animacje, nie dostaje martwej strony — dostaje spasowaną, statyczną odbitkę. Każdy ruchomy efekt ma swój nieruchomy odpowiednik. Widoczny fokus klawiatury, „przejdź do treści“, opisy dla czytników ekranu.
Statyczny HTML, zero zależności po stronie klienta. Strona nie ładuje żadnego frameworka JS tam, gdzie nie trzeba. Interakcje (hero, reveal) to vanilla TypeScript, ładowany warunkowo.
Sitemap, meta OG, structured data — wszystko generowane automatycznie przy buildzie.

Dlaczego to jest w portfolio

Bo najsłabszym dowodem jest deklaracja, a najmocniejszym — artefakt. Mogę napisać, że projektuję spójne systemy i wdrażam je z AI. Mogę też dać Ci stronę, która jest tym systemem: przeglądasz ją, klikasz, przewijasz — i cały czas stoisz wewnątrz dowodu.