Vaka çalışması
cudezyazilim.com — kütüphanesiz WebGL 3D ile kurumsal site
Kendi marka sitemiz: hiçbir JavaScript kütüphanesi kullanmadan yazılmış WebGL 3D hero ve kaydırma tabanlı animasyonlar.
Proje künyesi
| Alan | Bilgi |
|---|---|
| Proje türü | Kendi projemiz |
| Müşteri | cudezyazilim (kendi projemiz) |
| Tamamlanma | 2026-08 |
| Yayın adresi | https://www.cudezyazilim.com |
| Görev alan | Arda Şentürk — tasarım ve geliştirme |
| Kullanılan hizmetler | Samsun web tasarım, Kurumsal web sitesi, SEO hizmeti |
Başlangıçtaki problem
Bir web tasarım firmasının kendi sitesi, yaptığı işin kanıtıdır. Ama sektörde yaygın durum şu: ajans siteleri ağır kütüphanelerle kurulup yavaş açılıyor ve "hızlı site yapıyoruz" iddiasıyla çelişiyor.
İkinci zorluk: etkileyici 3D görseller genelde hazır 3D model dosyaları veya three.js gibi kütüphanelerle yapılıyor. İkisi de sayfaya yüzlerce kilobayt yük bindiriyor.
Uygulanan çözüm
Siteyi sıfır bağımlılıkla yazdık: framework yok, kütüphane yok, harici font yok, CDN çağrısı yok. Toplam kod ağırlığı görseller hariç yaklaşık 60 KB.
Hero bölümündeki 3D obje bir video ya da model dosyası değil; elle yazılmış bir GLSL fragment shader'ı ile raymarching yöntemiyle her karede hesaplanıyor. Dosya boyutu yaklaşık 9 KB ve her çözünürlükte net.
Review Card bölümünde ürün fotoğrafları kaydırmaya bağlı 3D bir çerçevede dönüyor; süreç bölümünde katman destesi adım adım aydınlanıyor. Tüm kaydırma hesapları tek bir animasyon döngüsünde toplandı.
Erişilebilirlik ve dayanıklılık baştan tasarlandı: WebGL desteklenmiyorsa, ekran kartı bağlantısı koparsa veya kullanıcı "hareketi azalt" ayarını açtıysa sayfa gradyanlı bir yedek görünüme düşüyor ve içerik eksiksiz kalıyor.
Kullanılan teknoloji
- Saf HTML, CSS ve JavaScript (framework yok)
- WebGL 1.0 + elle yazılmış GLSL raymarching shader
- CSS 3D transform ile kaydırma tabanlı animasyonlar
- Statik barındırma (Vercel), otomatik SSL
- JSON-LD yapılandırılmış veri, otomatik sitemap
Ölçülebilir sonuçlar
| Ölçüt | Değer | Not |
|---|---|---|
| Harici ağ isteği | 0 | Font, CDN veya analitik kütüphanesi çağrısı yok |
| Kod ağırlığı | ~60 KB | HTML + CSS + JS toplamı, görseller hariç |
| 3D katman boyutu | ~9 KB | Model dosyası yerine matematiksel tanım |
| Yatay taşma | 0 px | 360–1440 px arası tüm genişliklerde ölçüldü |
Bu değerler kaynak dosyaların boyutundan ve tarayıcı üzerinde yapılan otomatik ölçümlerden alınmıştır. Ziyaretçi trafiği ve arama sıralaması verisi, site yayına alındıktan sonra Search Console üzerinden raporlanacak.
Nasıl ölçüldü?
- Kod ağırlığı: dosya boyutlarının doğrudan toplamı (gzip öncesi).
- Yatay taşma: 360, 390, 430, 768, 1024, 1280 ve 1440 piksel genişliklerde
document.documentElement.scrollWidthileinnerWidthkarşılaştırılarak ölçüldü. - 3D katmanın çalıştığı, shader'ın derlenip çizim yaptığı otomatik testle doğrulandı (piksel okuma ile).
İlgili hizmetler
Projeni konuşalım
Kapsamı birlikte netleştirelim; ücretsiz ön analizden sonra net fiyat ve takvim çıkaralım.
Doğrudan ulaş: 0536 022 3955 · ardasenturka0@gmail.com