PIXEL NEONENTERTAINMENT
RESMİ STÜDYO PORTFOLYOSU
PIXEL NEON WEB
Pixel Neon’un resmi stüdyo portfolyosu: cyberpunk temalı, Türkçe/İngilizce dil destekli ve çevrimdışı çalışabilen bir web sitesi. Ağır 3D ve video içeriğine rağmen Lighthouse 95+ hız skoru.
01
Cyberpunk Neon Arayüz
Three.js ile çizilen 3D sahne, parçacık efektleri, neon cam paneller ve açık/koyu tema ile stüdyonun dijital vitrini.
02
Tüm Projeler Tek Yerde
P Downloader, Görsel Yönetici, Trilyoner Simülatörü ve PİLLAR; her ürünün kendi tanıtım sayfası var.
03
Lighthouse 95+ Hız
Ağır 3D ve video içeriğine rağmen hızlı ilk yükleme (FCP): manual chunking, lazy loading, Brotli ve WebP.
04
TR / EN & PWA
Türkçe ve İngilizce dil desteği ile çevrimdışı çalışma modu.
Proje Özeti
Pixel Neon Resmi Portfolyosu
Lighthouse 95+Performans skoru
TR / EN · PWADil desteği & çevrimdışı mod
TeknolojilerReact 19 · Tailwind 4 · Three.js · Framer Motion · Vite
Zorluk
Ağır 3D ve video içeriklerine rağmen ilk yükleme hızını (FCP) maksimum seviyede tutmak.
Çözüm
Vite manual chunking, asenkron lazy loading, Brotli sıkıştırma ve WebP/video-hover entegrasyonu ile Lighthouse 95+ skoru sağlandı.
Nasıl Başardık?
Dört temel teknik, tek hedef: ilk yüklemede yalnızca gerekeni indirmek.
Vite Manual Chunking
Paketler mantıklı parçalara ayrılır; tarayıcı yalnızca ilgili sayfanın ihtiyaç duyduğu kodu indirir.
Asenkron Lazy Loading
3D sahne, özel imleç ve parçacık efekti gibi ağır bileşenler ayrı parçalar olarak, ihtiyaç anında yüklenir.
Brotli Sıkıştırma
Statik dosyalar Brotli ile sıkıştırılır; aktarılan veri azalır, sayfa daha hızlı açılır.
WebP & Video-Hover
Görseller WebP formatında sunulur; videolar yalnızca üzerine gelindiğinde oynatılır.
Tanıtım Filmi & Görselleri
Pixel Neon web sitesini 19 saniyede keşfedin ve sosyal medya için hazırlanmış tanıtım görsellerine göz atın.
Örnek: Vite & Lazy Loading JS
// vite.config.js (örnek)
build: {
rollupOptions: {
output: {
manualChunks: {
react: ['react', 'react-dom', 'react-router-dom'],
three: ['three'],
motion: ['framer-motion', 'gsap'],
},
},
},
}
// Ağır bileşenler asenkron yüklenir
const SceneBackground = lazy(() => import('./components/SceneBackground'));
const CustomCursor = lazy(() => import('./components/CustomCursor'));Sıkça Sorulan Sorular (FAQ)
• Bu proje nedir?
Pixel Neon Entertainment’ın resmi stüdyo portfolyosu: stüdyonun projelerini, blogunu ve yol haritasını tanıtan cyberpunk temalı bir web sitesi.
• Lighthouse 95+ neyi ifade ediyor?
Vite manual chunking, lazy loading, Brotli sıkıştırma ve WebP/video-hover entegrasyonu sonrasında sitenin Lighthouse skoru 95 ve üzerine çıkarıldı.
• Ağır 3D içerik ilk yüklemeyi yavaşlatmıyor mu?
Hayır. 3D sahne, özel imleç ve parçacık efekti gibi ağır bileşenler ana sayfa kodundan ayrı parçalar olarak, asenkron biçimde yüklenir.
• Mobil cihazlarda da aynı efektler çalışıyor mu?
Hayır. Özel imleç, parçacık efektleri ve kalıcı 3D arka plan yalnızca masaüstünde yüklenir; mobilde bu ağır parçalar çizilmez ve indirilmez.
• Site hangi dilleri destekliyor?
Türkçe ve İngilizce. Ayrıca çevrimdışı çalışma modu (PWA) sunar.