PROCARS Batumi
Site İçi Görüntüler
Müşteri & Bağlam
PROCARS, 2010'dan beri Gürcistan'ın Karadeniz kıyısındaki şehri Batum'da faaliyet gösteren premium otomotiv galerisi. Porsche, Mercedes-AMG, Ferrari gibi markaların satış, ithalat ve kiralanmasını yapıyorlar; müşteri kitlesi başta Türkiye, İngiltere ve Gürcistan'dan geliyor.
Talep basitti ama beklenti yüksekti: satıştaki araçları öne çıkaran, kurumsal güven veren ve üç dilde çalışan bir web sitesi. Ama daha da önemlisi — ziyaretçinin tarayıcısında bir showroom ziyareti hissi yaratmak.
Tasarım Kararları
Premium otomotiv sektöründe renk seçimi kritik. Koyu arka plan araçları öne çıkarır — tıpkı gerçek showroom'larda olduğu gibi. Tasarımın tamamını gece siyahı (#0a0a0a) zemin ve tek bir kırmızı aksan (#dc2626) üzerine kurdum. İkinci bir vurgu rengi kullanmadım; araçların kendisi zaten renk.
Kartlar için glassmorphism seçtim — yarı saydam, bulanık cam efekti. Bu teknik, arka plandaki araç görsellerinin kartların içinden de hissedilmesini sağlıyor.
İnteraktif Özellikler
3D Silindir Showroom
CSS perspective ve rotateY transform'larla silindir carousel. Aktif araç önde, yanlar perspektif ile geriye çekiliyor. Tamamen CSS 3D.
Mouse Tilt Kartlar
Öne çıkan araç kartları fareyi takip ediyor. mousemove + requestAnimationFrame ile yumuşak 3D eğim efekti.
Renk Özelleştirici
Ek görsel olmadan CSS filter ile gerçek zamanlı renk değiştirme. hue-rotate + saturate = 0 ek istek, anlık geçiş.
Otomatik Yorum Slider
4 saniyede bir ilerleyen slider. setInterval + CSS transition. Kullanıcı dokunduğunda timer sıfırlanıyor.
Üç Dilde Çalışan Bir Site
PROCARS'ın müşteri tabanı üç ülkeye yayılıyor. Her metin elementine data-translate özelliği eklendi; tek bir JS fonksiyonu sayfanın tamamını değiştiriyor.
80+ metin bloğu, form alanları ve butonlar dahil her şey üç dilde. Gürcüce Unicode karakter seti için font uyumluluğu ayrıca test edildi.
Neden Framework Yok?
React veya Vue kullanmak kolaydı. Ama galeri sitesi için dinamik state yönetimi gerekmiyor. Bu kadar iş için framework eklemek gereksiz bağımlılık ve daha ağır paket demek.
Saf HTML + CSS + Vanilla JS. Vite sadece dev server ve build için. Sonuç: ~40KB deploy çıktısı, herhangi bir hosting'e hazır.
Teknik Zorluklar
3D Carousel Mobilde Performans
⚡ Sorun
CSS perspective + rotateY ile yapılan 3D carousel mobil cihazlarda katmanlama hataları verdi. Bazı Android tarayıcıları backface-visibility'i yanlış yorumladı, kartlar yanlış sıralandı.
✓ Çözüm
Tüm kartlara will-change: transform ve transform-style: preserve-3d eklendi. Her kart için z-index manuel olarak hesaplandı. Belirli Android versiyonları için webkit prefix'li fallback eklendi.
Gürcüce Karakter Seti ve Font
⚡ Sorun
Üçüncü dil olarak Gürcüce eklenince Inter font'u Gürcüce karakterleri (Georgian script) kapsamıyordu. Noto Sans Georgian yüklemek performansı etkiledi, Google Fonts subset optimizasyonu gerekti.
✓ Çözüm
Google Fonts'un &subset=georgian parametresiyle sadece gerekli Gürcüce glifler yüklendi. Unicode range CSS ile Gürcüce metin otomatik olarak doğru font'a yönlendiriliyor, Latin metin Inter kullanmaya devam ediyor.
CSS Filter Renk Özelleştirici
⚡ Sorun
Araç rengi değiştirici için SVG fill ile RGB değeri değiştirme denendi — ancak gerçek araç fotoğrafına uygulanamıyordu. Sonradan CSS filter: hue-rotate() kullanıldı ama gri/siyah tonlar bozuluyordu.
✓ Çözüm
Araç görseli iki katmana ayrıldı: renkli boya katmanı (hue-rotate uygulanıyor) ve gölge/doku katmanı (mix-blend-mode: multiply ile üstte duruyor). Sadece boya değişiyor, doku ve gölgeler korunuyor.