Portfolio : Cyberpunk

Portfolio de développeur interactif avec une esthétique glitch numérique et terminal FUI (Futuristic User Interface), construit avec Next.js 16, React 19 et une physique personnalisée GSAP/Canvas

DÉMO EN DIRECT • DÉPÔT GITHUB (Accès Privé)

Aperçu

• Rôle : Créateur, Développeur Full-Stack Solo & Ingénieur Créatif
• Stack : Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, GSAP, WebGL (Three.js), Web Audio API (Text-to-Speech), SDK Google Generative AI, next-intl (traduction complète du contenu en anglais, tagalog, allemand, espagnol, français, arabe, coréen, japonais et chinois)
• Résultat Clé : Couverture de portfolio 100 % interactive avec navigation chatbot dynamique pilotée par la voix et temps de chargement inférieurs à la seconde
• Résumé : Un portfolio numérique haut de gamme et une vitrine d'ingénierie créative conçue avec une esthétique glitch numérique. Il propose une conversation vocale interactive avec l'IA, des transitions physiques d'ondes basées sur canvas et des expériences de défilement fluides pour démontrer un design de haut niveau et une maîtrise du frontend.

Le Problème

• Défi : Les portfolios standard sont statiques, ennuyeux et ne parviennent pas à démontrer de réelles capacités d'intégration full-stack et d'IA. L'objectif était de créer un site web personnel inmersif et hautement interactif servant de preuve de concept vivante pour des animations, des mises en page, une gestion d'état complexes et des outils d'IA en temps réel, sans compromettre les performances ni l'accessibilité.
• Public : Recruteurs, directeurs techniques, clients potentiels et développeurs à la recherche de profondeur technique, d'un goût pour le design premium et d'une architecture logicielle robuste.
• Contraintes : Maintenir des animations fluides à 60 images par seconde et des performances élevées (temps de chargement inférieurs à la seconde) sur les appareils mobiles tout en exécutant des simulations canvas web, un visualiseur de modèles 3D et un chatbot IA personnalisé avec streaming en temps réel.

Approche et Décisions

• Architecture : Next.js App Router pour les routes internationalisées rendues sur l'Edge, associé à un contexte React global pour les états du thème, de la musique et du chatbot.
• Décisions Clés :
  • Architecture Multilingue : Construction d'un framework i18n robuste à l'aide de next-intl pour localiser le routage, les métadonnées de page, les invites de chat et les structures de documents de projet (avec des pages localisées complètes en 9 langues).
  • Transitions basées sur Canvas : Intégration d'une distorsion d'onde de bruit Perlin personnalisée au lieu de simples transitions CSS pour créer un effet d'onde numérique tactile lors des transitions de page.
  • Synthèse Vocale & Chatbot IA : Configuration du SDK Google Generative AI avec des files d'attente de synthèse vocale personnalisées, utilisant le routage Edge pour diffuser rapidement les réponses.
  • Superposition des Z-Index : Établissement d'un contexte d'empilement z-index strict à 15 niveaux pour éviter les conflits de mise en page et d'interaction entre les superpositions, les curseurs personnalisés et les scènes 3D.
• Compromis : Décision d'utiliser des superpositions CSS et des effets de canvas 2D légers au lieu de ressources 3D lourdes afin de maintenir le bundle de page initial au minimum et d'assurer des vitesses de chargement inférieures à 100 ms.
• Flux de Données : Entrée utilisateur -> Gestionnaire de route Next.js -> Google Generative AI -> Flux de texte -> File d'attente de synthèse vocale -> Lecteur audio Web personnalisé.

Résultats Clés et Impact

• Résultat : Animations fluides à 60 images par seconde sur tous les appareils, temps d'obtention du premier octet (TTFB) inférieur à 100 ms et assistant vocal bilingue entièrement interactif.
• Performance Lighthouse : Score parfait de 100/100/100/100 sur Lighthouse dans toutes les catégories clés (Performance, Accessibilité, Bonnes Pratiques et SEO).
• Conformité de la Sécurité : Score parfait de 100/100 lors des audits de vérification de la sécurité via l'évaluation isagentready de Cloudflare.
• Comparaison : Passage du premier portfolio sous-optimal du créateur, Portfolio : Glass, à un terminal interactif personnalisé, entraînant un engagement utilisateur plus long et des demandes techniques directes.
• Impact : Capacité démontrée à concevoir des interfaces utilisateur modernes et complexes et des architectures full-stack de niveau production.

Zoom Technique

• Détails Notables : Filtre de ligne de balayage CRT personnalisé, suivi de curseur personnalisé réactif, visualiseur audio dynamique et routage next-intl multilingue personnalisé.
• Vérification : Vérifié par des audits Lighthouse, des contrôles d'accessibilité (rapports de contraste >= 4.5:1) et une émulation mobile sur des appareils bas de gamme.
• Optimisations : Configuration des modèles distants d'images Next.js, chargement différé des ressources de canvas Three.js et styles Tailwind rationalisés pour minimiser le CSS inutilisé.
• Qualité du Code : Configuration ESLint stricte, typage TypeScript et composants modulaires autonomes.
• Liens : Reportez-vous à package.json, next.config.ts et app/data.ts.

Réflexions

• À faire différemment : Optimiser davantage les modèles 3D ou implémenter des shaders personnalisés pour les ondes d'arrière-plan afin de réduire la charge CPU sur les appareils mobiles.
• Succès : Proposition d'une esthétique de conception unifiée où la bande sonore, les graphiques et les interactions du chatbot fonctionnent ensemble de manière transparente.
• Leçons : La gestion d'animations complexes en parallèle avec des API d'IA en streaming nécessite une isolation minutieuse de l'état asynchrone dans React.

Mes Contributions

• Architecture Frontend : Conception et implémentation de la coque de l'interface utilisateur principale, y compris les curseurs personnalisés, les HUD, les grilles bento et le fournisseur de musique.
• Intégration du Chatbot IA : Programmation du chatbot vocal avec synthèse vocale, instructions système et contexte sensible à la langue locale.
• Ajustement des Animations : Orchestration des lignes de temps GSAP ScrollTrigger et synchronisation avec les transitions de distorsion d'onde du canvas.

Architecture du Projet

Cette application suit un modèle modularisé basé sur les fonctionnalités de Next.js App Router avec des dossiers de routes localisés.

• Structure en Couches : Les composants serveur gèrent les paramètres de localisation et le routage structurel, tandis que les composants client affichent des widgets interactifs.
• Modules de Fonctionnalités :
  • components/sections/ : Sections de mise en page (Hero, About, Projects, Skills, Contact).
  • components/ui/ : Nœuds d'interface utilisateur interactifs (ASCIIText, CustomCursor, MusicPlayer, VerticalHUD).
• Gestion de l'État : L'API React Context contrôle l'état global de la lecture audio, la sélection des thèmes et les états de langue.
• Refactoring & Améliorations : Mise à niveau de la configuration vers Next.js 16 avec Turbopack pour un remplacement à chaud des modules (HMR) presque instantané pendant le développement.

Structure des Routes Compilées (App Router)

L'application se compile dans la structure de routes statiques (○) et dynamiques (ƒ) suivante (à l'exclusion des chemins de projets de portfolio individuels) :

• Infrastructure PWA & SEO (○ Statique) :
  • /_not-found — Gestionnaire 404 global statique.
  • /manifest.webmanifest — Manifeste d'application Web.
  • /robots.txt & /sitemap.xml — Répertoires des robots d'indexation.
• Routage Bilingue (ƒ Dynamique) :
  • /[locale] & /[locale]/[...rest] — Wrapper de mise en page sensible à la langue utilisant next-intl.
• Model Context Protocol (MCP) & Agents IA (ƒ Dynamique) :
  • /.well-known/mcp.json & /openapi.json — Schémas des capacités serveur lisibles par machine.
  • /.well-known/agent-skills/ — Répertoires de compétences (ex. SKILL.md) pour l'intégration de l'IA.
  • /api/mcp & /api/mcp/sse — Points de terminaison de communication SSE (Server-Sent Events) pour les clients agents.
• Chatbot IA Générative & Système de Médias (ƒ Dynamique) :
  • /api/chat & /api/chat/health — Gestionnaires de routes de flux prenant en charge le processeur vocal du chatbot IA.
  • /api/music & /api/music/health — Routage du contrôleur de flux audio.
• Exportateurs de Contexte pour LLM (ƒ Dynamique) :
  • /llms.txt & /llms-full.txt — Exportations de texte économes en jetons des faits, du contexte et des références du portfolio, optimisées pour la lecture par les LLM.

Aperçu de la Démo

• Page d'Accueil Glitch Numérique : Vue d'accueil immersive présentant une typographie conforme aux normes, des superpositions de balayage CRT et des affichages de statut en temps réel.
• Chatbot IA Interactif : Bot conversationnel situé en bas à droite qui met à jour dynamiquement l'état de la mise en page et joue des retours vocaux.
• Mises en Page Bento Grid : Mises en page de tableau de bord propres et à haute densité affichant les compétences, les chronologies et les certifications.

Note d'Hébergement :
Le projet est en ligne et hébergé sur Vercel à l'adresse franzdomingo.dev. Notez que ce codebase est lui-même le projet de portfolio ; vous visualisez et exécutez actuellement ce projet précis.