Retour au portfolio
Portfolio Personnel — Carte de Projets Explorable

Portfolio Personnel — Carte de Projets Explorable

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.

Technologies

Astro 5 React 19 TypeScript GSAP Lenis Tailwind CSS View Transitions SEO

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.