Case Study

Portfolio v2.5

Refonte complète de mon portfolio — conçu et instrumenté comme un produit, axé research

Design SystemUX ResearchWeb
Rôle
Product Designer & Développeur
Durée
En itération continue
Plateforme
Web — Next.js / React
Client
thomas-leloup.fr
Année
2026
Portfolio v2.5
Contexte 01

Ce site est lui-même mon dernier projet en date. La v1 — développée en 2023 sous le nom L9 agency — était mon bac à sable : une vitrine prototypée avec Figma Make, soignée mais muette. Aucune donnée sur les visiteurs, des études de cas sans visuels, un contenu figé dans le code. Pour la v2.5, je l'ai traitée comme un vrai produit : maquettes et animations conçues sur Figma, développement mené en binôme avec l'IA, et une obsession de researcher — savoir ce qui se passe réellement quand un recruteur navigue.

SecteurCase Study
RôleProduct Designer & Développeur
DuréeEn itération continue
PlateformeWeb — Next.js / React
Clientthomas-leloup.fr
Problématique 02

Un portfolio classique ne permet ni de se démarquer, ni d'apprendre : impossible de savoir quels projets sont consultés, où les visiteurs décrochent, si le CV est téléchargé. La v1 souffrait aussi de son contenu — pas de galeries, des textes génériques, aucune preuve d'impact — et chaque modification demandait de toucher au code, donc rien n'évoluait.

Objectifs 03
01
Créer une expérience immersive et mémorable qui me démarque — thème spatial, micro-interactions soignées
02
Instrumenter le site comme un outil de research : données orientées, contrôlées, anonymes et conformes CNIL
03
Convertir : guider le visiteur vers les projets, le CV et le contact — et mesurer chaque étape
04
Être 100% autonome sur le contenu grâce à un back-office sur mesure
Processus 04
01
Recherche & positionnement
Benchmark de portfolios de designers seniors, définition d'un positionnement différenciant (design × engineering) et d'une direction artistique spatiale qui me ressemble. Fidèle à ma philosophie : chaque élément a un but, rien n'est décoratif par hasard.
BenchmarkPositionnement
02
Maquettes, animations & design system
Maquettes et animations conçues sur Figma : tokens (couleurs, typographies Syne / DM Sans, espacements), composants réutilisables et contraste AA vérifié par un audit automatisé sur toutes les pages et tous les états — reproductible à chaque évolution.
FigmaDesign systemWCAG
03
Développement en binôme avec l'IA
Le code est mené avec Claude, utilisé comme une extension de mes connaissances : un compagnon de dev et un conseiller qui challenge mes réflexions autant que je challenge ses propositions — une symbiose qui tire le rendu vers le haut. Chaque décision reste la mienne, et je me forme à l'IA en la pratiquant au quotidien. Résultat : Next.js en rendu serveur, images WebP, Lighthouse 94/100 (LCP 1,2 s), compatibilité Chrome, Firefox et moteurs mobiles.
ClaudeNext.jsReact
04
Instrumentation research & data
Analytics propriétaires sans cookie tiers, conformes CNIL : funnel recruteur (visite → projet → CV → contact), événements trackés, modale d'avis notés par les visiteurs. Chaque donnée collectée répond à une question précise, et tout est purgé après 13 mois (RGPD).
Analytics maisonPostgreSQLRGPD
05
Back-office & itérations continues
Un admin complet : édition des projets et témoignages, upload d'images, gestion du CV, dashboard de data avec tendances et taux de conversion. Le contenu vit sans toucher au code — d'où une v2.5 en évolution permanente.
DashboardCMS maison
Résultats 05
94/100
Performance Lighthouse desktop — LCP 1,2 s
0
Violation de contraste WCAG AA — audit axe-core sur tout le site
100/100
SEO & bonnes pratiques Lighthouse
v1 → v2.5
Refonte complète : DA, code, contenu et couche data
Plus-values 07
✦
Un portfolio instrumenté comme un produit : je sais ce que les recruteurs consultent, où ils décrochent et ce qui convertit
◈
Data 100% propriétaire, orientée et contrôlée — anonyme, conforme CNIL, sans aucun cookie tiers
⬡
L'IA comme levier maîtrisé : Claude est mon binôme de dev et mon conseiller de réflexion — on se challenge mutuellement pour le meilleur rendu, et je m'auto-forme aux workflows qui transforment le métier
◆
Back-office sur mesure : contenu, images, CV et dashboard sans toucher au code
✶
Accessibilité prouvée par un audit automatisé, pas déclarée sur parole
◉
La démonstration est sous vos yeux : vous êtes en train de l'utiliser
Outils
Figma
React
Next.js
Github
Ce process vous parle ?
Chaque projet suit la même exigence : anticiper les usages, mesurer l'impact, soigner le moindre détail. Parlons de ce que je peux apporter à votre équipe.
Mon CV
← Précédent
Kara