Yeni emrelutfi.com nasıl yapıldı? 3D bir ben, masa başı bir sahne ve 2,3 MB'lık bir avatar

Eski sitem güzeldi. İnsanlar girip "wow" diyordu. Ama bir sorun vardı: "wow" demek, teklif istemek demek değil. Ziyaretçi geliyor, karakteri çeviriyor, topları itiyor ve çıkıp gidiyordu.

Yeni emrelutfi.com'u tek bir soruyla tasarladım: Bu sayfadaki her animasyon, ziyaretçiyi bir adım daha "Teklif Al" butonuna yaklaştırıyor mu? Yaklaştırmıyorsa ya değişti ya da gitti. Bu yazıda o süreci, işe yarayan ve yaramayan şeylerle birlikte anlatıyorum.

Önce sıra, sonra efekt

İlk iş olarak sayfanın akışını kâğıda çizdim. Bir ziyaretçinin kafasındaki sorular hep aynı sırada geliyor: Bu kim? Daha önce ne yaptı? Benim işimi yapabilir mi? Nasıl çalışıyor? Ne kadar sürer? Ona nasıl ulaşırım?

Ana sayfa da tam olarak bu sırayı takip ediyor: kısa bir giriş, canlı projeler, hizmetler, süreç, hakkımda, sık sorulanlar ve en sonda teklif formu. Animasyonlar bu iskeletin üstüne geldi, tersi değil.

Karakter: şablon değil, ben

Eski sitede imleci takip eden bir karakter vardı. Çok seviliyordu ama bana ait değildi; internette binlerce portfolyoda aynısı var. Yenisinde kendi 3D avatarımı kullandım.

Avatarı Avaturn ile fotoğraflarımdan ürettim, animasyonları (el sallama, yazı yazma, yürüme, işaret etme ve bir de breakdance) Mixamo'dan aldım. Sitede şunları yapıyor:

• Açılışta el sallıyor, başı ve gözleri imleci takip ediyor.
• Aşağı kaydırınca yukarıdan düşüp üç monitörlü masasına oturuyor ve kod yazmaya başlıyor.
• Hakkımda bölümünde ayağa kalkıp dönüyor ve selam veriyor, en altta dans ediyor.

Ham model 11,8 MB idi. Bir hero için bu kabul edilemez. Dokuları WebP'ye çevirip boyutlarını küçülttüm, geometriyi meshopt ile sıkıştırdım ve kullanılmayan yüz ifadelerini attım. Model 2,3 MB'a indi.

Burada bir hata yaptım: ilk seferde yüz ifadelerinin hepsini atmıştım. Sonuç, hiç göz kırpmayan ve dik dik bakan bir ben oldu. Göz kırpma ve bakış yönüyle ilgili ifadeleri geri ekledim; şimdi birkaç saniyede bir göz kırpıyor, ara sıra çift kırpıyor ve göz kapakları hafif aşağıda duruyor. Küçük bir detay ama karakteri "canlı" gösteren tam olarak bu.

Masa başı sahnesi

Süreç bölümünde kamera omzumun üstünden üç monitöre bakıyor. Monitörlerde video yok, hepsi tarayıcıda canlı çiziliyor:

• Ortada bir editör, sitenin kendi dosyalarını harf harf yazıyor.
• Solda bir terminal build, test ve deploy çıktılarını akıtıyor.
• Sağda bir git geçmişi, commit'ler dallara düştükçe diff'leriyle birlikte yukarı kayıyor.

İlk versiyonda bu sahne takılıyordu. Sebebi üç ekranın aynı karede güncellenmesiydi; her seferinde üç büyük doku birden ekran kartına gönderiliyordu. Ekranları sırayla güncellemeye geçince takılma kayboldu. Aynı dönemde sahnedeki nokta ışıklarının hepsini kaldırdım, gölgeyi her karede hesaplamak yerine bir kere çizdim ve çözünürlüğü ekranın kendi yoğunluğuyla sınırladım. Görüntü neredeyse aynı kaldı, akıcılık ciddi şekilde arttı.

Projeler: 3D bir halka

Projeleri sıkıcı bir ızgara yerine kaydırdıkça dönen bir halkaya dizdim. Öndeki proje öne çıkıyor, yandakiler arkaya kararıyor. Fareyle sürükleyerek döndürmek, yandaki bir karta tıklayıp onu öne getirmek de mümkün. Telefonda ise parmakla kaydırılan bir kart şeridine dönüşüyor.

Ekran görüntülerini elle almak yerine headless Chrome ile çeken küçük bir script yazdım. Çerez bantlarını ve WhatsApp balonlarını "kabul et"e basmadan gizliyor, sayfanın açılış animasyonu bitene kadar bekliyor, sonra çekiyor. RepoVerse gibi uygulamalarda boş giriş ekranı yerine örnek bir şehri açıp çekiyor.

Hizmetler: proje değil, hologram

Hizmetler bölümünde ilk başta gerçek projelerimin ekran görüntülerini laptop ve telefon modellerinin içinde gösteriyordum. Sonra fark ettim ki projelerim değiştikçe bu sahneyi de güncellemem gerekecek. Onun yerine her hizmet için soyut bir hologram yaptım: bir site iskeleti, bir mağaza, bir panel, bir sinir ağı ve bir yörünge. Proje listesi değişse de sahne hep doğru kalıyor.

Fizik: kütüphanesiz

Teknoloji bölümündeki toplar için hazır bir fizik motoru (yaklaşık 1 MB'lık wasm) eklemek yerine küçük bir çözücü yazdım: merkeze çekim, top-top çarpışması ve imlecin görünmez bir küre gibi topları itmesi. Fareyi hızlı savurursan toplar o hızla fırlıyor, tıklarsan dağılıyorlar. Yaklaşık yüz satır kod, sıfır bağımlılık.

En önemli kısım: teklif formu

Bütün bu animasyonların varlık sebebi sayfanın sonundaki dört adımlı form. Hazır bir şartname istemiyor; ne yapmak istediğini, projenin hangi aşamada olduğunu ve nasıl ulaşacağımı soruyor. İki dakika sürüyor.

Eskiden form sadece e-posta gönderiyordu. E-posta servisi bir an aksasa talep kayboluyordu. Şimdi her talep önce sitenin kendi veritabanına kaydediliyor ve yönetim panelime düşüyor. Orada her talebi "yeni, iletişime geçildi, teklif verildi, kazanıldı" diye işaretleyip notlarımı tutuyorum. E-posta artık sadece bir bildirim.

Gizlilik ve ölçüm

Sitede Google Analytics yok, çerez bandı da yok. Kendi basit sayacımı yazdım: hangi sayfanın kaç kez açıldığını, ziyaretçilerin hangi siteden geldiğini ve formun hangi adımında kaç kişinin kaldığını günlük toplamlar olarak tutuyor. IP adresi ya da kişiyi tanıyacak hiçbir şey saklamıyor. Tarayıcısında "takip etme" ayarı açık olanları hiç saymıyor.

Kullandığım teknolojiler

• Next.js App Router, Vite tabanlı vinext ile derleniyor.
• Cloudflare Workers üzerinde çalışıyor, veriler D1 veritabanında.
• 3D için React Three Fiber ve Three.js.
• Kaydırma animasyonları için GSAP ve yumuşak kaydırma için Lenis.
• Yazdığın bu blog da düz Markdown dosyalarından oluşuyor.

Yolda öğrendiklerim

• Önce akış, sonra efekt. Güzel bir animasyon yanlış yerdeyse sadece gürültü.
• Performans sorunlarının çoğu "çok şey çizmekten" değil, "aynı anda çizmekten" kaynaklanıyor.
• Küçük detaylar (bir göz kırpma, bir imleç takibi) büyük efektlerden daha çok "canlı" hissettiriyor.
• Kullanıcının verisini kaybetmeyecek sistemi kurmadan güzel bir form yapmanın anlamı yok.

Güzel bir site insanları durdurur. İyi bir site onları harekete geçirir.

Bir projen varsa, formu doldur. Sonraki yazılarda bu sitenin kodundan, işletmeler için kurduğum sistemlerden ve yolda öğrendiklerimden bahsedeceğim.