Moje stare portfolio było lotem WebGL od Ziemi do Neptuna. Na moim komputerze wyglądało świetnie. Na telefonie pokazywało ekran „Oops!”. To historia zamiany go na plakat: wersje, research, strony, od których się uczyłem, i powody każdej decyzji, głównie w obrazkach.
W skrócie
- Przed: strona 3D z wynikiem 34 w mobilnym Lighthouse, która nie działała na telefonach.
- Po: Astro, trzy języki, jeden font, kilka shaderów, które nigdy nie przeszkadzają, i od 95 do 100 punktów w mobilnym Lighthouse.
- Jak: wiki projektu przed pierwszą linijką kodu, research nagradzanych stron i prawdziwych produktów, cztery działające projekty do wyboru i kontrola przy każdej zmianie.
Według jakich zasad pracowałem?
Sześć zasad: większość spisana przed pierwszą linijką kodu, reszta wyniesiona po drodze. Wszystko poniżej z nich wynika.
- Najpierw plan, potem kod. Projekt żyje w wiki, które każda sesja AI czyta na początku.
- Najpierw praktyczność, potem efekt wow. Robi wrażenie w 3 sekundy i działa jednym dotknięciem na telefonie.
- Najpierw research, potem wybór. Najpierw prawdziwe strony i ekrany; wybieram spośród działających opcji, nie szkiców.
- Pokaż zamiast opisywać. Obraz albo ruchome demo wszędzie tam, gdzie byłby akapit.
- Każda wersja zostaje. Żeby pokazać, jak się zmieniało, i móc wrócić.
- Nic nie wychodzi bez sprawdzenia. Testy, zrzuty ekranu, które oglądam sam, szybkość na wolnym telefonie.
Jak to szło, wersja po wersji?
Około czterech dni, a każda wersja zostaje.
-
Zastąpione 00 Wcześniej
Kosmiczne portfolio 3D
Lot WebGL do Neptuna. Piękny na moim komputerze, ekran „Oops!” na telefonach.
- Zostaje
01 5 paź 2026
Faza 0: wiki zamiast kodu
Najpierw plan, potem kod.
Research, wymagania, marka, prawo i zasady projektu, zanim powstał jakikolwiek komponent.
-
Odrzucony 02 5 paź 2026
Drafting Table
Czysty system to jeszcze nie dobry projekt.
Papier, cyjanotypia i nagłówek jak tabelka rysunku. Przechodził wszystkie testy i niczym nie zapadał w pamięć.
-
Wybrany Poster 03 5 paź 2026
Cztery działające kierunki
Typografia jest obrazem.
Orbit, Poster, Toybox i Exhibit jako działające strony. Claude polecał Orbit. Ja wybrałem Poster.
-
Uwagi 04 5 paź 2026
Runda 2: Poster wszędzie
Cała strona główna w stylu Poster, trzy motywy kolorów i dwa fonty sprawdzane obok siebie.
-
Zatwierdzone 05 5 paź 2026
Runda 3: mniej tekstu
Mniej tekstu, więcej do zobaczenia.
Logotypy narzędzi z nazwami, krótki film dla każdego projektu, krócej wszędzie. Tu kończą się makiety i zaczyna prawdziwy kod.
-
Działa 06 6-8 paź 2026
Strona, na której jesteś
Zbudowana w Astro sekcja po sekcji, a potem przerobiona po kolejnych rundach moich uwag na żywej stronie.
Po co ją przebudowywać?
Tak wyglądało stare portfolio w ruchu:
Na moim komputerze wyglądało pięknie. Potem je zmierzyłem, 5 października 2026:
- 13,8 MB przed przyciskiem „start”. Z czego 7,6 MB to font z emoji.
- 34 punkty w mobilnym Lighthouse. Na spowolnionym telefonie główna treść pojawiała się po 46,9 sekundy.
- Telefony dostawały ekran „Oops!”. Strona w ogóle tam nie działała.
- Ruszało nią tylko kółko myszy. Bez gestów, bez klawiatury.
- Nic dla wyszukiwarek. W surowym HTML nie było tekstu do zaindeksowania.
Ktoś, kto otwiera portfolio z wiadomości na LinkedInie, na telefonie, daje mu może dziesięć sekund. Moja stara strona wydawała je na pasek ładowania. Udowadniała, że umiem pisać shadery, ale też, że nie pomyślałem o osobie po drugiej stronie.
Dlatego bez ekranu ładowania, bez bramki na wejściu, bez przejmowania przewijania i z tą samą treścią na każdym ekranie.
Po co jest portfolio?
Żeby pokazać pracę. Brzmi oczywiście, a jednak wiele portfolio zasypuje odwiedzających akapitami „o mnie” albo sprzedaje swój stack technologiczny, jakby był czymś świętym, a projekty lądują trzy przewinięcia niżej. Tutaj projekty są zaraz po imieniu: „Zobacz projekty” to pierwszy przycisk, narzędzia to jeden pasek logotypów, a „o mnie” ma własną stronę.
Jak wyglądało planowanie?
Zanim powstała pierwsza linijka kodu, spisałem projekt w wiki ze stron w markdownie: odbiorców, markę, budżety, teksty prawne. Pomysł pochodzi z LLM Wiki (otwiera się w nowej karcie) Andreja Karpathy'ego: AI samo aktualizuje wiki, więc to, czego się nauczy, odkłada się zamiast przepadać. Trzy hooki Claude Code podsuwają właściwe strony każdej sesji:
- 01 Start sesji Najpierw ładują się zasady pracy i lekcje.
- 02 Każde polecenie Hook wskazuje strony wiki, których potrzebuje zadanie.
- 03 Praca Claude Code buduje i sprawdza, mając te strony przed sobą.
- 04 Koniec tury Jeśli zmienił się kod, a wiki nie, tura raz się zatrzymuje.
Więcej w tekście LLM wiki: pamięć projektu dla Claude Code.
Co pokazał research?
Agenci otworzyli 20 portfolio programistów nagrodzonych na Awwwards w latach 2023-2026, na komputerze i na spowolnionym telefonie (1,6 Mb/s, procesor 4× wolniejszy). Każde dostało dwie oceny od 1 do 5: Wow za to, jak bardzo zapada w pamięć, i Praktyczność za to, jak szybko dojdziesz do projektów i kontaktu. Miarą praktyczności był moment, w którym pierwszy prawdziwy link daje się kliknąć.
| Praktyczność → | |||||
|---|---|---|---|---|---|
| Wow ↓ | 1 | 2 | 3 | 4 | 5 |
| 5 |
|
|
| ||
| 4 |
|
|
|
|
|
| 3 |
|
|
| ||
| 2 |
| ||||
| 1 | |||||
Obie oceny 4 lub więcej: tylko 4 z 20 stron
Co z tego wyszło:
- Nagroda nie oznacza użyteczności. Na spowolnionym telefonie tylko 8 z 20 stron dało się użyć w ciągu 3 sekund, a 9 nie dało się użyć nawet w ciągu 10. Cztery najmniej praktyczne (światy jak z gier i intra z bramką) miały nawet wyższą średnią ocenę Site of the Day niż trzy najbardziej praktyczne.
- Jury nie zatrudnia. Awwwards liczy projekt graficzny w 40%, użyteczność w 30%, kreatywność w 20% i treść w 10%, a jurorzy to projektanci i programiści. Rekruter pyta o jedno: czy znajdę projekty i kontakt?
- Efektowna i praktyczna naraz jest możliwa, ale rzadka. Tylko cztery strony dostały co najmniej 4 w obu ocenach. Co je łączy: prawdziwe linki od pierwszego ekranu i pokaz obok treści, nigdy przed nią.
Tak to wygląda na telefonie. Najpierw immersyjny koniec skali:
Kliknij, żeby zacząć Bruno Simon 
Brak linków w HTML Samsy 
Około 20 s ładowania Jordan Delcros I cztery, którym udało się jedno i drugie. Każda dała tej stronie jakiś pomysł:
Prawdziwe linki od pierwszego ekranu Edoardo Lunardi 
Pokaz obok treści Jesper Landberg 
Hire me w nagłówku Antoine Wodniack 
Jeden efekt-wizytówka Stefan Vitasović Pomysły na sekcje dał Mobbin (otwiera się w nowej karcie), biblioteka prawdziwych ekranów z działających produktów. Tematy do wyboru nad moim formularzem kontaktowym to jeden z nich: zaczynasz od dotknięcia, a nie od pustego pola.
Dlaczego nie kolejny świat 3D?
Szczerze? Uwielbiam je. Moje poprzednie portfolio było jednym z nich. Ale zmierzyłem już wtedy oba rodzaje stron, a bilans wyglądał tak:
| Pełny świat 3D | Ta strona | |
|---|---|---|
| Pierwszy ekran | ekran ładowania albo „kliknij, żeby zacząć” | moje imię i nazwisko, rola i dwa przyciski |
| Linki | często żadnych w HTML (Samsy, Jordan Delcros) | każdy link to prawdziwy HTML |
| Wyszukiwarki i czytniki ekranu | tekst narysowany w WebGL jest dla nich niewidoczny | prawdziwy tekst, malowany jako pierwszy |
| Wolny telefon | 9 z 20 nagrodzonych stron bezużytecznych przez 10 s | shadery startują po tekście i tylko wtedy, gdy je widać |
| Brak WebGL lub WebGPU | błąd zamiast strony (Kris Temmerman) | obraz w CSS pod spodem |
Efekt wow zostaje, ale jako warstwa, a nie bramka. Na tej stronie działają cztery shadery, napisane dla niej bez żadnej biblioteki:
Jak prowadzę AI?
Jak mały zespół. Daję brief głównemu agentowi, subagenci robią research równolegle, serwery MCP dostarczają prawdziwe dane, hooki pilnują ryzykownych poleceń, testy sprawdzają wynik, a ja go przeglądam. AI pisze dużo kodu; decyzje należą do mnie.
Klocki, z których to zbudowałem, opisałem w tekście o skillach, hookach, MCP i subagentach w Claude Code.
Co się stało z pierwszym projektem?
Dlatego Claude zbudował cztery naprawdę różne kierunki jako działające strony. Polecał Orbit. Ja wybrałem Poster: brutalizm z dobrymi manierami. Płaskie nasycone kolory, twarde przesunięte cienie, kwadratowe przyciski i typografia dopasowana od krawędzi do krawędzi.
Wybór Claude Orbit Mój wybór Poster 
Toybox 
Exhibit Jak zmieniała się każda część i dlaczego?
Sześć części strony w kolejnych wersjach. Przeklikaj je.
Runda 2
Lista kontroli. Wszystko prawda i wszystko to podłoga. Sprzedawała testy, a nie mój sposób pracy.
Runda 3
Liczniki hooków, stron i agentów. Liczby, które zmieniają się co tydzień i nic nie mówią o pracy.
Teraz
Decyzja Pokaż, jak powstaje praca, a nie ile jej jest.
Jedna zmiana w siedmiu krokach, od mojego briefu do mojego przeglądu, każdy z małą rysowaną sceną.
Runda 2
Siedem kart, każda z akapitem. Wszystko widać, nic nie da się przeczytać na pierwszy rzut oka.
Runda 3
Boczne tytuły, które otwierają się po najechaniu. Zwięźle, ale trudno to czytać.
Teraz
Decyzja Najpierw doświadczenie, a każdy certyfikat do sprawdzenia.
Lista po lewej, jedna otwarta karta po prawej, link do sprawdzenia każdego certyfikatu.
Runda 2
Zwykły formularz, a każde pole to powód, żeby się zatrzymać.
Runda 3
Decyzja Jak najmniej pól.
Najpierw wiadomość. Pole na odpowiedź pojawia się, gdy zaczniesz pisać.
Teraz
Wklej e-mail, numer telefonu albo link do LinkedIna, a pole na odpowiedź wypełni się samo. Działa też bez JavaScriptu.
Runda 2
Cztery zasady w ponumerowanych linijkach. Łatwo je napisać, łatwo przeskoczyć.
Teraz
Decyzja Opowiedz to jako historię, którą widać.
Pierścień siedmiu przystanków, każdy z rysowaną sceną i prawdziwym przykładem.
Telewizor
Telewizor retro, który przełączał projekty, i rysowana scena wszędzie tam, gdzie nie było czego nagrać. Fajne, ale za dużo tego: wyglądało na vibe coding.
Noc
Jedno ciemne pole, mapa poziomic pod tytułem, plansze na przemian w lewo i w prawo i soczewka rentgenowska nad każdym zrzutem. Spokojniej, ale trudno się to czytało.
Teraz
Decyzja Najpierw łatwo przejrzeć, potem efekt.
Ściana wszystkich projektów, z której skaczesz do wybranego, a pod nią zwykła siatka kart na jasnym tle. Poziomice przeszły do stopki.
Przed
Kolory zależały od miejsca karty na liście, więc wpis zmieniał kolor między stronami.
Po
Decyzja Jedna paleta na okładkę i temat narysowany dosłownie.
Skala dla porównania, przekreślone ciastko dla analityki bez cookies. Bez słów.
Za wszystkimi sześcioma stoi jedna zasada: pokaż rzecz, utnij akapit.
Jak wyglądają pozostałe strony?
Każda strona dostaje tyle samo uwagi co strona główna, na laptopie i na telefonie.
Wszystkie projekty 
Moje życie 
CV 
Blog 
Jakie są drobne szczegóły?
Imię wypełnia ekran bez JavaScriptu. Przy budowaniu skrypt mierzy font i liczy dokładną szerokość każdej linii, więc imię i nazwisko sięgają od krawędzi do krawędzi, zanim ruszy jakikolwiek skrypt (jak to działa).
Telefony dostają tę samą stronę. Każdy efekt po najechaniu ma odpowiednik dotykowy (jak), a formularz kontaktowy ma własny opis, razem z błędem (formularz kontaktowy na statycznej stronie).
Dla kogo jeszcze jest ta strona?
Dla wszystkich, także dla osób, które korzystają z sieci inaczej. Strona, która działa tylko z myszką i przy idealnym wzroku, kogoś wyklucza, a ja wolę, żeby tak nie było. Dlatego:
- Ruch, który możesz zatrzymać. Jeden przycisk „Zatrzymaj animacje” zatrzymuje wszystko, a przy włączonym ograniczeniu ruchu wszystko od razu pokazuje stan końcowy (jak to działa).
- Klawiatura dociera wszędzie. Link „przejdź do treści” omija nagłówek, każdy efekt po najechaniu ma odpowiednik przy fokusie, a fokus nigdy nie chowa się pod przyklejonym nagłówkiem.
- Czytnik ekranu słyszy całą historię. Ukryty tekst dodaje to, co oko widzi z kontekstu, na przykład „otwiera się w nowej karcie”, a nazwa każdego przycisku zaczyna się od słów, które na nim widać.
- Kontrast jest testowany, nie oceniany na oko. Test jednostkowy sprawdza każdą parę kolorów, a axe przechodzi przez każdą stronę.
Skąd wyszukiwarki wiedzą, kim jestem?
Mapa strony i meta tagi to podłoga. Żeby znaleźć mnie po nazwisku, a kiedyś pokazać panel wiedzy, wyszukiwarka musi mieć pewność, o kim jest ta strona. Dlatego każda podstrona opowiada jej tę samą historię:
- Jedna osoba, jeden identyfikator. Strona główna i CV opisują mnie w danych strukturalnych jako jedną osobę (
Person): imię i nazwisko, rola, prawdziwe zdjęcie i moje profile. Każdy wpis i strona Moje życie wskazują na nią, a linki do moich profili mająrel="me". - Prawdziwe zdjęcia z prawdziwymi faktami. Moje życie pokazuje moje własne zdjęcia, każde z opisem, gdzie i kiedy powstało, i każde w mapie obrazów.
- Podpisany autor. Każdy wpis to
BlogPostingtej samej osoby, z ramką o autorze pod spodem, a każdy fakt z zewnątrz ma źródło z datą. - Stopka, która pracuje. Każda strona linkuje do projektów, CV, bloga, jego kanału RSS i moich profili.
- Jeden adres na stronę. Jeden kanoniczny URL, wersje językowe połączone ze sobą i karta do udostępniania dla każdej strony w każdym języku.
Build się wywraca, jeśli strona zgubi tytuł, opis albo adres kanoniczny albo jeśli dane strukturalne przestaną się parsować.
O autorze 
Stopka Jak sprawdzam każdą zmianę?
- 01 Statycznie Typy, lint i testy jednostkowe.
- 02 Przeglądarki Playwright na każdej stronie, z axe do dostępności.
- 03 Oczy Zrzuty ekranu w szerokościach telefonu, tabletu i komputera, które oglądam sam.
- 04 Szybkość Lighthouse na wolnym telefonie.
Nic nie jest gotowe, dopóki testy nie przechodzą i dopóki sam nie obejrzę zrzutów.
Z czego jest zbudowana?
| Część | Narzędzie |
|---|---|
| Framework | Astro 7 (dlaczego nie Next.js) |
| Język i style | TypeScript, Tailwind CSS 4 |
| Tłumaczenia | Lingui |
| Repozytorium | Turborepo i bun |
| Font | Anybody, zmienny font (OFL) |
| Ikony | Tabler (MIT) i Simple Icons (CC0) |
| Hosting | Vercel |
| Formularz kontaktowy | EmailJS za funkcją Vercel, Cloudflare Turnstile |
| Analityka | Umami Cloud, bez cookies |
| Testy | Playwright, axe-core, Vitest, Lighthouse |
| AI | Claude Code |
Gdzie to wylądowało?
Jeśli chcesz porozmawiać o podobnym projekcie albo o pracy, mój formularz kontaktowy to jedna wiadomość.
Źródła
- llm-wiki.md, plik z pomysłem Andreja Karpathy'ego (GitHub Gist, 4 kwietnia 2026) (otwiera się w nowej karcie) (dostęp: )
- Lighthouse performance scoring (Chrome for Developers) (otwiera się w nowej karcie) (dostęp: )
- Understanding Success Criterion 2.2.2: Pause, Stop, Hide (W3C) (otwiera się w nowej karcie) (dostęp: )
- Awwwards, Sites of the Day (otwiera się w nowej karcie) (dostęp: )
- Mobbin, biblioteka prawdziwych ekranów aplikacji i stron (otwiera się w nowej karcie) (dostęp: )
- Playwright (otwiera się w nowej karcie) (dostęp: )
- axe-core, silnik reguł dostępności (Deque) (otwiera się w nowej karcie) (dostęp: )
- Solar System Scope, tekstury planet (CC BY 4.0) użyte w starym kosmicznym portfolio (otwiera się w nowej karcie) (dostęp: )
- Anybody, zmienny font (Google Fonts) (otwiera się w nowej karcie) (dostęp: )