Nestor PeñaDesign Engineer · Product Designer

Étude de cas 07 · Ma marque · 20261 min de lecture

Un seul design system pour mon site, mon CV et mes lettres de motivation.

J’ai conçu mon CV et ce site comme un seul produit, et codé le site moi-même.

Réalisé avec
  • Claude Design
  • Claude Code
  • Astro
  • React
  • TypeScript
  • GitHub Actions
  • Cloudflare Workers
3supports, un seul système
1couleur d’accent
1 minpar étude de cas
AAWCAG 2.1
Mode d'affichage

Vous voyez le résultat. Activez la couche Réflexion pour voir comment j'y suis arrivé.Vous voyez les notes en marge, les croquis et les options que j'ai écartées.

Avant / après · glissez pour comparer

Page d’accueil actuelle de nestor-pena.ch : « I design software, then I build it »Après
Ancienne page d’accueil de nestor-pena.chAvant

Contexte et rôle

le CV d’abord

Pour les fondateurs, CTO et recruteurs qui survolent.

Mon site, mon CV et mes lettres, construits avec Astro, React et TypeScript sur Cloudflare. Les recruteurs voient d’abord le CV, puis cliquent : passer de l’un à l’autre doit ressembler à tourner une page.

Ma réflexion

chaque choix sert la lecture rapide

Point de départ

Concevoir le site, rhabiller le CV
Une nouvelle marque

Partir du CV

Le site doit ressembler à la page suivante du CV.

Temps de lecture

Des textes complets
Que des captures

Une minute, le détail à la demande

Un recruteur survole le résultat ; la couche Réflexion garde les raisons, les options écartées et les croquis.

Documents privés

Un mot de passe dans le navigateur
Un code PIN par email

Un code vérifié sur le serveur

Les PDF ne sont jamais publics, et les recruteurs tapent le code figurant sur mon CV.

Ce que j’ai construit

Index des études de cas sur l’accueil : sept lignes, avec un aperçu au survol de l’étude Bern Sessions et sa note manuscrite
Étude de cas Pulse avec la couche Réflexion activée : fond de papier pointillé, note en marge et cartes de décision montrant pourquoi les options A et B ont été écartées
La couche Réflexion
L’accueil sur un téléphone : portrait, titre court et barre d’onglets surélevée en bas
Page du CV en squelette : nom, titre et intitulés de section, chaque ligne de texte remplacée par une barre
CV
Page de lettre de motivation en squelette : nom, titre et objet, chaque ligne de texte remplacée par une barre
Lettre de motivation
  • Un seul fichier de tokens pilote le site, la page d’identité et ses ratios de contraste.
  • Un fichier Markdown par étude de cas : la page, la ligne d’accueil et l’aperçu en découlent.
  • Une couche Réflexion sur chaque étude de cas : notes en marge, options écartées, croquis.
  • Une couche dessinée à la main : notes, icônes griffonnées et séparateurs au trait de plume.
  • Une recherche d’outils pour les recruteurs : tapez « Jira » ou « Azure DevOps », obtenez un oui et où je l’ai utilisé.
  • Quatre langues : anglais, espagnol, français et allemand ; le sélecteur vous garde sur la même page.
  • WCAG 2.1 AA, vérifié à chaque push : contraste, accessibilité, types, Lighthouse.
  • Un en-tête calme : les liens de page, puis un seul groupe d’icônes pour profils, langue et thème.
  • Infobulles : les boutons à icône s’expliquent au survol et au clavier ; Échap les masque.
  • Favicons pour chaque appareil : onglets du navigateur, écrans d’accueil iPhone et Android.
  • Un seul étalonnage pour chaque photo : ombres couleur encre, tons moyens dans la couleur d’accent, hautes lumières crème ; les captures d’écran gardent leurs vraies couleurs.
  • Un CV lisible par les logiciels de recrutement (ATS) : une colonne, le nom en premier, et chaque PDF vérifié comme un ATS le lit.
Voir le système d’identité →

Impact

95+Lighthouse, chaque page
0violation d’accessibilité
1minute par étude de cas

Mesurer a révélé ce que les maquettes cachent : couleurs sous AA, images en demi-résolution, un crash dans la démo. Tout est corrigé.

Ce que je ferais autrement

  1. Tester l’accueil avec deux ou trois recruteurs avant le lancement.
  2. Partager un seul fichier de tokens entre le site et l’outil de CV.

Un seul système pour tout votre produit ?