Portfolio: Eldora Animé

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

LIEN DE DÉMO

Aperçu

• Rôle : Développement Full-Stack et Design UI/UX
• Technologies : Next.js 14, React Three Fiber, Eldora UI, GSAP, Tailwind CSS
• Résultat Clé : Livraison réussie d'un portfolio 3D hautement immersif et interactif
• Résumé : 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.

Le Problème

• Défi : Le défi consistait à manipuler le DOM et à intégrer des éléments 3D de manière transparente, en particulier par rapport au précédent portfolio "glass" v1 qui avait un concept plus établi.
• Public cible : Construit pour Prince Jeruh Reyes afin de soutenir son prochain stage et sa recherche d'emploi en tant qu'étudiant.
• Contraintes : Il n'y avait pas de délai strict, juste un processus itératif d'ajouts et d'affinage des informations.

Approche & Décisions

• Architecture : Architecture Next.js 14 simple, axée sur le client.
• Décisions Clés : J'ai choisi React Three Fiber et GSAP principalement par désir de les essayer et d'apprendre leurs capacités dans un scénario réel.
• Compromis : Compromis minimisés ; le résultat final est un site Web visuellement impressionnant et très fonctionnel dans l'ensemble.
• Flux de Données : Flux de données purement statique / côté client sans backend complexe.

Résultats Clés & Impact

• Résultat : Le client a été très satisfait, déclarant que "ça a l'air super".
• Impact : Fournit une présence en ligne professionnelle et remarquable pour l'aider dans sa recherche de stage et d'emploi en 2026.

Plongée Technique

• Détails Notables : Intégration d'un curseur personnalisé blobity et application de composants animés open-source d'Eldora UI.
• Vérification : Maintien d'une base de code simple où le contenu du site Web peut être facilement modifié dans un seul fichier.
• Optimisations : J'ai mis en œuvre de nombreuses optimisations en cours de route pour équilibrer la richesse visuelle avec des performances fluides sur tous les appareils.
• Qualité du Code : Conception de toutes les sections (Accueil, À propos, Travail, Outils, Contact) avec un thème sombre et une mise en page entièrement réactive.

Réflexions

• Succès : J'ai réussi à combiner efficacement React Three Fiber avec Next.js, obtenant un résultat visuel raffiné et de haute qualité sans compromis majeurs.
• Leçons : Le processus itératif a renforcé la valeur d'une structure de projet flexible et facile à éditer.

Mes Contributions

• Personnalisation du Modèle : Utilisation d'un modèle prédéfini comme base pour le portfolio et personnalisation de l'interface utilisateur et de la mise en page pour répondre aux besoins spécifiques de Prince Jeruh Reyes.
• Intégration du Contenu : Remplacement du contenu fictif par des données de projet réelles, en ajustant la configuration et les détails pour refléter précisément le travail du client dans toutes les sections.
• Ajustements Techniques : Gestion des manipulations du DOM et modification des éléments 3D existants (React Three Fiber) et des animations de défilement (GSAP) pour s'aligner parfaitement avec le nouveau flux de contenu.

Architecture du Projet

Le projet suit une architecture côté client simple et directe.

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

Aperçu Démo

• Site en Direct : pjreyes.vercel.app
• Sections Montrées : Préchargeur, Accueil, À propos, Travail, Outils, Contact, Pied de page
• Fonctionnalités Principales : 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, et un formulaire de contact sur une mise en page réactive à thème sombre.

Note d'Hébergement :
Le projet est actuellement déployé et en direct sur Vercel au lien de démo fourni.

Attribution :
Ce projet a été construit à l'aide du Modèle de Portfolio Eldora UI. Tout le crédit pour la conception originale du modèle, les composants et les configurations de base revient à Eldora UI.