Site Web de Portfolio 3D

Portfolio Original / Web Interactif 3D / Présentation Archivée

Résumé en une ligne : Un site web de portfolio personnel entièrement responsive doté d'une carte d'accueil 3D à fort impact, d'effets d'interface avancés et d'éléments interactifs. Construit de zéro avec des technologies web modernes pour démontrer mes capacités techniques et de design.

Durée du développement : Juin 2025

Note(s) :

• Clause de non-responsabilité sur l'hébergement/le code : Archivé comme projet de présentation. Code source disponible sur demande. Le portfolio mis à jour et optimisé est maintenant en ligne sur archivedportfolio.franzdomingo.tech.
• Contact pour plus d'infos ou démos : Contactez Franz Phillip G. Domingo via franzdomingo.tech.
• Note sur la navigation : Cette page documente la version originale ; le portfolio actuel est disponible via le lien ci-dessus.

---

Fonctionnalités

• Carte d'accueil 3D avec rotation en temps réel et glassmorphism
• Contenu de blog et de projet piloté par MDX
• Mise en page responsive, mobile-first
• Commutateur de thème avec persistance
• Système modal avancé avec transitions de morphing
• Animations et transitions de page pilotées par Framer Motion
• Palette de commandes (CMD+K) pour la navigation
• Interface de Dock déplaçable avec persistance localStorage
• Boutons magnétiques avec effets animés
• Horloge en direct et chatbot IA intégré
• Glassmorphism, accents néon, arrière-plans animés
• Système de curseur personnalisé
• PWA activée, SEO optimisé, priorité à l'accessibilité
• Error boundaries personnalisés

---

Mes Contributions (Rôle et Responsabilités)

Design et Ingénierie :

• Conception et mise en œuvre de toute l'interface UI/UX, des effets 3D et des fonctionnalités interactives.

Animation et Interactivité :

• Construction de primitives Framer Motion personnalisées, de boutons magnétiques, d'un dock déplaçable et d'une palette de commandes.

Performance et Accessibilité :

• Ajustement des animations, optimisation pour le SEO et garantie de l'accessibilité sur tous les appareils.

Couche de Contenu :

• Intégration de MDX pour une création flexible de blogs et de projets.

Documentation Technique :

• Documentation de l'architecture, des défis et des points forts techniques pour référence future.

---

Défis Rencontrés

• Intégration MDX + App Router : Configuration manuelle du chargeur de contenu, du routage dynamique et de l'hydratation dans Next.js 15.

• Optimisation des performances Framer Motion : Équilibre entre la fluidité de l'animation et les limites GPU/CPU des appareils.

• Bugs de rendu iOS/Safari : Solutions de contournement conditionnelles pour les artefacts de texture GPU dans Safari.

• Cohérence de la mise en page multi-navigateur : Garantie que les effets avancés s'affichent de manière cohérente partout.

• Compromis de performance : Les animations lourdes ont entraîné une utilisation élevée des ressources, incitant à une refonte vers la simplicité et l'accessibilité.

---

Architecture du Projet

• Style d'Architecture : Système de composants React modulaire, CSS atomique, couche de contenu MDX.

• Organisation des Composants :

  • ui/, core/, motion-primitives/ : Composants atomiques réutilisables
  • Contenu MDX pour le blog et les projets
  • Routage clair sous app/projects/, app/blog/, routes dynamiques [slug]

• Gestion d'État : Gestion du thème basée sur le contexte, localStorage pour l'état du dock/curseur

• Intégrations : Framer Motion, Radix UI, Tailwind CSS, cmdk, embla-carousel, lucide-react

---

Aperçu de la Démo

• Captures d'écran/Vidéo : Cette page documente la version originale. Pour une démo en direct, visitez archivedportfolio.franzdomingo.tech. Le portfolio actuel est également disponible sur archivedportfolio.franzdomingo.tech.

• Vues Plateforme : Web (responsive, mobile-first)

• Fonctionnalités Présentées :

  • Carte d'accueil 3D et interface interactive
  • Transitions animées, modaux et arrière-plans
  • Palette de commandes, dock, boutons magnétiques
  • Contenu piloté par MDX, horloge en direct, chatbot intégré

• Instructions Démo : Visitez archivedportfolio.franzdomingo.tech pour voir la démo archivée. Pour le dernier portfolio, voir portfolio.franzdomingo.tech.

---

Ressources de Développement (Optionnel)

• Guides/Docs :
  • Documentation Framer Motion, Tailwind CSS, Radix UI, MDX

---

Si vous avez besoin de plus de détails ou souhaitez voir la base de code, veuillez contacter directement l'auteur.

---