Comment j'ai refait ce portfolio
L'histoire derrière la refonte v2.0 — choix de design, décisions de couleurs, accords typographiques, et les petits détails qui comptent. Inspiré de la page dev du webdoc Ghana — chaque projet mérite son making-of.
Un portfolio éditorial pour un designer éditorial.
La version précédente de ce site était colorée — une configuration multi-pages avec une route par catégorie de projet. Ça fonctionnait, mais ça paraissait fragmenté. Après des années à concevoir des webdocs long format, je voulais que mon propre portfolio porte le même ADN : typographique, sobre, avec une ou deux idées exécutées avec précision.
Le brief que je me suis donné était simple : garder la vague, garder la grosse typographie éditoriale, mais tout le reste, je le dépouille jusqu'à l'os.
De magenta-cyan-bleu à bleu + accent rose.
L'ancienne vague utilisait trois couleurs vibrantes. La nouvelle palette garde l'esprit mais le modernise.
Deux voix, pas plus.
Sur ce portfolio, deux familles seulement. Une pour les titres éditoriaux, une pour le tissu connectif. Chacune dans son rôle, sans mélange.
New York Extra Large
Display, par Apple. Déjà présente dans le site précédent, un serif aux italiques marquées avec une présence de magazine. Elle fait tout le travail lourd : hero, titres de projets, CTA de contact. Plus c'est gros et gras, mieux c'est.
JetBrains Mono
Pour le tissu connectif — labels, numéros de projets, barre de statut, footer. C'est un clin d'œil : la navigation ressemble un peu à un éditeur de code — logique, puisque la prochaine chose sur laquelle vous allez cliquer est sans doute du HTML.
System UI
Pour le corps de texte profond (paragraphes about, descriptions de projets). Pile de polices système pour la performance et le ressenti natif. Aucune licence, aucun téléchargement, et exactement le rendu auquel le visiteur est habitué sur son OS.
Trois défis techniques.
Trois pièces de plomberie qui devaient rester invisibles à la lecture — et qui font tout le travail.
La vague audio-réactive
Trois ondes sinusoïdales tracées au trait en <canvas>, avec phases décalées et fréquences différentes. Le bleu et le rose chantent, un neutre doux murmure en dessous. Elle réagit au curseur (proximité × influence × 14px de boost). Quand l'audio démarre, un AnalyserNode de la Web Audio API lit les données de fréquence en direct et renvoie l'amplitude au canvas : la vague écoute littéralement la voix.
Page transitions CSS-first
Un rideau bleu plein écran avec mark RB en serif XXL qui glisse vers le haut au chargement (cubic-bezier(0.76, 0, 0.24, 1)) et redescend au clic sur un lien interne. L'animation tourne en CSS pur via @keyframes — si le JS plante, le rideau s'envole quand même. Filet de sécurité sur 6 pages, sans framework de routing.
i18n runtime sans duplication
Trois langues — français, anglais, portugais — sans multiplier les fichiers HTML. Un dictionnaire JS central, des attributs data-i18n et data-i18n-html dans le HTML, une fonction applyLang() qui swap les contenus au runtime. Persistance en localStorage, détection automatique de la langue du navigateur au premier visit. Le statut « disponible / non disponible » switche aussi via un attribut data-status sur la topbar.
De 7 pages à 5.
L'ancien menu en haut comptait 7 catégories. La nouvelle structure est brutalement simple.
Le projet, en chiffres.
La boîte à outils.
- HTML5 — sémantique, accessible.
- CSS moderne — propriétés personnalisées, clamp(), grid + flex.
- JS vanilla — Canvas API, IntersectionObserver, localStorage.
Sur les épaules de géants.
Aucun projet ne part d'une page blanche. Quelques sites qui ont nourri cette refonte.
« Un portfolio est un autoportrait. Le mien en a eu marre d'être coloré et bruyant —
il voulait grandir, trouver une voix, et laisser le travail parler.
— Raphael, 2026. »