Portfolio : Cyberpunk

Un portfolio interactif doté d'une identité glitch numérique, construit avec Next.js 16, React 19, TypeScript, Tailwind CSS 4 et MDX.

DÉMO EN DIRECT · DÉPÔT PRIVÉ

Aperçu

• Rôle : Créateur, développeur full-stack et ingénieur créatif.
• Objectif : Présenter les réalisations, l'expérience et le jugement technique dans une expérience éditoriale interactive.
• Public : Recruteurs, responsables d'ingénierie, clients et développeurs.
• Stack : Next.js 16 App Router, React 19, TypeScript, Tailwind CSS 4, MDX, next-intl, Framer Motion, vagues Canvas personnalisées avec distorsion de style Perlin, Three.js, React Three Fiber, intégration IA neutre vis-à-vis du fournisseur, MCP/OAuth, Node.js 24 LTS et Vercel.
• Contenu : Données statiques et documents MDX localisés dans neuf langues.
• Déploiement : Vercel avec Fluid compute.
• Résultat clé : Un produit public qui démontre une architecture créative, maintenable et localisée.
• Résumé : L'identité glitch, la lecture éditoriale et les intégrations contrôlées forment une expérience cohérente.

Le Problème

• Défi : Montrer personnalité et profondeur technique sans masquer l'information importante.
• Public : Recruteurs, responsables d'ingénierie, clients et développeurs qui évaluent autant le design que l'architecture.
• Contraintes : Les petits écrans, le clavier, reduced motion, neuf langues et les frontières sûres des intégrations devaient coexister.
• Un portfolio doit transmettre une personnalité et une profondeur technique sans masquer l'information essentielle.
• Le site devait offrir une navigation expressive tout en restant lisible sur petit écran.
• Les projets devaient pouvoir développer leur récit sans transformer chaque page en code d'interface.
• Les fonctions d'IA et les intégrations externes devaient rester séparées de la couche de présentation.
• L'internationalisation devait préserver des routes, métadonnées et parcours cohérents pour chaque langue.
• Le dépôt étant privé, l'architecture doit être expliquée sans publier le code source.

Approche

• Architecture : Next.js App Router organise les documents localisés rendus côté serveur et les route handlers, tandis que les shells interactifs restent côté client.
• Décisions clés :
  • Contenu et routage en neuf langues : next-intl gère routes et messages, chaque projet possédant un MDX localisé avec fallback anglais documenté.
  • Interaction Canvas et 3D : Des vagues Canvas personnalisées avec distorsion de style Perlin, Framer Motion et un hero Three.js/React Three Fiber focalisé apportent un mouvement expressif sans faire de tout le produit une scène 3D.
  • FUI et terminal de diagnostic : Texture CRT, scanlines, typographie glitch et lectures d'état composent une identité futuriste tout en gardant une hiérarchie lisible.
  • Voix et doublage optionnels : La voix locale, la fenêtre de doublage et leur séquençage suivent les réglages de l'utilisateur et la compatibilité du navigateur.
  • Coordination des superpositions : Écran de démarrage, navigation, curseur, scanlines, chat, fenêtre de doublage et hero 3D suivent un stacking délibéré, sans nombre fixe de couches.
  • Conception de l'assistant Oz : /api/chat utilise un routage neutre entre service principal et service de secours, des données statiques du portfolio, du contexte MDX approfondi et des outils UI explicites.
  • Limites client, serveur et état : Les providers séparent thème, internationalisation et musique; les préférences de chat restent locales et le store de filtre est volontairement étroit.
  • MCP et OAuth : OAuth 2.1, PKCE S256 et le scope portfolio.read protègent les outils en lecture seule.
• Compromis : Canvas intentionnel et 3D optionnelle sont préférés à une expérience entièrement 3D, et la voix du navigateur est un retour facultatif.
• Flux de données : L'entrée visiteur atteint /api/chat, reçoit les données statiques du portfolio et le contexte MDX approfondi, puis une réponse en streaming ou une action UI; un navigateur compatible peut utiliser la voix locale.
• L'App Router organise écrans, handlers et documents d'infrastructure dans une seule application.
• next-intl résout les routes localisées et charge les messages des neuf locales prises en charge.
• Les sections du portfolio utilisent des données typées et les études de cas sont écrites en MDX.
• Les couches interactives sont isolées dans des composants client et des providers lorsqu'elles nécessitent l'état du navigateur.
• Le langage visuel combine typographie contrastée, panneaux de terminal, bruit, balayage et détails glitch.
• Le chatbot appelle un handler serveur afin que les clés et les règles des fournisseurs ne soient jamais exposées au navigateur.

Résultats

• Résultat : Le site fournit une orientation rapide et une explication plus profonde de ses systèmes.
• Qualité et validation : ESLint, vérification TypeScript et build de production constituent des gates reproductibles.
• Contrôles de sécurité : Le chat utilise verrouillage temporaire signé et limites de débit; MCP utilise scopes lecture seule et codes d'autorisation à usage unique.
• Comparaison et évolution : Portfolio: Glass évolue ici en produit modulaire capable de porter récit localisé et accès agent.
• Impact : Le projet associe frontend créatif et décisions maintenables de contenu, intégration, sécurité et déploiement.
• Le projet sert à la fois de site public et de démonstration maintenable d'une architecture Next.js actuelle.
• Le contenu principal est disponible en anglais, tagalog, allemand, espagnol, français, arabe, coréen, japonais et chinois.
• Les projets peuvent contenir une couverture, un récit long, des tableaux et des composants MDX partagés.
• L'interface propose navigation, curseur personnalisé pour pointeur précis et commandes musicales facultatives.
• Les routes opérationnelles publient une documentation lisible et des contrats utiles aux outils.

Approfondissement Technique

• Détails remarquables : Texture CRT, typographie glitch, Canvas, hero 3D focalisé, contrôles musicaux et contenu localisé partagent des responsabilités claires sans conteneur global excessif.
• Vérification : Lint, types et build de production sont exécutés comme gates; les branches responsive, reduced-motion et coarse-pointer sont revues avec les changements UI.
• Optimisations : Les shells client-only isolent les capacités navigateur, et MDX, modules de données et composants modulaires évitent une interaction inutile.
• Qualité du code : Types TypeScript, handlers organisés, providers ciblés, stores étroits et modules de service ou sécurité rendent l'ownership lisible.
• Liens et références : Voir components/sections, components/ui, components/chatbot, components/providers, content/projects, messages, data, lib/mcp, lib/security, lib/services et stores.
• /api/chat valide les requêtes de même origine, applique le contexte du portfolio et délègue au service de chatbot. Lorsque les contrôles contre les abus se déclenchent, un cookie temporaire de verrouillage signé porte la restriction, et non la requête elle-même.
• Un service principal traite les requêtes et un service de secours prend le relais selon la politique de disponibilité.
• /api/contact livre les messages du formulaire via la configuration SMTP de l'environnement.
• Le lecteur utilise les routes Spotify pour ouvrir la connexion, recevoir le callback et consulter le titre en cours.
• /api/gallery/[slug] est une surface limitée en débit pour les médias et galeries de projets prises en charge.
• Les actions Oz approuvées peuvent ouvrir une galerie de projet lorsqu'elle est activée et prise en charge, sans la présenter comme action mobile universelle.
• L'intégration MCP publie HTTP streamable, une compatibilité SSE héritée et une route de santé.
• OAuth 2.1 avec PKCE S256 protège l'accès en lecture seule des clients MCP.
• Les codes d'autorisation à usage unique utilisent Redis compatible Upstash sur Vercel lorsqu'il est disponible.
• Les providers client limitent les états de thème, musique, chatbot et shells dépendants du navigateur.
• Les composants serveur préparent contenu et métadonnées avant que les widgets interactifs ne prennent le relais.
• L'accessibilité s'appuie sur une structure sémantique, des contrôles libellés, un focus utilisable et un curseur désactivé pour pointeur grossier.
• Le middleware d'internationalisation dirige les requêtes vers la locale appropriée.
• Les composants de projet partagent les conventions de couverture, titres et tableaux grâce à la couche MDX.
• Les métadonnées de chaque page sont produites avec le contexte de langue et le contenu disponible.
• La navigation emploie les helpers de next-intl afin de préserver le bon préfixe de locale.
• Les tokens CSS évitent les couleurs dispersées et permettent d'ajuster l'identité depuis le système global.
• L'écran de chargement et la navigation se coordonnent avec le cycle d'interaction du document.
• Les formulaires valident la frontière entre client et handler avant d'envoyer un e-mail.
• Les routes de santé fournissent un contrôle limité des systèmes intégrés.
• Le contenu public est rendu depuis des données statiques et MDX, sans stockage de projets à l'exécution.
• La configuration des secrets reste dans les variables d'environnement et n'apparaît jamais dans MDX ou les messages client.
• Les commandes de qualité comprennent ESLint, vérification des types et build de production.
• Le paquet fixe Node.js 24 LTS avec engines et un fichier .nvmrc.
• Les ressources de découverte aident les clients MCP et lecteurs automatisés à interpréter le site.
• Les améliorations visuelles sont conçues pour se dégrader avec élégance si une capacité manque.
• Le responsive adapte hiérarchie, espacement et contrôles avant de réduire arbitrairement le texte.

Réflexions

• À faire différemment : Continuer de simplifier les parcours visuels les plus coûteux tout en gardant la personnalité éditoriale.
• Réussites : Interface, récit localisé, assistant, musique et découverte fonctionnent comme un seul produit.
• Leçons : Les interactions riches restent maintenables lorsque intégrations serveur, comportement navigateur et contenu localisé ont des limites claires.
• Un système visuel intense doit ménager assez d'espace pour que le contenu reste central.
• Clarifier les frontières entre données statiques, MDX, état client et services serveur réduit le coût du changement.
• Les affirmations de performance doivent décrire des pratiques et vérifications reproductibles plutôt que des chiffres fixes hors contexte.

Contributions

• Frontend et design : J'ai conçu le système visuel, les sections responsive, la composition HUD, Canvas, le hero 3D et la présentation du contenu.
• IA et Oz : J'ai construit l'assistant en streaming, le routage principal et secours, le contexte portfolio et MDX, et les actions UI.
• Voix, superpositions et contenu : J'ai réalisé le feedback vocal et de doublage local, la coordination des overlays, le flux MDX à neuf langues et le fallback anglais.
• MCP et sécurité : J'ai mis en œuvre l'accès en lecture seule, OAuth, la discovery, la vérification same-origin du chat et le verrouillage temporaire signé distinct.
• Interaction et animation : J'ai ajusté motion, scroll, reduced-motion et interaction responsive.
• J'ai conçu la direction visuelle, les sections du portfolio et les composants d'interface réutilisables.
• J'ai mis en œuvre le système de contenu MDX, le routage localisé et les métadonnées par langue.
• J'ai intégré le chatbot, le formulaire de contact, Spotify et la surface MCP avec des limites de sécurité serveur.

Architecture

• Structure en couches : Les server components gèrent locale et document, les client components l'interaction navigateur, et les routes API isolent chat, contact, media et MCP.

• Modules fonctionnels :

• Présentation

  • src/components/sections/ rassemble Hero, About, Experience, Skills, Projects, Contact et Certification.
  • src/components/ui/ contient GlitchText, Waves, CustomCursor, HeroModel, SkillGraph et les pièces visuelles.
  • src/components/layout/ contient navigation, écran de démarrage et retour en haut.

• Contenu et état

  • src/data/ définit les données statiques typées et src/content/projects/ conserve les études de cas MDX.
  • src/messages/ contient les messages traduits et src/i18n/ définit les locales et la résolution des requêtes.
  • src/stores/ et src/components/providers/ limitent l'état partagé de l'expérience cliente.

• Services et routes

  • src/lib/services/chatbot/ abstrait les services IA et src/app/api/ expose les handlers.
  • src/app/.well-known/, openapi.json, llms.txt et llms-full.txt publient les métadonnées d'intégration.

• Gestion d'état : Les providers possèdent thème, internationalisation et musique; préférences de chat et filter state restent dans le périmètre nécessaire.

• Refactorisation et améliorations : Les limites modulaires font évoluer séparément features visuelles, handlers, contenu et intégrations.

Structure des routes et systèmes

• Site localisé : /[locale] et /[locale]/projects/[slug] rendent la page principale et chaque étude MDX.
• Oz, contact et médias : /api/chat, /api/chat/health, /api/contact, /api/gallery/[slug], /api/spotify/login, /api/spotify/callback et /api/spotify/now-playing servent les fonctions du site.
• Spotify : /api/spotify/login, /api/spotify/callback et /api/spotify/now-playing connectent le lecteur facultatif.
• MCP et OAuth : /api/mcp, /api/mcp/message, /api/mcp/sse, /api/mcp/health et les documents OAuth de /.well-known/ constituent la surface agents.
• Découverte : /sitemap.xml, /robots.txt, /llms.txt, /llms-full.txt, /auth.md et /openapi.json décrivent le site aux robots et outils.

Démo

• Accueil éditorial : Une page défilante réunit introduction, expérience, compétences, projets, certifications et contact.
• Couches interactives : Chatbot, lecteur et curseur sont chargés comme améliorations respectant les capacités de l'appareil.
• Études de projets : Chaque entrée ouvre un récit MDX localisé avec couverture et typographie cohérente.
• Landing FUI numérique : CRT, lectures d'état de terminal et détails glitch préservent la priorité du contenu.
• Feedback voix et doublage : L'audio local optionnel n'est pas nécessaire pour naviguer ou lire le site.
• Grilles responsive et détail localisé : Les blocs denses et les études de projet s'adaptent à l'appareil et à la langue choisie.
• Discovery prête pour les agents : OAuth et les documents publics décrivent un accès en lecture seule pour les outils compatibles.

Le site est publié sur franzdomingo.dev et ce dépôt reste privé.