Pek Yakında · CRT
Retro CRT efekti ve three.js masa sahnesiyle bir 'pek yakında' sayfası.
Bu portfolyo yayına çıkana kadar alan adında duran bekleme sayfası. Retro bir CRT televizyon efekti, glitch animasyonları ve özel bir imleç var; masaüstünde de gerçek zamanlı bir three.js sahnesi açılıyor.
- Durum
- Tamamlandı
- Kategori
- Grafik
- Güncelleme
- 4 Ekim 2026
- Yığın
- Next.js 16React 19three.jsReact Three Fiber
- Bağlantılar
- Kaynak kod
AFU Coming Soon, eski bir CRT televizyonun ekranını taklit eden bir "pek yakında" sayfası. Ekranda camı, tarama çizgilerini, paraziti ve 3D perspektifi görüyorsun. Yazılar ve ikonlar RGB renk kaymasıyla ve dinamik clip-path ile glitch'leniyor; fare imlecin de sayfaya özel, animasyonlu bir imlece dönüşüyor. Sayfada GitHub, LinkedIn ve e-posta bağlantılarım duruyor.
Aynı sahne, iki sayfa
Ana sayfa ile 404 sayfası aynı sahneyi paylaşıyor, değişen tek şey ekrandaki yazı: biri "PEK YAKINDA", diğeri "404" diyor. İki sayfa da ortak bir crt-page bileşenini kullanıyor; sahnenin hangi sürümünün gösterileceğine cihaza bakarak bu bileşen karar veriyor. Ana sayfanın ekran yazılarını tek bir TEXT nesnesinde, sosyal bağlantıları da tek bir sabitler dosyasında topladım. İkonlar satır içi SVG olarak duruyor. Her bileşen tek bir dosya ve stili yanındaki .module.css dosyasında. Favicon'u bile bir script dinamik olarak üretiyor.
Masaüstünde 3D, telefonda CSS
Masaüstünde three.js ve React Three Fiber ile gerçek zamanlı çizilen bir masa sahnesi görüyorsun. 3D kodunu tembel yüklüyorum, yani yalnızca gerektiğinde indiriliyor. Telefondaysan ya da tarayıcında WebGL yoksa aynı CRT görünümünü bu kez CSS ile kuruyorum. Sayfayı Next.js 16, React 19 ve strict modda TypeScript ile yazdım; Docker ile yayınlanıyor.
Ekran görüntüleri