// Portfolio Animé Eldora

Portfolio Animé Eldora

Portfolio 3D / Next.js / React Three Fiber / Eldora UI

Résumé en une phrase : Un site web de portfolio 3D animé conçu pour Prince Jeruh Reyes en utilisant Next.js 14, React Three Fiber, les composants Eldora UI et GSAP -- comprenant des scènes 3D immersives, des effets de curseur blobity et des transitions de page fluides.

Site en direct : pjreyes.vercel.app

Caractéristiques

• Scènes interactives 3D avec React Three Fiber, Drei et physique Rapier
• Curseur personnalisé Blobity pour une navigation immersive
• Animation de préchargement à l'entrée de la page
• Sections animées : Accueil, À propos, Travail, Outils, Contact
• Animations déclenchées par le défilement (scroll) via GSAP
• Framer Motion pour les transitions de l'interface utilisateur
• Thème sombre avec un style personnalisé
• Conception entièrement réactive (responsive)

Mes Contributions (Rôle et Responsabilités)

Développement Full-Stack :

• Construction de l'intégralité du site de portfolio à partir de zéro en utilisant Next.js 14
• Intégration de React Three Fiber pour les scènes 3D et les éléments interactifs
• Mise en œuvre du système de curseur personnalisé blobity
• Création d'une animation de préchargement pour une expérience d'entrée fluide

Design UI/UX :

• Conception de toutes les sections : Accueil, À propos, Travail, Outils, Contact, Pied de page
• Application des composants animés open-source d'Eldora UI
• Mise en œuvre d'animations déclenchées par le défilement GSAP pour les révélations de sections

Animations :

• Rendu d'objets 3D avec Three.js/Drei
• Animations de chronologie GSAP pour les révélations basées sur le défilement
• Framer Motion pour les transitions au niveau des composants
• Kinet et Leva pour le peaufinage des paramètres d'animation

Défis Rencontrés

• Performance 3D : Équilibrer la richesse visuelle et la fluidité des performances sur tous les appareils a nécessité l'optimisation des scènes Three.js
• Intégration du curseur personnalisé : Faire fonctionner le curseur blobity de manière transparente avec les éléments du canevas 3D
• Coordination des animations : Synchronisation des animations de défilement GSAP avec les transitions de composants Framer Motion sans conflits
• 3D Réactive : Garantir que les scènes 3D s'affichent bien et soient performantes sur les appareils mobiles

Architecture du Projet

• Framework : Next.js 14 App Router
• Moteur 3D : React Three Fiber, Drei, Rapier
• Animation : GSAP, Framer Motion, Kinet
• UI : Tailwind CSS, Icônes FontAwesome, React Icons
• Curseur : Curseur personnalisé Blobity
• Outils : Leva (panneau de débogage), Meshline (lignes 3D)
• Déploiement : Vercel

Aperçu de la Démo

• Site en direct : pjreyes.vercel.app
• Vues plateforme : Web (réactif)
• Sections : Préchargeur, Accueil, À propos, Travail, Outils, Contact, Pied de page
• Fonctionnalités présentées :
  • Accueil interactif 3D avec Three.js
  • Animations fluides déclenchées par le défilement
  • Curseur personnalisé avec effet blobity
  • Vitrine de projets avec la section Travail
  • Formulaire de contact
  • Mise en page réactive sur thème sombre

Ressources de Développement

• Guides/Docs :
  • Documentation Next.js, React Three Fiber, GSAP, Framer Motion
  • Bibliothèque de composants Eldora UI (eldoraui.site)

Si vous avez besoin de plus de détails, veuillez contacter l'auteur directement.