Les coulisses
Ce portfolio n'est pas sorti de nulle part. Voici le cheminement créatif, les choix graphiques, les galères et les petites victoires qui ont mené à ce résultat.
“Rien n'a été laissé au hasard.
Pas même cette phrase.”
Le point de départ
Je voulais un portfolio qui ne ressemble pas à un template. Quelque chose qui montre qui je suis avant même qu'on lise une ligne de texte. L'objectif était clair : créer un site qui donne envie de scroller, de cliquer, de revenir.
Mon point de départ, c'était une frustration. Les portfolios que je voyais étaient souvent beaux, mais froids. Je voulais du caractère, de la personnalité, et surtout que ça reflète ma façon de travailler : créative, audacieuse, sans compromis sur la qualité.
Exploration de dizaines de portfolios, de sites Awwwards, et de références sur Dribbble et Behance pour identifier ce qui me plaisait, et surtout ce qui ne me plaisait pas.
Pas juste "montrer mes projets", mais raconter une histoire. Chaque page devait avoir un parti pris fort et une cohérence globale.
Avant de toucher au moindre pixel, j'ai listé tous mes projets, identifié les plus forts, et construit l'architecture des pages.
Direction artistique
Le choix du dark mode n'est pas un effet de mode. C'est une décision forte. Le fond sombre met en valeur les visuels des projets, crée du contraste et donne une identité immédiatement reconnaissable.
L'orange #FF6B35 s'est imposé naturellement : c'est une couleur qui a de l'énergie sans être agressive, qui se détache sur le noir, et qui reflète ma personnalité.
Le fond sombre met les projets en lumière. Les visuels ressortent, les couleurs claquent, l'attention est guidée vers l'essentiel.
De l'énergie sans agressivité. L'orange ponctue chaque page comme un fil conducteur : boutons, accents, survols, séparateurs.
Beth Ellen apporte une touche humaine et authentique. Elle dit "c'est moi qui parle" là où Montserrat impose le cadre.
Architecture
Avant de coder quoi que ce soit, j'ai posé la structure. Chaque page a été pensée pour guider le regard : du hero qui capte l'attention, aux projets qui racontent, jusqu'au contact qui convertit.
Hero immersif avec animation de texte → présentation courte → grille de projets filtrables → compétences → formations → contact. Un parcours naturel qui se lit comme un CV vivant.
Chaque projet suit un template cohérent : hero sombre avec titre fort, contexte (client, rôle, durée), puis les livrables organisés par type. La navigation inter-projets garde le visiteur dans le flow.
Timeline verticale alternée avec cartes colorées. Chaque expérience est cliquable et révèle des détails + des aperçus visuels en "pétales". Un format qui raconte l'évolution, pas juste les faits.
Les petits plus
Un portfolio, ce n'est pas juste un book en ligne. C'est une expérience. J'ai ajouté des détails interactifs qui montrent ma créativité et mon attention au détail. Exactement ce qu'un recruteur veut voir.
Une question animée avec les postes qui défilent. Et un écran "Non" humoristique avec une Erreur 404 et un GIF, parce que même le refus peut être créatif.
Un panneau latéral avec les 5 postes visés et la disponibilité. Un toggle discret dans la nav qui donne aux recruteurs exactement ce qu'ils cherchent, sans casser l'expérience.
Un point orange avec un anneau qui suit la souris en douceur. Un détail subtil qui renforce la DA et rend la navigation plus vivante.
Un compteur live dans le hero, une petite preuve sociale qui donne du mouvement à la page dès l'arrivée.
Caché dans le footer. Ceux qui le trouvent sourient. C'est exactement le genre de détail qui fait qu'on se souvient d'un portfolio.
Chaque section se révèle progressivement. Les cartes projets cascadent, les stats comptent, les éléments glissent. Tout est orchestré pour donner du rythme.
En chiffres
Stack
Ce portfolio a été entièrement codé à la main. Pas de WordPress, pas de Wix, pas de template. Du HTML, du CSS, du JavaScript, et beaucoup de café.
HTML5, CSS3 (custom properties, grid, flexbox), JavaScript vanilla. Zéro framework, zéro dépendance. Tout est maîtrisé de A à Z.
Canva pour les moodboards et visuels, et beaucoup de tests directement dans le navigateur.
Claude comme partenaire de développement : architecture, debug, optimisation du code. Un vrai outil de productivité pour aller plus vite sans sacrifier la qualité.
Leçons
Chaque décision graphique doit fonctionner partout. Une couleur, une typo, un espacement : si ça marche sur une page mais pas sur les autres, c'est qu'il faut repenser.
La première version n'est jamais la bonne. J'ai refait des pages entières, supprimé des sections que j'aimais, ajouté des détails que personne n'avait demandés. C'est ça, le process.
Le curseur custom, l'easter egg, les animations au scroll... ce sont ces petits riens qui transforment un bon portfolio en un portfolio mémorable.
“Tout a été construit avec soin.
Le reste, c'est à vous d'en écrire la fin.”