Portfolio Personnel — Carte de Projets Explorable
Aperçu
J'ai reconstruit mon portfolio de zéro. L'ancien site était une page néo-brutaliste sombre qui faisait tourner un script Tailwind en CDN sur une grille JSON ; celui-ci est un build statique Astro 5, avec des îlots React uniquement là où l'interaction l'exige. La pièce maîtresse est la page des travaux — un plateau façon carte où 36 projets occupent cinq territoires, un par discipline. La molette zoome au curseur, le glissement déplace avec de l'inertie, deux doigts pincent, et les filtres font voler la vue vers une catégorie en atténuant les autres. En zoomant, les épingles deviennent des cartes. Chaque nœud est un vrai lien : chaque projet se construit donc aussi comme sa propre page statique, qui s'ouvre avec sa fenêtre déjà à l'écran. La page d'accueil est une suite de sections pilotées par le défilement : un hero épinglé avec un carrousel de six diapositives, une section à propos dont les paragraphes se remplissent lettre par lettre pendant qu'une pile d'images s'accumule, un bandeau de faits en fisheye, un accordéon de compétences et un carrousel de projets dont la piste défile latéralement quand on descend — sur téléphone comme sur ordinateur. Tout le contenu tient dans un seul fichier JSON. Il n'y a ni CMS, ni base de données, ni runtime serveur.
Défis
Une carte explorable devient vite désorientante et vite inaccessible. Il fallait aussi rester sur un build statique — sans serveur — tout en donnant à 36 projets de vraies URL partageables, et l'animation devait tenir sur un téléphone.
Solutions
Chaque nœud de la carte est une ancre vers une page générée à la compilation : le plateau reste navigable, partageable et indexable même sans JavaScript. Le niveau de détail remplace les épingles par des cartes à mesure que l'on zoome, et les filtres font voler la vue au lieu de la recharger. Les sections sont épinglées avec GSAP ScrollTrigger et pilotées par la position de défilement plutôt que par un ticker, ce qui les garde fidèles sur les appareils tactiles. Tout le site est livré en HTML statique depuis Astro, React n'étant monté que sur le seul composant qui en a réellement besoin.
Galerie
Hero — Un nom, une promesse et six métiers en rotation
À propos — Un scrollytelling qui se remplit lettre par lettre
Quick Facts — Un fait à la fois, agrandi au passage
Skills — Ouvrez un métier, survolez-en un autre pour voir ses outils
Projets favoris — Une piste qui défile latéralement
Contact — Le registre de clôture
Carte des projets — Zoomez et les épingles deviennent des cartes
Fenêtre de projet — Ouverte sur place, avec sa propre URL
Hero — La même ouverture, empilée pour la tablette
À propos — Sur tablette, le récit se déroule, puis la citation s'impose
Projets favoris — Le carrousel latéral tourne aussi sur tablette
Vue filtrée — Un filtre fait voler le plateau vers une catégorie
Fenêtre de projet — Toute l'étude de cas sans quitter la carte
Menu — Un panneau plein écran qui garde le CV à portée de main
Quick Facts — Un coup de pinceau dévoile la photo
Projets favoris — Piloté par le défilement, sur mobile aussi
Carte des projets — Pincez pour zoomer, chaque épingle devient une carte
Fenêtre de projet — Une étude de cas complète qui tient sur un téléphone
Contact — Chaque canal à un seul toucher
