Portfolio : Le Commencement

Ma preuve de concept v0 où j'ai abordé pour la première fois Three.js, Vercel et les fonctionnalités web avancées.

LIEN DE DÉMO

Aperçu

• Rôle : Développeur (Premier Essai)
• Technologies : React, Three.js, Framer Motion, Vercel
• Résultat Clé : J'ai réussi à surmonter la confusion liée à l'apprentissage du développement web 3D et du déploiement pour la toute première fois.
• Résumé : C'était mon portfolio "v0". C'était ma toute première expérience avec Three.js, Vercel et des animations d'interface utilisateur lourdes. Bien qu'il comprenne des fonctionnalités ambitieuses telles qu'un chatbot intégré et une carte de destination 3D, l'UI/UX était certes chaotique. Il sert fièrement de preuve brute et non filtrée de ma première tentative.

Le Problème

• Défi : Essayer d'apprendre et de mettre en œuvre des technologies web modernes et complexes (rendu 3D, déploiements, widgets interactifs) toutes en même temps à partir de zéro.
• Public : Moi-même. Il n'a jamais été conçu pour être une pièce polie pour se vanter, mais plutôt un bac à sable personnel.
• Contraintes : Une courbe d'apprentissage massive, entraînant de graves goulots d'étranglement des performances et un manque de conception cohérente.

Approche et Décisions

• Architecture : Une configuration modulaire React fortement dépendante des primitives Framer Motion non optimisées et du CSS atomique.
• Décisions Clés : J'ai décidé de jeter toutes les fonctionnalités sympas que je pouvais trouver dans un seul projet juste pour voir comment elles fonctionnaient.
• Compromis : J'ai complètement sacrifié la simplicité, les performances et l'expérience utilisateur au nom de l'expérimentation technique brute.
• Flux de Données : Géré via le contexte React standard, bien que fortement ralenti par le chevauchement des états d'animation.

Résultats Clés et Impact

• Résultat : Un bac à sable fonctionnellement imparfait mais hautement éducatif qui a ouvert la voie à mon travail actuel.
• Impact : Cela m'a appris exactement ce qu'il ne faut pas faire en matière de performances web.

Plongée Technique

• Détails Notables : J'ai tenté des systèmes modaux avancés avec des transitions de morphing, des horloges en direct et des curseurs personnalisés, tous exécutés simultanément.
• Vérification : Les tests ont été effectués uniquement via des vérifications visuelles manuelles et brutes.
• Optimisations : Pratiquement inexistantes. Les performances étaient des montagnes russes constantes.
• Qualité du Code : Ce n'est certes pas mon meilleur travail. C'était un environnement chaotique destiné uniquement à l'apprentissage.

Réflexions

• Autrement : J'ai appris que l'assemblage aveugle d'animations lourdes détruit les performances. Ma prochaine itération se concentre strictement sur les performances et une UX propre.
• Succès : Il s'agit de la "preuve de mon premier essai".
• Leçons : Les performances et une UX propre ont infiniment plus de valeur que d'empiler des fonctionnalités 3D flashy mais non optimisées.

Mes Contributions

• Conception et Ingénierie : Conception et mise en œuvre de tous les effets 3D et fonctionnalités interactives par essais et erreurs.
• Animation et Interactivité : Création de primitives Framer Motion personnalisées.
• Couche de Contenu : Intégration de MDX.
• Documentation Technique : Archivage du projet pour documenter mes défis initiaux.

Architecture du Projet

Ce projet utilisait un système de composants React modulaire mais fortement surchargé.

• Organisation des Composants :
  • ui/, core/, motion-primitives/ : Composants atomiques réutilisables
  • Contenu MDX pour le blog et les projets
• Gestion de l'État : Gestion des thèmes basée sur le contexte.
• Intégrations : Framer Motion, Radix UI, Tailwind CSS, cmdk.

Aperçu de la Démo

Cette page documente la version v0 originale. Pour la démo archivée en direct, visitez archivedportfolio.franzdomingo.dev.

• Vues de la Plateforme : Web (réactif)
• Fonctionnalité Montrée :
  • Carte d'atterrissage 3D non optimisée et interface utilisateur interactive
  • Chatbot intégré

Note sur l'Hébergement :
Archivé en tant que projet de vitrine. Le portfolio beaucoup plus propre et mis à jour est maintenant en direct sur portfolio.franzdomingo.dev.