yusufsaitdirektas.com

Problem

Portfolyo siteleri birbirine benziyor: hero, üç kart, bir form. Beceri listesi "React biliyorum" diyor ama sitenin kendisi bunu kanıtlamıyor. Amaç, sitenin her pikselinin öğrendiğim şeyin canlı kanıtı olduğu bir deneyim kurmaktı — vitrin değil, gösteri.

Çözüm

Bu site kendi kodunu giyiyor. Açılışta bir terminal kendini derliyor, portre gerçek repo kodundan glif glif maddeleşiyor, her metin ekrana "çözülerek" geliyor. Tek kalıcı bir WebGL Canvas tüm sayfa boyunca yaşıyor; scroll bir kamera yolculuğuna dönüşüyor ve her bölüm sahnenin bir durağı.

Yaklaşım

• Tek Canvas mimarisi: R3F Canvas layout seviyesinde bir kez mount ediliyor; bölümler sahne içeriğini scroll durumuna göre değiştiriyor. Sayfa başına Canvas yok.
• Decode dili iki katmanlı: DOM'da el yazması bir scramble motoru (erişilebilirlik ve SEO bozulmadan), WebGL'de tek glyph atlasını paylaşan bir shader ailesi.
• Koreografi veri olarak: kamera durakları, scroll pencereleri ve shader hedefleri bileşenlere gömülü değil; lib/choreography.ts içinde yapılandırma.
• Performans pazarlıksız: particle bütçesi cihaza göre adaptif, useFrame içinde sıfır allocation, prefers-reduced-motion altında site tamamen statik ve kullanılabilir.
• İki dil: TR/EN, next-intl ile; tüm görünen metin messages dosyalarından.