MERKÜT
Airsoft Takımı Websitesi
Site İçi Görüntüler
Müşteri & Bağlam
Merküt, İstanbul merkezli taktiksel ve MilSim odaklı bir airsoft takımı. Takımın ihtiyacı, sıradan bir hobi sitesinin çok ötesinde — profesyonel disiplini, takım ruhunu ve kurumsal kimliği yansıtan bir dijital varlık.
'Airsoft'u sadece bir hobiden ibaret görmüyoruz; onu profesyonel bir taktiksel disiplin ve yaşam biçimi olarak ele alıyoruz.' Bu cümle sitenin tüm tasarım dilini belirledi.
Tasarım Sistemi
Merküt'ün görsel dili askeri operasyon estetiği ile kurumsal güveni birleştiriyor. Koyu zemin, metalik sarı aksan, köşeli formlar ve Framer Motion animasyonları.
Hero'da paralaks arka plan, her bölümde Framer Motion giriş animasyonu. Rajdhani taktik tipografi, Inter gövde metni.
Platform Özellikleri
Partners Slider
Prisma ORM ile dinamik sponsor/partner verisi. Logo kartları sonsuz CSS marquee şeridinde akıyor — yeni partner eklenince slider otomatik güncelleniyor.
Taktik Galeri
Operasyon, eğitim ve etkinlik fotoğrafları için masonry grid galeri. Hover'da lightbox, kategori filtresi, Framer Motion animasyonları.
Ekip Profilleri
Rütbe, uzmanlık, rol bilgili üye kartları. Hover'da kart flip animasyonu, arka yüzde istatistikler. Komuta hiyerarşisi görsel olarak kurgulanmış.
Framer Motion & Parallax
Sayfa geçişleri, staggered enter animasyonları ve CSS parallax — hepsi Framer Motion kontrolünde. Ağır, kasıtlı, askeri ciddiyet taşıyan bir animasyon dili.
Teknik Mimari
Next.js 15 App Router, Server/Client Component ayrımı. Prisma ORM ile dinamik veri katmanı. TypeScript tip güvenliği tüm veri akışında.
Prisma + API Routes ile headless partner yönetimi. Admin panelsiz dinamik içerik — veritabanı kaydı = site güncellemesi.
Neden Next.js + Prisma?
Merküt statik bir vitrin değil — Prisma ile veritabanından çekilen canlı partner/sponsor verisi, yeni sponsor eklendiğinde site kendini güncelliyor. Framer Motion ise MilSim estetiğine yakışır ağır, kasıtlı animasyonlar sağlıyor. React'ın server component'leri partner sorgusunu build anında değil, istek anında çözüyor — her zaman güncel liste.
Teknik Zorluklar
Prisma Serverless Cold Start
⚡ Sorun
Vercel'de her cold start'ta Prisma Client yeniden initialize edildi ve veritabanı bağlantısı kuruldu. Yoğun olmayan saatlerde ziyaretçiler 3-4 saniyelik gecikme yaşadı.
✓ Çözüm
Prisma instance'ı global değişken olarak saklandı (global.prisma pattern). Vercel'in edge caching'i ile sık ziyaret edilen sayfalar warm tutuldu. Connection pool sınırı production için optimize edildi.
Sonsuz Partner Slider
⚡ Sorun
Partner logoları sonsuz döngüyle kayarken sonunda beyaz boşluk oluşuyordu. İçerik klonlanınca Framer Motion her klonu ayrı element olarak render edip animasyonu kırıyordu.
✓ Çözüm
Klonlama Framer Motion dışına alındı — saf CSS @keyframes translateX animasyonu kullanıldı. İçerik JavaScript ile kopyalanıp DOM'a eklendi, sonra CSS animasyonu başlatıldı. Framer Motion sadece sayfa giriş animasyonlarında kullanıldı.
MilSim Estetiği ile Erişilebilirlik Dengesi
⚡ Sorun
Koyu temada sarı (#f5c518) metnin kontrast oranı WCAG AA standardının altında kalıyordu. Renk karanlıklaştırıldığında marka kimliği zayıflıyordu.
✓ Çözüm
Sarı renk büyük/kalın başlıklarda (WCAG'ın large text kuralı) kullanıldı — bu durumda kontrast standardı daha düşük. Küçük metinler için daha açık bir sarı tonu (#fcd34d) ile standart sağlandı.