Portfolio v2

Portfolio v2

W trakcieAplikacja webowa2024-01Zespół: 1 os.

Osobiste portfolio z motywem ciemnym/jasnym, dwujezycznoscia (PL/EN), interaktywnym ptaszkiem-przewodnikiem i animacjami parallaxy. Zbudowane na Next.js 16 App Router.

Next.jsReactTSCSS Modules
Zobacz kodZobacz na żywo

Opis projektu

Portfolio v2 to kompletny redesign mojej strony osobistej, zbudowany od zera w Next.js 16 z App Routerem. Projekt wykracza poza proste portfolio — wprowadza trzy autorskie systemy definiujace doswiadczenie uzytkownika: silnik motywow, pelna internacjonalizacja oraz interaktywny ptaszek-przewodnik.

Sekcja hero portfolio w trybie ciemnym z paralaksa gor
Sekcja hero z warstwami paralaksy (tryb ciemny)

Architektura

Aplikacja wykorzystuje App Router z grupami tras (landing) i (main)/[lang], Server Components do poczatkowego ladowania danych oraz CSS Modules do izolacji stylow. Kazdy tekst jest przechowywany w typowanych slownikach, co utrzymuje pelna tlumaczalnosc UI.

Follower System — interaktywny ptaszek-przewodnik

Animowany ptaszek podazajacy za kursorem, pelniacy role przewodnika po stronie. System jest oparty na useReducer z osmoma typami akcji sterujacymi maszyna stanow:

  • Stany: spawning → following → goingToNest → inNest → despawning
  • Sledzenie: pozycja myszy throttlowana co 100 ms, wygladzana przez requestAnimationFrame z konfigurowalnym easingiem
  • Kierunek: automatyczne odbicie lewo/prawo na podstawie wektora ruchu
  • Sprite'y: bird-fly.gif (lot) i bird-idle.gif (spoczynek)

Komponenty sa rozdzielone na Spawn (punkt wejscia + wiadomosc powitalna), Follower (petla animacji) i Nest (pozycja domowa z wiadomosciami). FollowerProvider opakowuje glowny layout, dzieki czemu kazda strona ma dostep do kontekstu ptaszka.

Ptaszek podazajacy za kursorem w poblizu elementu gniazda
Ptaszek podazajacy za kursorem w strone gniazda
Theme System — jasny / ciemny z persistencja

W pelni autorski silnik motywow oparty na React Context z priorytetowym lancuchem rozwiazywania:

  1. Parametr URL (?mode=light)
  2. Wartosc localStorage
  3. Preferencja systemowa (prefers-color-scheme)
  4. Fallback z ciasteczka po stronie serwera (SSR)

Inline'owy ThemeScript wykonuje sie przed hydracja Reacta, zapobiegajac blysnieciu nieostylowanej tresci (FOUC). Wybrany motyw jest zapisywany zarowno w localStorage, jak i w ciasteczku, dzieki czemu serwer renderuje wlasciwa palete juz przy pierwszej odpowiedzi.

Zmienne CSS przelaczaja miedzy dwoma paletami: ciemna (granat #0b1e3d) i jasna (zielen #10b981), kazda z opcjonalnym wariantem o wysokim kontrascie.

Porownanie trybu ciemnego i jasnego obok siebie
Porownanie trybu ciemnego i jasnego
i18n System — pelna dwujezycznosc PL / EN

Kazdy string w aplikacji jest opakowany typem Localized<T>, gwarantujacym bezpieczenstwo kompilacyjne dla obu jezykow. System sklada sie z:

  • Middleware — odczytuje Accept-Language i przekierowuje na /pl lub /en
  • Warstwa slownikow — oddzielne moduly dla common, navigation, sections i poszczegolnych stron, ladowane z React.cache
  • Rewrite URL — next.config.ts mapuje polskie slugi na wewnetrzne angielskie trasy
  • SEO — hreflang generowane per strona, dwujezyczne metadane OpenGraph

Podejscie slownikowe trzyma tlumaczenia blisko funkcjonalnosci, ktorej dotycza, a generyk Localized uniemozliwia pomiecie tlumaczenia na poziomie typow.

Pozostale wyrozniki
  • Paralaksa hero — warstwowe SVG gor, mgly i chmur animowane przy scrollu
  • Formularz kontaktowy — server action z walidacja, dwujezyczne komunikaty bledow
  • Filtrowanie projektow — po statusie, kategorii i technologii z logika AND/OR
  • Rekomendacje — dwujezyczne referencje PDF
  • SEO — per-projektowe meta, hreflang, OpenGraph, kanoniczny URL