Skip to content
BAFHA FITNESS

Portfolio project

Why Does This Site Exist?

I have been building for the web for years. Corporate sites, e-commerce setups, performance optimization — I know that world well. This project answers a different question: what can I build with the same discipline on a modern JavaScript stack?

I chose the fitness theme deliberately. The content model is rich (muscle groups, equipment types, difficulty levels, programs), the interaction surface is wide (interactive body map, search, filtering, calculator) and the design language is clear: dark, disciplined, unpretentious.

Not a single image on this site is a stock photo — every graphic, including the body map, muscle group icons, movement animations and the hero animation, is hand-written SVG. The data layer is isolated in a single module; it currently uses build-time mock data, and connecting it to Sanity CMS tomorrow will not require touching page code. The site is fully statically generated in three languages (TR/EN/DE).

Technical Stack

  • Next.js (App Router)

    Pure HTML/CSS/JS output via static export — runs on any hosting without a Node server. Three languages with fully localized URLs, generated at build time.

  • TypeScript (strict)

    Data model, component contracts, multilingual content and the calculation layer are type-safe end to end.

  • Tailwind CSS

    A consistent, maintainable styling layer bound to design tokens (color, typography).

  • Framer Motion

    The body map flip transition and the scroll-triggered SVG drawing animation — reduced-motion aware.

  • Fuse.js

    Serverless, client-side fuzzy search and multi-dimensional filtering.

Let's Work Together

Whether your project is a corporate site or lives on a modern JS stack — let's talk.

Get in Touch