Szczegóły projektuStrona portfolioUkończony

Web Dev Portfolio

Web Dev Portfolio to produkcyjne portfolio, które właśnie przeglądasz. Prezentuje projekty frontendowe, usługi i case studies przez dwujęzyczne trasy, komponenty wielokrotnego użytku, dynamiczne podstrony projektów, statyczny export i deployment na Cloudflare Pages pod własną domeną.

Liveon
Kodon
Previewon

Otwórz live demo Zobacz kod źródłowy Wszystkie projekty

Next.jsTypeScriptTailwind CSSi18nStatic ExportCloudflare Pages

web-dev-portfolio

Linki projektu

Wersja live i kod źródłowy

Ta sekcja zbiera zewnętrzne linki związane z projektem. Po wdrożeniu lub opublikowaniu projektu linki pojawią się tutaj.

Wersja live

Wdrożona wersja projektu, którą można otworzyć i przetestować w przeglądarce.

Dostępne

https://zandeckidev.pl

Otwórz link

Kod źródłowy

Repozytorium z kodem źródłowym, strukturą projektu, komponentami i szczegółami implementacji.

Dostępne

https://github.com/PiotrZandecki/web-dev-portfolio

Otwórz link

Podgląd live

Osadzony podgląd projektu

Jeśli projekt ma wdrożoną wersję live, można go podejrzeć bezpośrednio w case study portfolio.

Podgląd live w przeglądarce

Otwórz wersję live

Podsumowanie

Projekt w skrócie

Kompaktowy przegląd typu projektu, statusu, stacku i najważniejszych elementów implementacji.

Status: Ukończony
Rok: 2026
Typ: Strona portfolio
Technologie: Next.js, TypeScript, Tailwind CSS

Najważniejsze elementy

Produkcyjne wdrożenie pod zandeckidev.pl
Polska i angielska wersja językowa
Dynamiczne podstrony case study projektów
Trasy SEO i workflow statycznego exportu

Przegląd techniczny

Status realizacji projektu

Szybki status techniczny projektu: deployment, kod źródłowy, podgląd wizualny i stack implementacyjny.

Wersja live

Dostępne

Ten projekt ma wersję live, którą można otworzyć i przetestować w przeglądarce.

https://zandeckidev.pl

Kod źródłowy

Dostępne

Repozytorium z kodem źródłowym jest dostępne i można je przejrzeć zewnętrznie.

https://github.com/PiotrZandecki/web-dev-portfolio

Podgląd wizualny

Dostępne

Projekt aktualnie korzysta z zaprojektowanego obrazu preview przygotowanego pod case study w portfolio.

Zaprojektowany podgląd portfolio

Stack

Dostępne

Technologie użyte do zbudowania albo zaprezentowania tego projektu w portfolio.

Next.js, TypeScript, Tailwind CSS, i18n, Static Export, Cloudflare Pages

Implementacja

Skalowalne dwujęzyczne portfolio i hub projektów.

Web Dev Portfolio jest zbudowane jako centralny hub projektów z lokalizowanymi trasami, case studies, reusable sekcjami, structured data i statycznym deploymentem.

Lokalizowany routing

Portfolio używa oddzielnych tras polskich i angielskich, żeby wspierać dwujęzyczną prezentację.

Kluczowe punkty

Struktura tras /en i /pl
Nawigacja zależna od języka
Lokalizowane metadata i treści

Model treści projektów

Dane projektów są przechowywane w plikach contentowych i używane w kartach, case studies, podglądach i trasach SEO.

Kluczowe punkty

Reusable dane projektów
Dynamiczne podstrony projektów
Wspólne preview wizualne

Statyczny deployment

Projekt jest skonfigurowany pod statyczny export i wdrożony przez Netlify.

Kluczowe punkty

Statyczny output
Sitemap i robots
Open Graph image i manifest

Testy i przegląd

Sprawdzane jako produkcyjna strona portfolio.

Główny nacisk testów to pokrycie tras, przełączanie języka, podstrony projektów, trasy SEO i produkcyjny deployment.

Pokrycie tras

Wszystkie główne strony powinny działać po polsku i angielsku po statycznym eksporcie.

Kontrole

Strona główna /en i /pl
Strony projects, services, about, stack i contact
Dynamiczne trasy case studies

Kontrole produkcyjne

Projekt powinien przechodzić lokalne kontrole przed pushem i deploymentem.

Kontrole

ESLint
Build produkcyjny Next
Weryfikacja deploymentu Netlify

SEO i metadata

Trasy SEO i metadata powinny być zgodne z produkcyjnym adresem strony.

Kontrole

Sitemap
Robots
Open Graph image

Checklist jakości

Gotowość prezentacji technicznej

Checklist projektowy pokazujący, które elementy prezentacji i realizacji są już dostępne w case study.

Podstrona case study

Gotowe

Projekt ma dedykowaną podstronę case study z uporządkowanymi sekcjami.

Wersja live

Gotowe

Wdrożony projekt można otworzyć i przetestować bezpośrednio w przeglądarce.

Kod źródłowy

Gotowe

Repozytorium źródłowe jest podpięte i można je przejrzeć zewnętrznie.

Podgląd wizualny

Gotowe

Projekt ma przygotowany podgląd wizualny do prezentacji w portfolio.

Stack technologiczny

Gotowe

Technologie użyte w projekcie są opisane i widoczne.

Kolejne kroki

Gotowe

Projekt ma jasną listę kolejnych usprawnień albo notatek rozwojowych.

Status release

Produkcyjne portfolio live podpięte pod własną domenę.

Web Dev Portfolio to główny projekt produkcyjny. Jest wdrożone na Cloudflare Pages, podpięte do zandeckidev.pl, połączone z repozytorium źródłowym i przygotowane jako utrzymywalny hub dla przyszłych frontendowych case studies.

Wersja live

Live na Cloudflare Pages

Podpięte

Produkcyjne wdrożenie jest podpięte i publicznie dostępne pod własną domeną.

Rozwiązany adres live

https://zandeckidev.pl

Projekt jest wdrożony jako strona statyczna.
Adres live jest podpięty do zandeckidev.pl.
Case study może osadzić podgląd strony live.

Otwórz live

Kod źródłowy

Repozytorium podpięte

Podpięte

Publiczne repozytorium źródłowe jest podpięte i dostępne z linków projektu.

Rozwiązany adres source

https://github.com/PiotrZandecki/web-dev-portfolio

Link do kodu prowadzi do repozytorium GitHub.
Repozytorium dokumentuje strukturę projektu i workflow deploymentu.
Karta source jest widoczna w technicznych sekcjach projektu.

Otwórz source

Podgląd wizualny

Preview dostępne

Podpięte

Zaprojektowany preview dla portfolio jest podpięty.

Asset

/project-previews/web-dev-portfolio-home.svg

Preview pojawia się w kartach projektów i sekcjach case study.
Może zostać później zastąpione realnym screenshotem produkcyjnym.
Asset jest częścią publicznego systemu preview projektów.

Komenda build

npm run build

Output builda

out

Kontrole

Kontrola ESLint przed wdrożeniem.
Build produkcyjny Next.js.
Statyczny export pod Cloudflare Pages.
Sitemap, robots, manifest i trasy Open Graph.

Live code showcase

Zapętlony podgląd kodu stojącego za case study.

Wybrany podgląd fragmentów implementacji. Preview przechodzi przez pliki projektu, a przycisk do źródła zostaje dostępny, jeśli publiczne repozytorium jest podpięte.

Repozytorium podpięteWeb Dev Portfolio

Dwujęzyczny hub projektów

Trasa projektów łączy lokalizowane metadata, structured data, karty projektów i techniczne sekcje portfolio.

Podgląd kodu

src/app/[locale]/projects/page.tsx

Otwórz repozytorium

src/app/[locale]/projects/page.tsx

Manifest assetów

Assety podglądu wizualnego

Techniczny przegląd assetów preview używanych do prezentacji projektu w kartach, sekcjach featured i podstronach case study.

Strona główna portfolio

Produkcyjna strona główna portfolio skupiona na pozycjonowaniu, wyróżnionych projektach, usługach i kontakcie.

Ścieżka assetu: /project-previews/web-dev-portfolio-home.svg
Typ assetu: SVG preview
Projektowany rozmiar: 1200 × 760

Używane w

Karty projektów
Sekcja featured project
Hero case study
Sekcja visual preview

Preview dostępne

Zaprojektowany preview dla portfolio jest podpięty.

Przyszła wymiana na screenshot

Zaprojektowane preview SVG można zastąpić realnymi screenshotami, gdy projekt będzie miał finalne wdrożenie live.

Case Study

Jak został zbudowany ten projekt

Krótki opis zakresu projektu, funkcji, decyzji technicznych oraz kolejnych kroków rozwoju.

Funkcje

Dwujęzyczny routing z osobnymi stronami po polsku i angielsku.
Hub projektów z filtrowaniem, wyszukiwarką i dynamicznymi case studies.
Komponenty wielokrotnego użytku dla kart, podsumowań, sekcji i szczegółów projektów.
Statyczny deployment na Cloudflare Pages z własną domeną.

Czego się nauczyłem

Jak organizować wielojęzyczne treści bez nadmiernego komplikowania projektu.
Jak używać dynamicznych tras dla skalowalnych podstron projektów.
Jak oddzielać treść, konfigurację, komponenty UI i routing.
Jak przygotować projekt portfolio pod deployment, SEO i dalszy rozwój.

Wyzwania

Zaprojektowanie routingu wokół języków i slugów projektów.
Utrzymanie modelu treści wystarczająco elastycznego pod przyszłe projekty.
Połączenie prezentacji portfolio z funkcją huba projektów.

Kolejne kroki

Zastąpić zaprojektowane preview prawdziwymi screenshotami produkcyjnymi tam, gdzie będą dostępne.
Dodać live demo dla Private Space i Aurora Beauty pod dedykowanymi subdomenami.
Dodawać kolejne projekty frontendowe jako osobne case studies.

Roadmap

Co można ulepszyć dalej

Roadmapa projektu pomaga utrzymać case study w uczciwej formie: co już działa, co jeszcze oczekuje i co można poprawić w kolejnej iteracji.

Zastąpić zaprojektowane preview prawdziwymi screenshotami produkcyjnymi tam, gdzie będą dostępne.

Dodać live demo dla Private Space i Aurora Beauty pod dedykowanymi subdomenami.

Dodawać kolejne projekty frontendowe jako osobne case studies.

Każdy projekt może się rozwijać.

To portfolio jest zaprojektowane tak, żeby nowe deploymenty, linki do kodu, screenshoty i notatki techniczne można było dodawać bez przebudowy całej struktury.

Omów projekt Wszystkie projekty

Kontynuuj przeglądanie

Więcej case studies

Wszystkie projekty

← Poprzedni projekt

Aurora Beauty

Nowoczesna strona firmowa dla marki beauty, skupiona na usługach, zaufaniu i responsywnej prezentacji.

Następny projekt

Więcej projektów

Zobacz inne case studies

Każdy projekt ma własną podstronę, strukturę i notatki z procesu tworzenia. To portfolio jest przygotowane tak, żeby rozwijało się razem z kolejnymi realizacjami.