Wyzwanie klienta

Jakub Wiśniewski to doświadczony frontend developer i UI designer z Krakowa, specjalizujący się w projektowaniu interfejsów dla startupów i firm B2B. Mimo solidnego portfolio prac, jego strona na Wix nie prezentowała się profesjonalnie na tle konkurencji.

„Klienci, którym polecałem swoje portfolio, mówili, że znaleźli ‹kogoś innego›. Wiedziałem, że strona mnie nie sprzedaje. Wolno się ładowała, nie miała dark mode'u i po prostu nie robiła wrażenia."

Główne bolączki

Słaba pierwsza impressja — Wix z templajtem wyglądał jak strona z 2018 roku, nic się nie wyróżniało
Brak dark mode — branża IT i startup oczekuje dark mode; brak go był sygnałem: „nie zna trendów"
Brak animacji — statyczna, płaska strona nie komunikowała umiejętności z zakresu UI/UX
PageSpeed 41/100 — wolne ładowanie zabijało wiarygodność jeszcze przed przeczytaniem treści
Zero konwersji — 850 odwiedzin miesięcznie, 0 zapytań ze strony

Nasze podejście

Projekt realizowaliśmy w ramach planu Biznes (od 6 000 PLN) – portfolio to produkt sprzedażowy, który pracuje 24h na dobę. Na tanie rozwiązanie nie było tu miejsca.

1. Strategia i UX (Dni 1–3)

Analiza 12 portfolio topowych developerów/designerów z Dribbble i GitHub
Zdefiniowanie grupy docelowej: decydenci w startupach B2B szukający seniorów
Mapowanie ścieżki klienta: Landing → Kompetencje → Projekty → Kontakt
Kluczowy insight: 70% decydentów podejmuje decyzję w ciągu 8 sekund od wejścia na stronę

2. Projekt UI/UX (Dni 4–7)

System kolorów z wsparciem dla dark i light mode od podstaw (CSS custom properties + next-themes)
Paleta: czerń (#09090b) / biel (#fafafa) z wyrazistym akcentem primary dla przycisków i gradientów
Typografia: klasyczna para bezserifowa — czytelna na każdym tle, w każdym motywie
Layout 12-kolumnowy: socials po lewej jako pionowy czynik zaufania, content po środku, zdjęcie po prawej
Kluczowa decyzja: animowany badge „Dostępny do współpracy" — pulsujący punkt natychmiast komunikuje status freelancera

3. Rozwój (Dni 8–16)

Stack technologiczny:

Next.js 16 — SSR + dynamic imports dla sekcji poniżej foldu; drastycznie redukuje czas do interaktywności
Tailwind CSS 4 — zero zbędnego CSS, utility-first, spójny design system
Framer Motion 12 — animacje wejścia (FadeIn), hover-efekty na kartach projektów, płynne przejścia
Lenis — biblioteka smooth scroll zapewniająca płynne przewijanie jak w natywnych aplikacjach
Embla Carousel + Auto-Scroll — karuzela umiejętności z automatycznym przewijaniem bez JS overhead
shadcn/ui + Radix UI — dostępne, stylowalne komponenty UI (Button, Dialog, etc.) zgodne z WCAG
next-themes — dark/light mode z zerowym mignięciem przy ładowaniu (SSR-safe)
TypeScript 5 — pełne typowanie; kod, który nie sprawia problemów przy skalowaniu
Lucide React + React Icons — tylko ikony faktycznie użyte (tree-shaking)
Vercel — globalny CDN, automatyczne deploye, edge functions

Kluczowe decyzje techniczne:

H1 poza animacją FadeIn → LCP mierzony bezpośrednio, wynik < 0.7 s
Dynamic imports dla sekcji About, Projects, Contact → redukcja initial bundle o ~38 kB
content-visibility: auto na sekcji projektów → przeglądarka nie renderuje elementów poza viewport
Dedykowany FadeIn komponent z Intersection Observer — animacje bez wpływu na CLS

4. Kluczowe sekcje

| Sekcja    | Decyzja projektowa                                                                  |
| --------- | ----------------------------------------------------------------------------------- |
| Hero      | Gradient h1 + badge statusu + 2 CTA (kontakt / projekty) — konwersja w 8 sekund   |
| About     | Karuzela umiejętności z % kompetencji — natychmiastowy dowód ekspertyzy             |
| Projects  | Karty hover z obrazem, kategorią i rokiem — portfolio jak Dribbble, nie tabelka     |
| Contact   | Formularz ze smooth-scroll + ikony platform kontaktowych                            |
| Dark mode | Toggle w navbarze — klient widzi: „ten człowiek rozumie UI"                         |

5. SEO i dostępność (Dni 17–19)

Semantyczny HTML: h1 → h3, landmark roles, aria-label na każdym przycisku ikon
Open Graph + Twitter Card — profesjonalny podgląd linku gdy Jakub udostępnia portfolio
TypeScript + ESLint z konfiguracją Next.js — zero błędów accessibility na etapie kodu

Wyniki po 30 dniach

Porównanie: stara strona (Wix) vs nowe portfolio (Netova):

| Metryka                              | Przed   | Po    | Zmiana  |
| ------------------------------------ | ------- | ----- | ------- |
| Lighthouse Performance               | 41      | 98    | +139%   |
| Lighthouse SEO                       | 72      | 100   | +38%    |
| Lighthouse Accessibility             | 68      | 95    | +39%    |
| Czas ładowania (LCP)                 | 3.9 s   | 0.6 s | −85%    |
| Zapytania ofertowe / miesiąc         | 0       | 4     | +∞      |
| Współczynnik odrzuceń                | 78%     | 46%   | −40%    |
| Średni czas na stronie               | 0:32    | 2:14  | +320%   |
| Konwersja do sekcji kontaktu         | 3%      | 18%   | +500%   |

W ciągu 3 tygodni Jakub podpisał kontrakt z jednym z 4 zapytań – wartość projektu pokryła koszt portfolio w pierwszym miesiącu.

Co mówi klient

„Poczułem różnicę natychmiast. Zanim odpisałem na pierwsze zapytanie, klient napisał: ‹Twoje portfolio to najlepsze, jakie widziałem – właśnie dlatego się odzywam›. Inwestycja zwróciła mi się w 3 tygodnie."

— Jakub W., Freelance Developer & UI Designer

Podsumowanie

Dla freelancera i każdego konsultanta B2B portfolio to główne narzędzie sprzedaży. Zainwestowanie w profesjonalną implementację zamiast Wix nie jest kosztem estetyki — to bezpośredni wpływ na przychód.

Dzięki połączeniu Next.js 16, Framer Motion, dark mode i strategicznego UX, Jakub zyskał:

💼 4 zapytania B2B w pierwszym miesiącu (z 0 na Wix)
⚡ 0.6 s ładowania — szybciej niż 97% portfolio w sieci
🎨 Dark mode — signal kompetencji, który zamknął pierwsze rozmowy sprzedażowe
📱 Pixel-perfect na każdym urządzeniu, od iPhone SE po 4K monitor

Potrzebujesz portfolio, które pracuje na Ciebie? Napisz do nas — pierwsze portfolio nowego klienta dostajemy w 48h.

Portfolio Jana Kowalskiego. – Strona, która przyciąga klientów premium

Galeria