Portfolio-Projekt
Warum gibt es diese Seite?
Seit Jahren entwickle ich für das Web. Unternehmensseiten, E-Commerce-Setups, Performance-Optimierung — diese Welt kenne ich gut. Dieses Projekt beantwortet eine andere Frage: Was kann ich mit derselben Disziplin auf einem modernen JavaScript-Stack bauen?
Das Fitness-Thema habe ich bewusst gewählt. Das Content-Modell ist reich (Muskelgruppen, Equipment-Typen, Schwierigkeitsgrade, Programme), die Interaktionsfläche groß (interaktive Körperkarte, Suche, Filter, Rechner) und die Designsprache klar: dunkel, diszipliniert, unprätentiös.
Kein einziges Bild auf dieser Seite ist ein Stockfoto — jede Grafik, einschließlich Körperkarte, Muskelgruppen-Icons, Bewegungsanimationen und Hero-Animation, ist handgeschriebenes SVG. Die Datenschicht ist in einem einzigen Modul isoliert; aktuell nutzt sie Build-Time-Mockdaten, und die Anbindung an Sanity CMS erfordert morgen keine Änderung am Seitencode. Die Seite wird in drei Sprachen (TR/EN/DE) vollständig statisch generiert.
Technischer Aufbau
Next.js (App Router)
Reines HTML/CSS/JS per Static Export — läuft ohne Node-Server auf jedem Hosting. Drei Sprachen mit vollständig lokalisierten URLs, zur Build-Zeit generiert.
TypeScript (strict)
Datenmodell, Komponentenverträge, mehrsprachiger Content und Berechnungsschicht sind durchgehend typsicher.
Tailwind CSS
Eine konsistente, wartbare Styling-Schicht, gebunden an Design-Tokens (Farbe, Typografie).
Framer Motion
Der Flip der Körperkarte und die scroll-getriggerte SVG-Zeichenanimation — mit Rücksicht auf reduzierte Bewegung.
Fuse.js
Serverlose, clientseitige Fuzzy-Suche und mehrdimensionales Filtern.
Lass uns zusammenarbeiten
Ob dein Projekt eine Unternehmensseite ist oder auf einem modernen JS-Stack lebt — lass uns reden.
Kontakt aufnehmen