Portfolio 2k26
Mon portfolio personnel, repensé comme un site éditorial plutôt qu'une vitrine classique. Le contenu se découvre au scroll, animation après animation, avec une direction artistique bordeaux/beige pensée pour rester lisible tout en ayant du caractère.
Je voulais sortir des templates portfolio qu'on voit partout : grille de projets, hover bleu, fin. L'objectif était d'en faire un projet à part entière, qui se vit comme une lecture. J'ai choisi une stack Next.js 16 avec le React Compiler, GSAP pour les animations au scroll et Lenis pour le smooth scroll synchronisé. Côté direction artistique, je suis parti sur un duo bordeaux/beige avec Anton pour les titres et Inter pour le corps de texte. Un contraste fort sans tomber dans l'effet "site noir générique".
Ce que la plateforme permet
- 01
Défilement synchronisé
Le smooth scroll de Lenis est plogué directement sur le ticker GSAP. Du coup les animations ScrollTrigger restent calées sur la position réelle, même quand on accélère le scroll. C'est ce qui évite le décalage typique entre le mouvement de la page et celui des éléments animés.
- 02
Mise en scène des expériences pro
Les deux expériences en alternance (Imagina, Pois Chiche Design) s'affichent en panneaux plein écran qui se superposent au scroll. J'ai utilisé un clip-path animé pour que le second panneau "monte" par-dessus le premier sans rupture. L'idée était de donner à chaque expérience la place qu'elle mérite plutôt que de les caser dans une liste.
- 03
Direction artistique bordeaux/beige
J'ai posé deux couleurs signature dès le départ : un bordeaux profond pour le fond, un beige chaud pour les textes. Anton apporte la présence sur les gros titres, Inter garde la lecture confortable sur les paragraphes. Le tout est défini en variables Tailwind v4 via @theme inline, pour pouvoir l'ajuster facilement.
- 04
Formulaire de contact connecté
Le formulaire envoie directement un mail via une API route Next.js et donne un retour visuel immédiat (état envoi, succès, erreur). Une fois le message validé, l'utilisateur débloque 20 pixels sur la Pixel Grid du site, une façon de remercier les visiteurs qui prennent le temps de m'écrire.
- 05
Architecture pensée pour les animations
App Router de Next.js 16, React Compiler activé pour la mémoïsation auto, et chargement des images via next/image. Les composants animés sont en "use client" mais isolés pour ne pas alourdir le bundle initial. Résultat : les animations restent fluides même sur des pages chargées.
- 06
Contenu centralisé en JSON
Tous les projets sont décrits dans un seul fichier projects.json lu par les composants. Pour ajouter ou modifier un projet, je n'ai qu'un endroit à toucher : les pages détail, la home et le chat se mettent à jour automatiquement.