Marcin Kowal – Personal Trainer

Website for a Warsaw-based personal trainer. Bold typography, animated sections and an interactive contact popup.

Next.jsTailwind CSSTypeScriptCSS AnimationsResponsive DesignUI/UX Design
https://marcin-kowal.vercel.app/
Marcin Kowal – Personal Trainer — long website preview

About the project

A website for personal trainer Marcin Kowal, designed in an athletic, bold style — black background, massive typography and an orange brand accent.

⏱ Timeline: 1–2 weeks

What I worked on

  • ✓UX/UI design in bold & athletic style
  • ✓Next.js 14 + Tailwind CSS development
  • ✓Scroll-triggered CSS animations (IntersectionObserver)
  • ✓Interactive popup with contact form
  • ✓Ticker, count-up numbers, animated typography hero
  • ✓Mobile-first responsiveness

Results

  • ↗Strong visual identity for the trainer
  • ↗High conversion thanks to CTA and popup form
  • ↗Fast loading and full responsiveness
  • ↗Animations engaging users throughout the page

Challenges and solutions

Challenge

The site needed to look premium and athletic at the same time.

Solution

Massive clamp() typography, outline text and orange as the single accent color.

Challenge

A lot of content without overwhelming the user.

Solution

Sections split with animated entrances — each appears only on scroll.

Challenge

Conversion — encouraging visitors to get in touch.

Solution

Popup with a contact form that opens when clicking a pricing plan — zero extra clicks to inquiry.

Key project decisions

  • →Next.js 14 App Router for performance
  • →Tailwind CSS over Framer Motion — pure CSS transitions
  • →Barlow Condensed as display font — athletic character
  • →Black background + single accent color = strong identity

Integrations

Contact form inside modalAnimated ticker and count-up numbersResponsive pricing plan popupScroll-triggered animations