Portfolio

Portfolio

React 19Next.js 16Tailwind CSSTypeScriptDesign SystemExpérimental

Objectif du projet

Mon portfolio ne se limite pas à montrer des projets. C’est un espace pour :

  • 🧭 Explorer, pousser et évaluer certaines approches dans un environnement réel, sans les contraintes d’un produit commercial classique
  • 🧪 Travailler avec des technologies récentes ou expérimentales
  • 🎯 Valider des choix d’architecture et d’UX
  • 🔬 Éprouver mes propres librairies dans un contexte concret

J'expérimente et ne retiens que ce qui est pertinent, pas simplement ce qui est nouveau.

Technologies testées

View Transition API

Transitions fluides entre éléments présents sur des pages différentes grâce au composant React expérimental <ViewTransition />

Lors du changement de thème, transition animée en exploitant directement l'API impérative du navigateur.

Une même API, deux usages distincts, deux contextes d'intégration différents.

Server Actions

Le formulaire de contact est implémenté avec une Server Action typée, validée côté serveur avec Zod. L'objectif était d'éprouver les contraintes du modèle : comment gérer les erreurs, comment typer l'ensemble de façon cohérente, comment assurer la scalabilité.

App router

L'ensemble du projet est construit sur l'App Router de Next.js 16. Cela m'a permis d'identifier clairement:

  • Les avantages : layout partagé, Server Components
  • Les limitations : contraintes d'hydratation, gestion du state global
  • Leur impact sur la façon de structurer un projet

Subgrid avancé

Mise en place d’une cascade de subgrids, une technique encore peu mainstream, pour assurer à coup sûr l’alignement du contenu d'une liste de cartes, sans hack.

WebGL

Grille qui se déforme au passage du curseur.

Mes librairies personnelles

Ce portfolio intègre 2 librairies que j'ai développées et publiées :

Système de thèmes

J'ai choisi d'aller au-delà du simple dark/light, et de construire un mini design engine basé sur 3 paramètres :

  • Le mode clair/sombre 🌗
  • Le glassmorphism (effet de verre) ⿻
  • Les couleurs thématiques 🎨

En pratique, cela signifie que l’utilisateur peut découvrir des dizaines de variations visuelles.

🎯 Petit défi technique

Le thème est sauvegardé via un cookie pour être appliqué dès le chargement de la page. 👉 Avec le rendu côté serveur, l’état doit préexister côté serveur dès le rendu initial, puis continuer à vivre côté client pour les interactions. Ça garantit un affichage cohérent dès l’arrivée, sans effet de flash.

N.B.: la stabilité visuelle (CLS) a un impact direct sur la perception de performance

Performance et accessibilité

Score lighthouse

Score Lighthouse : 100/100 en Performance, Accessibilité, Best Practices et SEO.

Ces métriques reflètent des décisions concrètes :

  • 📈 Réduction au max du javascript côté client grâce aux server components, optimisation des assets statiques et des observers, mise en pause des animations hors écran, ...
  • 🧠 HTML sémantique, conformité WCAG et ajustement du contraste pour chaque thème.

Internationalisation

🌐 Le portfolio est disponible en 4 langues : français, anglais, néerlandais, russe.

La navigation est structurée par la locale, ce qui permet aux moteurs de recherche d'indexer correctement chaque version.

Architecture

Une structure claire réduit la charge cognitive et facilite les évolutions futures.

Ce portfolio m'a permis d'éprouver en pratique une réflexion sur l'organisation d'un projet front, notamment la distinction core / shared et l'approche feature-first.

Lire la réflexion complète

Approche itérative

Ce projet n'a jamais été pensé comme "terminé". L'historique git en témoigne :

  • ♻️ Refactors constants
  • 🧩 Ajustements UX progressifs
  • 📝 Améliorations de détail

C'est cette façon de travailler (améliorer en continu plutôt qu' attendre la perfection) qui reflète le mieux comment j'aborde un projet réel.