Portfolio osobiste i blog

Szczegóły projektu

#Kontekst

Ta strona to mój projekt solo - napisałem ją i utrzymuję samodzielnie. Traktuję ją jako żywy poligon dla mojego sposobu pracy: przede wszystkim statyczne strony, treść w gicie, dobra dostępność i wydajność, oraz UI, które wciąż wygląda na dopracowane, a nie wygenerowane. Nie ma tu osobnego briefu od klienta - ograniczenia są realne (SEO, utrzymywalność, czas poza pracą komercyjną), a celem jest pokazanie, jak myślę o produkcie i stronie technicznej jednocześnie.

Design bazuje na gotowym motywie z marketplace’u, który dopracowałem pod siebie: własna paleta kolorów, dopisane customowe komponenty (animowane diagramy w SVG, interaktywne demo w postach blogowych, lightbox dla siatek obrazów), zmieniona struktura sekcji portfolio i bloga. Motyw był punktem startowym, nie finalnym wynikiem.

#Co dostarczyłem

• Marketing i portfolio: strona główna, kontakt, sekcja w stylu services na stronie portfolio oraz strony case study z karuzelami, osiami czasu i bogatym layoutem MDX.
• Blog: kategorie, tagi, wyszukiwanie, strony autorów i paginacja dopasowana do przemyślanej strategii treści - nie domyślny szablon bloga.
• Warstwa treści: TinaCMS na Markdownie i JSON w repo, z typowanymi kolekcjami treści w Astro tak, żeby strony pozostawały przewidywalne wraz ze wzrostem ilości danych.
• Design system: tokeny oparte o Tailwind, motyw jasny i ciemny, wspólne wzorce layoutu i reużywalne komponenty MDX (callouty, akordeony, bloki kodu, siatki obrazów).
• Animacje: scroll-driven i karuzele zaimplementowane z myślą o wydajności - intersection observers, scoped client scripts, brak layout thrashingu w hero i sekcjach portfolio.
• Próg jakości: ESLint i Prettier wpięte w workflow w stylu CI, zautomatyzowane audyty Lighthouse dla kluczowych ścieżek oraz testy dostępności na interaktywnych elementach jak lightbox i dialogi.
• Praca z AI: gdy zaczynałem ten projekt (2024), AI w developerskim workflow właściwie nie istniało. Strona rosła powoli i systematycznie - po godzinach, czasem z kilkomiesięcznymi przerwami, gdy życie i praca komercyjna miały priorytet. Z czasem narzędzia AI dojrzały i włączyłem do workflow Claude Code i modele od Cursora: code review, audyty wydajności, refaktoringi i iteracje treści. Klucz to wiedzieć, co delegować, a co weryfikować: AI obsługuje żmudne wyszukiwania i boilerplate, ja podejmuję decyzje architektoniczne i przeglądam każdą zmianę.

#Wydajność strony

Lighthouse to dla mnie narzędzie do szybkiej diagnostyki wydajności, a nie certyfikat do wywieszania na stronie. Blok poniżej uruchamia ad-hoc check PageSpeed Insights na żywej stronie, więc liczby odzwierciedlają aktualną publiczną wersję, a nie zdezaktualizowany screenshot.

Wyniki Lighthouse na żywo

MobileDesktop

Run audit

Ad-hoc check PageSpeed Insights dla strony głównej. Wyniki cache'owane na 30 min; kliknij Run again, żeby wymusić świeży check.

Click Run audit to fetch a mobile report.

#Efekt

• Wyniki Lighthouse stabilnie 90+ we wszystkich czterech kategoriach na żywej stronie (sprawdź metryki powyżej).
• Każde case study dowiezione w pełni - z diagramami architektury, interaktywnymi komponentami i uczciwie spisanymi wyzwaniami.
• Strona to żywy projekt (od 2024) - używam go jako prawdziwego pola testowego dla nowych wzorców, a nie zamrożonego szablonu portfolio.

#Wyzwania

Meta-projekt: opisywanie strony wewnątrz strony

Wpis portfolio o portfolio łatwo brzmi sztucznie. Skupiłem się na decyzjach i kompromisach (statyczna strona vs CMS-only edycja, jak są zorganizowane case studies, jak są scope’owane animacje), żeby strona czytała się jak case study dla rekrutera lub leada, a nie README wklejony do MDX.

Synchronizacja CMS i kodu

Kiedy schemat Tiny i content.config Astro definiują kształt, łatwo o rozjazd. Traktuję schematy Zod jako kontrakt dla buildów i odzwierciedlam istotne pola w Tinie, żeby błędy ujawniały się wcześnie - jeden model mentalny: pliki w src/content są kanoniczne, Tina to przyjazny edytor na wierzchu.

Animacje bez psucia Core Web Vitals

Efekty scrolla i karuzele łatwo blokują paint albo zacinają się na średniej klasy telefonach. Domyślnie używam CSS i krótkich skryptów, uruchamiam pracę na main thread tylko gdy użytkownik przewinął blisko właściwej sekcji, i unikam ciężkich bibliotek do prostych animacji typu reveal.

#Wnioski

• Posiadanie pełnego stacku - design, treść, infra i kod - sprecyzowało moje priorytety. Dowiezienie mniejszego zestawu dopracowanych wzorców pobiło długą listę półukończonych funkcji.
• Używanie własnego stacku (Tina, MDX) na prawdziwych postach i case studies pokazało problemy UX, których nie zobaczyłbym w demo repo.
• Traktowanie strony jako długoterminowego produktu (od 2024) zmusiło mnie do dokumentowania konwencji i regularnego aktualizowania zależności zamiast jednorazowych hacków.

Pracujmy razem

Jestem senior frontend developerem. Buduję szybkie, dostępne aplikacje webowe w React i Next.js, z TypeScriptem. Zależy mi na Core Web Vitals, SSR/SSG i skalowalnej, łatwej w utrzymaniu architekturze. Jeśli szukasz kogoś takiego - daj znać.

Napisz do mnie →