Proje Mimarisi & Nasıl Yapıldı?
Sitede ve hava durumu projesinde uygulanan teknik çözümler, tasarım kalıpları ve optimizasyonlar.
1. Semantik HTML5 Mimarisi
Uygulama: Sayfa düzeni <header>, <nav>, <main>, <section> ve <footer> etiketleriyle standartlara tam uygun olarak inşa edildi.
Amaç: Erişilebilirlik (A11y) standartlarını yükseltmek, temiz bir DOM ağacı sunmak ve arama motorları için mükemmel SEO skoru sağlamak.
2. Modern CSS Grid & Flexbox
Uygulama: CSS değişkenleri (Custom Properties) kullanılarak koyu tema renk paleti merkezi olarak yönetildi. Kartlar ve paneller responsive grid yapısıyla dizildi.
Amaç: Ağır CSS kütüphanelerine (Bootstrap vb.) ihtiyaç duymadan saf ve ultra hızlı sayfa yükleme performansı elde etmek.
3. Saf JavaScript & DOM Yönetimi
Uygulama: Sekmeler (Tabs), Todo yönetimi (LocalStorage), Hesap makinesi ve saat modülleri saf ES6+ JavaScript ile kodlandı.
Amaç: Sıfır gecikmeli kullanıcı etkileşimi, tarayıcı belleğini yormayan temiz olay dinleyicileri (event listeners) oluşturmak.
4. Chart.js ile Veri Görselleştirme
Uygulama: İstatistikler sayfasında sıcaklık, nem ve rüzgar verileri duyarlı çizgi, halka ve sütun grafiklerine dönüştürüldü.
Amaç: Karmaşık meteorolojik verileri kullanıcının tek bakışta anlayabileceği şık grafikler halinde sunmak.
5. Optimize Medya & Lightbox
Uygulama: Galeri modülünde videolar `preload="metadata"` ile optimize edildi, üzerine gelindiğinde sessiz önizleme ve tam ekran modal oynatıcı eklendi.
Amaç: Ağ trafiğini tüketmeden ve işlemciyi yormadan akıcı video galerisi deneyimi sağlamak.
6. WebGL & Hava Durumu Paneli
Uygulama: Hava durumu projesinde arka plan videoları WebGL shader'ları üzerinden geçirilerek gerçekçi cam kırılması (refraction) ve derinlik sağlandı.
Amaç: GPU tabanlı yüksek performanslı ve modern Glassmorphism tasarım estetiği üretmek.