emircyn.com

Kaydırma animasyonları ve WebGL galerisiyle iki dilli portfolyo.

Karanlık oda, kırmızı gezinme çizgisi ve kavisli proje galerisiyle kişisel sitem. Türkçe ve İngilizce olarak hazırladım.

İhtiyaç

Arayüz çalışmalarımı hareketle göstermek; siteyi hızlı ve JavaScript olmadan kullanılabilir tutmak.

Görselleri, animasyonları, WebGL galerisini, iki dilli içerik yapısını ve Worker’ı tasarlayıp geliştirdim.

Her parçanın çalıştığı yer. Kırmızı çizgi örnek akışı izliyor.

L1 Arayüz Çalıştığı yer: Tarayıcı
Statik HTML ve gömülü CSS. Animasyonlar ilk görüntüden sonra başlıyor; galeri ekran dışında veya gizli sekmede duraklıyor.
- Astro 5
- GSAP ScrollTrigger
- Lenis
- WebGL
- View Transitions
L2 Sunucu Çalıştığı yer: Cloudflare Workers
Statik dosyaları sunuyor; HTTP ve www isteklerini esas HTTPS adresine yönlendiriyor.
- Cloudflare Workers
- Static assets

L2 · Sunucu Worker, stilleri içeren HTML sunar.
L1 · Arayüz Önceden yüklenen görseller ve yazı tipleri ilk görüntüyü destekler.
L1 · Arayüz Sayfa yüklendikten sonra tarayıcı boşta kaldığında animasyonlar başlar.
L1 · Arayüz Desteklenen cihazlarda WebGL açılır; ekran dışında çizim duraklar.

01
Statik yerleşim

İçerik ve bağlantılar JavaScript olmadan çalışıyor. Animasyonlar hareket azaltma tercihine uyuyor.
02
Sonradan başlayan animasyon

Animasyonlar ilk görüntüden sonra başlıyor. Kaydedilen Lighthouse performansı: masaüstü 100, yavaşlatılmış mobil 91.
03
Yerel galeri

WebGL, dokunmatik ve klavye kullanımını destekleyen gerçek bağlantılı, kartlara hizalanan galeriye görsel efekt ekliyor.
04
Gren dokusu

Yazılımla çizilen Chromium’u çökerten filtrelerin yerine hazır gren dokusu kullanılıyor.