Portfolio : Verre

Portfolio minimaliste et glassmorphique construit avec Next.js 15 App Router, TypeScript, Tailwind CSS et MDX

DÉMO EN DIRECT (V1) • [GITHUB : Code privé]

Overview

• Rôle : Créateur solo, Designer UI/UX & Développeur Frontend
• Stack : Next.js 15 (App Router), React 18, TypeScript, Tailwind CSS 4, Framer Motion, Radix UI, MDX, next-intl
• Résultat clé : Score PageSpeed parfait de 100/100/100/100 & Optimisation SEO
• Résumé : Un portfolio de développeur généré statiquement démontrant une esthétique minimaliste haut de gamme, construit pendant une période de recherche de stages en ingénierie frontend (durant laquelle j'ai rejoint Trend Micro). Comprend des primitives d'interface utilisateur modulaires, un contenu localisé et des interfaces glassmorphiques entièrement réactives.

The Problem

• Défi : Le défi principal était de mettre en œuvre un langage visuel cohérent à partir de zéro en tant que développeur au début de son parcours de conception. S'agissant de ma deuxième conception de site de portfolio à partir de zéro, trouver le bon point de départ, créer des mises en page équilibrées et assurer une qualité esthétique élevée sans utiliser de modèles prédéfinis s'est avéré difficile.
• Public : Recruteurs techniques, responsables de l'ingénierie et équipes d'entreprises où je postulais pour des opportunités de stage à cette époque (comme Trend Micro).
• Contraintes : Obtenir une interface utilisateur glassmorphique dépolie cohérente sur plusieurs navigateurs mobiles et de bureau, tout en maintenant de petites tailles de paquets de clients initiaux, des pages réactives et en respectant les normes d'accessibilité.

Approach & Decisions

• Architecture : Next.js App Router pour les pages multi-langues. S'appuie sur React Server Components (RSC) pour restituer des pages de markdown statiques (MDX), combinés avec des Client Components uniquement là où des éléments interactifs (animations, dock, commandes) sont nécessaires.
• Décisions Clés :
  • Démarrage avec Tailwind CSS 4 : Exploitation des versions préliminaires de Tailwind 4 pour implémenter des variables CSS glassmorphiques fluides, des filtres de fond personnalisés et des dégradés de bordures.
  • Primitives d'interface utilisateur modulaires : Construction de blocs de mise en page réutilisables (ui/, motion-primitives/, dock/) pour composer facilement différentes vues sans accumuler de dette technique.
  • next-intl pour le support multilingue : Structuration de la base de code pour prendre en charge l'internationalisation en anglais et dans d'autres langues cibles de manière native.
• Compromis : Choix de la génération statique avec hydratation des composants côté client plutôt que le rendu serveur dynamique pour optimiser les temps de chargement, bien que cela limite les interactions avec une base de données dynamique en temps réel.
• Flux de données : Requêtes de pages directement associées à des compilations MDX statiques enveloppées dans des modèles de mise en page. États clients gérés via des hooks React pour les menus, les bascules de thème et les modales.

Key Results & Impact

• Résultat : Une interface glassmorphique soignée et moderne qui se charge incroyablement rapidement et se classe très bien sur les moteurs de recherche.
• Performance Lighthouse : Score parfait de 100 / 100 / 100 / 100 sur PageSpeed Insights pour mobile et ordinateur de bureau à travers les catégories Performance, Accessibilité, Bonnes Pratiques et SEO.
• Contexte : Construit pendant une période de recherche active de stages, aboutissant à l'obtention d'un rôle chez Trend Micro.
• Limites d'optimisation : Pendant ce projet V1, l'optimisation était strictement limitée à l'optimisation standard des moteurs de recherche (SEO). Il manquait complètement de paradigmes d'optimisation modernes tels que l'optimisation de l'IA (AIO), l'optimisation des moteurs de réponse (AEO) et l'optimisation des moteurs génératifs (GEO), qui ont été abordés ultérieurement dans la mise en page V2.
• Comparaison : C'était la mise en page V1. Bien qu'elle soit très performante, elle manquait d'interactivité de terminal personnalisée, de physique 3D Canvas et d'un chatbot IA activé par la voix présents dans la mise en page V2 (Portfolio : Cyberpunk).
• Impact : Capacité prouvée à exécuter des conceptions d'interface utilisateur de haute fidélité et à créer des bases de code React optimisées pour la recherche.

Technical Deep Dive

• Détails notables : Navigation interactive par dock animé, effets de verre dépoli personnalisés utilisant des utilitaires d'arrière-plan, menu de recherche de commandes CMD+K.
• Vérification : Construit et testé localement à l'aide de next build et d'analyses de performance d'exécution avec Lighthouse, Vercel Analytics et de vérifications manuelles de la mise en page sur Safari, Chrome et Firefox.
• Optimisations : Génération de pages statiques (SSG) pour toutes les pages MDX, chargement différé des composants clients interactifs lourds et optimisation des images à l'aide des configurations d'images Next.js standard.
• Qualité du code : Règles strictes de vérification TypeScript, de formatage et de linting appliquées.
• Liens : Consultez les structures de dossiers package.json et components/.

Reflections

• Différemment : J'aurais établi un système de conception ou des directives visuelles dans Figma au préalable. La conception directe dans le code pour ma deuxième fois a créé plusieurs cycles d'itération de mise en page avant d'atteindre l'esthétique glassmorphique cohérente finale.
• Succès : Score PageSpeed impeccable de 100/100 et livraison d'une esthétique élégante et épurée de verre dépoli.
• Leçons : Un design minimaliste semble simple mais nécessite un espacement précis, une hiérarchie typographique et des marges internes pour paraître professionnel. La mise en œuvre de surfaces glassmorphiques nécessite également des solutions de repli (fallbacks) de backdrop-filter minutieuses pour la compatibilité avec les différents navigateurs.

My Contributions

• Propriété complète : Conception, architecture et implémentation de 100 % du projet à partir de zéro, y compris la conception de l'interface utilisateur, les systèmes de mise en page, la structure des composants, les animations et les configurations de localisation.

Project Architecture

Cette application utilise un modèle Next.js App Router structuré configuré pour la génération statique côté client.

• Structure en couches : Les configurations globales et les wrappers de mise en page de base gèrent les fournisseurs de thèmes et les styles de base, tandis que les chargeurs MDX analysent les fichiers markdown bruts.
• Modules de fonctionnalités :
  • components/ui/ - Modules de mise en page et composants visuels de base.
  • components/motion-primitives/ - Wrappers animés pour des transitions fluides.
  • components/dock/ - Utilitaire de navigation flottant personnalisable.
• Gestion de l'état : Maintient l'état côté client localisé dans des wrappers individuels (par exemple, indices d'éléments actifs, visibilité des superpositions).

Cartographie des routes et des ressources

Contrairement à l'architecture V2 (Cyberpunk), la V1 est une version légère côté client uniquement :

• Ce qu'elle contient :
  • Racines statiques & Ancres : Structure monopage utilisant le routage par fragments (#home, #about, #featured-projects, #experience-education-certificates, #blog, #connect).
  • Métadonnées & Découverte : Fichiers manifestes localisés (/site.webmanifest, /browserconfig.xml).
  • Packs d'hydratation hydratés : Fragments Next statiques pour la mise en page, les éléments de page et les états de chargement différés.
• Ce qui lui manque :
  • Pas d'API Backend : Manque de points de terminaison de flux (stream), de routes musicales ou de gestionnaires de chatbot (/api/chat, /api/music).
  • Pas d'intégration IA / Agent : Manque complètement de points de terminaison Model Context Protocol (MCP) (/api/mcp) et de schémas de texte de découverte LLM (/llms.txt, /llms-full.txt).

Demo Preview

• Page d'accueil glassmorphique : Panneaux dépolis, arrière-plans colorés subtils et alignement typographique précis.
• Navigation Dock Animée : Expansion fluide des icônes du dock basée sur le suivi de la souris et ciblage des sections.
• Menu de commandes (CMD+K) : Menu de superposition instantané pour une navigation directe dans la page et des raccourcis.
• Lien de démo en direct : Le projet en direct peut être consulté sur franzdomingov1.vercel.app.

Note d'hébergement :
Le Portfolio en Verre V1 est déployé sur Vercel et accessible via les liens de démonstration en direct ci-dessus. Notez que le portfolio principal a depuis été mis à niveau vers la mise en page Cyberpunk (V2).