İçeriğe atla
BAFHA FITNESS

Portfolyo projesi

Neden Bu Site Var?

Yıllardır web geliştirme yapıyorum. Kurumsal siteler, e-ticaret kurulumları, hız optimizasyonu — bu dünyayı iyi biliyorum. Bu proje ise başka bir soruya cevap: aynı disiplinle modern JavaScript stack'inde ne üretebilirim?

Fitness temasını bilinçli seçtim. İçerik modeli zengin (kas grupları, ekipman tipleri, zorluk seviyeleri, programlar), etkileşim alanı geniş (interaktif vücut haritası, arama, filtreleme, hesaplayıcı) ve tasarım dili net: karanlık, disiplinli, gösterişsiz.

Sitedeki hiçbir görsel stok fotoğraf değil — vücut haritası, kas grubu ikonları, hareket animasyonları ve hero animasyonu dahil tüm grafikler elle yazılmış SVG. Veri katmanı tek bir modülde izole; şu an build-time mock veri kullanıyor, yarın Sanity CMS'e bağlamak sayfa koduna dokunmayı gerektirmiyor. Site üç dilde (TR/EN/DE) tamamen statik üretiliyor.

Teknik Yapı

  • Next.js (App Router)

    Static export ile saf HTML/CSS/JS çıktısı — Node sunucusu gerektirmeden her hosting ortamında çalışır. Üç dil tam lokalize URL'lerle build-time'da üretilir.

  • TypeScript (strict)

    Veri modeli, komponent sözleşmeleri, çok dilli içerik ve hesaplama katmanı uçtan uca tip güvenli.

  • Tailwind CSS

    Tasarım tokenlarına (renk, tipografi) bağlı, tutarlı ve bakımı kolay stil katmanı.

  • Framer Motion

    Vücut haritası flip geçişi ve scroll-tetiklemeli SVG çizim animasyonu — reduced-motion duyarlı.

  • Fuse.js

    Sunucu gerektirmeyen, client-side bulanık arama ve çok boyutlu filtreleme.

Birlikte Çalışalım

İster kurumsal bir site ister modern JS stack'inde bir projen olsun — konuşalım.

İletişime Geç