Marcin Kowal – Trener Personalny

Strona internetowa dla trenera personalnego z Warszawy. Bold typografia, animowane sekcje i interaktywny formularz kontaktowy.

Next.jsTailwind CSSTypeScriptCSS AnimationsResponsive DesignUI/UX Design
https://marcin-kowal.vercel.app/
Marcin Kowal – Trener Personalny — długi zrzut strony

O projekcie

Projekt strony dla trenera personalnego Marcina Kowala, zaprojektowanej w atletycznym, odważnym stylu — czarne tło, masywna typografia i pomarańczowy akcent marki.

⏱ Czas realizacji: 1–2 tygodnie

Co zrobiłam w projekcie

  • ✓Projekt UX/UI w stylu bold & athletic
  • ✓Kodowanie w Next.js 14 + Tailwind CSS
  • ✓Animacje CSS przy scrollu (IntersectionObserver)
  • ✓Interaktywny popup z formularzem kontaktowym
  • ✓Ticker, count-up numbers, hero z animacją typografii
  • ✓Responsywność mobile-first

Efekt

  • ↗Wyraźna identyfikacja wizualna trenera
  • ↗Wysoka konwersja dzięki CTA i formularzowi w popupie
  • ↗Szybkie ładowanie i pełna responsywność
  • ↗Animacje angażujące użytkownika na każdej sekcji

Wyzwania i rozwiązania

Wyzwanie

Strona musiała wyglądać premium i atletycznie jednocześnie.

Rozwiązanie

Masywna typografia clamp(), outline text, pomarańczowy akcent jako jedyny kolor.

Wyzwanie

Duża ilość treści bez przytłoczenia użytkownika.

Rozwiązanie

Podział na sekcje z animowanym wjazdem — każda pojawia się dopiero przy scrollu.

Wyzwanie

Konwersja — zachęcenie do kontaktu.

Rozwiązanie

Popup z formularzem otwierający się po kliknięciu planu cenowego — zero kliknięć do zapytania.

Kluczowe decyzje projektowe

  • →Next.js 14 App Router dla wydajności
  • →Tailwind CSS zamiast Framer Motion — czyste CSS transitions
  • →Barlow Condensed jako font display — atletyczny charakter
  • →Czarne tło + jeden kolor akcent = mocna identyfikacja

Integracje i połączenia

Formularz kontaktowy w modaluAnimowany ticker i count-up numbersResponsywny popup z planem cenowymScroll-triggered animations