Tüm Projeler
Kurumsal Web & UI Tasarımı 2025

Ballistic
Defence — Taktik Giyim & Ballistik Koruma

Vanilla HTMLCSSJavaScriptOrbitronSıfır Bağımlılık
0 Dış Bağımlılık
Orbitron Taktik Font
TR/EN Çok Dilli Destek
Sertifikalı Ballistik Ürünler

Site İçi Görüntüler

Ballistic Defence hero
Hero — Kurumsal Güç Ballistic Defence'in hero bölümü: siyah-yeşil (#4ade80) palet, taktik giyim görseli ve "Sıfır Uzlaşı" sloganı. Özel cursor animasyonu sayfanın tamamında aktif.
Ballistic Defence ürün kataloğu
Ürün Kataloğu — Sertifikalı Malzemeler Balistik yelek, taktik çizme, koruyucu eldiven kategorileri. Her ürünün yanında sertifika bilgisi (NATO, CE) yer alıyor. Hover'da ürün detayı slide-up ile açılıyor.
Ballistic Defence alt bölüm
Alt Bölüm — Sertifikasyon ve İletişim ISO sertifikaları, test raporları ve kurumsal iletişim bilgileri. TR/EN dil değişimi sayfanın tamamında tek butonla çalışıyor; localStorage'da kaydediliyor.

Proje & Bağlam

Ballistic Defence; sertifikalı ballistik plakalar, plate carrier'lar ve taktik giyim sunan kurumsal bir web sitesi. Ürün kalitesi ve güvenilirlik, tasarımın her katmanına yansımış.

Sıfır harici bağımlılık. Hiçbir framework, hiçbir kütüphane, hiçbir build adımı. Tüm animasyonlar ve altyapı Vanilla HTML/CSS/JS ile inşa edildi.

"Sıfır bağımlılık bir kısıtlama değil, bir özgürlük. Her satır kod tam kontrol altında." — Teknik felsefenin özü.

Tasarım Sistemi

Orbitron + Inter kombinasyonu: Orbitron ile taktik atmosfer, Inter ile okunabilirlik. İkisi birlikte otorite ve modernliği dengede tutuyor.

Noise overlay + özel imleç + loader animasyonu — kullanıcıyı bir 'sistem başlatma' ritüeliyle karşılıyor. Web sitesi değil, operasyon merkezi.

#080808
#121212
#1c1c1c
#4ade80
#16a34a
Vanilla JS — Build adımı yok, framework yok, sıfır bağımlılık

Platform Özellikleri

01

Ballistik Sertifikasyon Vurgusu

Sertifikalı ballistik plakalar, sitenin en kritik satış argümanı. NIJ ve uluslararası sertifikasyonlar tasarım hiyerarşisinde ön plana alındı.

02

Custom Cursor Efekti

Standart imlecin yerine özel CSS imleç — trail efekti ile. Sitenin operasyonel sistem hissini güçlendiren kritik mikro-etkileşim.

03

Loader Animasyonu

Sayfa açılışında tam ekran sistem başlatma loader'ı. Terminal estetiği, progress bar, saf CSS animasyonu — hiçbir kütüphane yok.

04

TR/EN Çok Dilli Sistem

data-key sistemi ile tüm DOM iki dilde. Tek JS fonksiyonu, localStorage hafızası. Hiçbir i18n kütüphanesi yok.

Sıfır Bağımlılık Felsefesi

En cesur karar: framework reddi. Bu ölçekte kurumsal bir tanıtım sitesi için framework yükü — bundle, build, güvenlik açıkları — kazanımlarını aşıyor.

Her satır tam kontrol altında. Deploy: Netlify'e klasör sürükle. Build adımı yok, npm install yok, pipeline yok. Mutlak basitlik.

Vanilla HTML5 CSS3 Vanilla JavaScript Orbitron Inter CSS Custom Properties localStorage IntersectionObserver Sıfır Bağımlılık Responsive

Neden Vanilla JS? Sıfır Bağımlılık.

Ballistik zırh bir güven ürünü. Sitenin de bant genişliği harcayan bir yükleme animasyonu göstermemesi, 3 saniyede içeriğe ulaşması gerekiyor. Framework bağımlılığı olmayan saf HTML/CSS/JS dosyası herhangi bir CDN üzerinden ışık hızında servis ediliyor. Orbitron font ise tek başına tüm askeri estetiği taşıyor — başka bir şeye ihtiyaç yok.

Teknik Zorluklar

Custom Cursor Touch Cihazlarda

⚡ Sorun

Touch cihazlarda özel imleç dokunma noktasını yanlış takip etti — tıklama alanları kaydı.

✓ Çözüm

matchMedia('pointer: fine') ile tespit — fare varsa özel cursor, dokunma varsa native cursor. Sıfır çakışma.

Loader Süresinin Gerçek Yükle Eşlenmesi

⚡ Sorun

Sabit 3 saniyelik loader — hızlı bağlantıda gereksiz bekletme, yavaş bağlantıda erken kapanma.

✓ Çözüm

Promise.all() ile minimum süre (1.5s) + DOMContentLoaded — her ikisi bitince loader kapanıyor. Mükemmel senkronizasyon.

İki Dil, Tek URL — SEO

⚡ Sorun

JS ile dil değişimi — Google bot JS çalıştırmadan taradığında sadece TR içeriği görüyor, EN indexlenmiyor.

✓ Çözüm

Hreflang meta + ayrı /en/ HTML dosyası. Google her iki dili farklı URL üzerinden indexliyor.