Alivia Gordis: Portofoliu Premium de Fotografie
Un portofoliu minimalist și de impact vizual, conceput pentru fotografi de top, ce îmbină animații elegante cu performanță frontend de nivel înalt.
Migrare de Framework și Plus de Performanță
Am refăcut aplicația dintr-un React SPA standard într-un proiect bazat pe Next.js App Router. Această schimbare a adus pre-rendare fluidă, o indexare SEO superioară și optimizarea indicatorilor Core Web Vitals prin componentele native Image.
Cursor Interactiv Global
Am dezvoltat un strat centralizat de interacțiune prin React Context pentru gestionarea unui cursor personalizat. Sistemul urmărește coordonatele mouse-ului, declanșează variante fluide de Framer Motion și aplică efectul de contrast 'mix-blend-mode' peste text.
Lightbox Optimizat pentru Media și Imagini
Am integrat un modul premium de vizualizare bazat pe 'yet-another-react-lightbox'. Am conceput o structură personalizată de randare care livrează imagini clare, accelerate hardware, fără a încărca thread-ul principal.
Sursă de Afișare Adaptivă și Fluidă
Am integrat Swiper.js pentru a crea caruseluri tactile optimizate multi-dispozitiv. Am folosit breakpoints adaptive și o fizică fluidă a mișcării pentru a prezenta fotografii de înaltă rezoluție fără a bloca interfața.
Acest proiect a început ca o explorare profundă în stăpânirea animațiilor avansate de UI folosind Framer Motion într-o aplicație React standard. Pentru a ridica proiectul la un alt nivel, am migrat întreaga bază de cod pe framework-ul Next.js App Router. Această tranziție a fost o experiență excelentă de învățare, arătându-mi cum să combin animațiile complexe cu performanța web strictă. Trecerea la Next.js mi-a permis să adaug optimizare nativă pentru imagini, un sistem de rute mai curat și o gestionare mult mai eficientă a fișierelor, păstrând în același timp animațiile fluide și interactive.
Provocarea și soluția
Principala provocare a fost afișarea fotografiilor de înaltă rezoluție fără timpi mari de încărcare sau deplasări de layout (layout shifts). Am rezolvat această problemă prin integrarea optimizării native Next.js Image direct în structura lightbox-ului. Această abordare a redus dimensiunea imaginilor cu peste 40%, asigurând încărcarea instantanee și redarea perfectă a portofoliilor pe orice dispozitiv.