Bunu Neden İnşa Ettim?
"Premium hizmet veren sanat stüdyolarının, standart CMS şablonlarından ziyade marka kimliğini yansıtan, akıcı ve yüksek performanslı dijital vitrinlere ihtiyacı vardır. InkStudio projesini; kullanıcı etkileşimlerinin sıfır gecikmeyle (zero-latency) gerçekleştiği, yüksek çözünürlüklü görsellerin render performansını etkilemeden sunulduğu lüks bir UI/UX deneyimi olarak sıfırdan inşa ettim."
Mimari & Kararlar
Uygulama Next.js App Router mimarisi üzerine kuruludur. İstemci tarafı filtreleme state'leri (activeCategory, activeArtist), kalıcılık ve derin bağlantı (deep-linking) desteği sağlamak amacıyla doğrudan URL parametrelerine (`useSearchParams`) bağlanmıştır. Ağır görsel filtreleme algoritmaları ve matematiksel hesaplamalar `useMemo` ile izole edilmiştir. Animasyon katmanında, `framer-motion` kullanılarak donanım ivmeli (GPU-accelerated) sayfa geçişleri, `AnimatePresence` ile unmount animasyonları ve kademeli (staggered) render dizilimleri yönetilir.
Temel Özellikler
- 01.`framer-motion` ile orkestre edilmiş karmaşık mikro etkileşimler ve kademeli (staggered) layout animasyonları
- 02.`useSearchParams` ile URL bazlı, paylaşılabilir ve asenkron portfolyo filtreleme motoru
- 03.Behold API üzerinden entegre edilen, asenkron yüklenen gerçek zamanlı (live) Instagram akışı
- 04.Yüksek çözünürlüklü (high-res) medya tüketimi için özel optimize edilmiş Lightbox/Carousel modülü
- 05.Tailwind CSS değişkenleriyle (CSS variables) kurgulanmış global ve merkezi 'Elegant' tema motoru
Bu proje, modern frontend geliştirmede estetik ile mühendisliğin kesişimini temsil eder. Framer Motion entegrasyonu, ağır CSS DOM manipülasyonlarına kıyasla transform ve opacity değerlerini doğrudan GPU'ya devrederek mobil cihazlarda bile 60 FPS akıcılık sağlar. UI bileşenlerindeki karmaşık filtreleme mantığının yerel state yerine URL üzerinden senkronize edilmesi, kullanıcıların spesifik sanatçı/tarz kombinasyonlarını doğrudan bağlantı (link) olarak kopyalayıp paylaşabilmesine olanak tanıyan kritik bir mimari karardır.