Portfolio de développeur : un site qui montre du goût

Un bon portfolio de développeur est un petit site rapide en quatre parties : un hero qui dit en une ligne ce que vous construisez, trois à six cartes de projet qui expliquent le problème et votre part dans sa résolution, une courte section à propos et un lien de contact. Le goût se voit dans les détails : un fond de hero calme, des cartes cohérentes, une typographie lisible et un aperçu de lien soigné quand un recruteur colle votre URL dans un canal de recrutement. Pas besoin d’une vitrine de frameworks. Il faut une page visiblement soignée.

La structure d’un portfolio de développeur

Dites ce que vous construisez, pas ce que vous êtes. « Je construis des parcours de paiement rapides pour des boutiques en ligne » en dit plus à un lecteur que « Développeur full stack ». Si vous débutez, « Je construis des applis web accessibles avec React et Postgres » est honnête et précis. Le design d’une section hero en dit plus sur l’écriture de cette première ligne.

Un fond de hero qui montre du goût

Beaucoup de portfolios utilisent soit une page blanche unie, soit un fond animé lourd qui retarde tout le reste. Une voie médiane est un dégradé CSS en couches : deux ou trois halos radiaux doux sur un fond sombre ou pâle. Quelques lignes de code, aucun coût réseau, et un résultat toujours soigné. Le fond de hero de site web et le dégradé mesh en CSS vont plus loin.

.hero {
  min-height: 70vh;
  color: #f4f4f8;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgb(56 189 248 / 0.28), transparent 70%),
    radial-gradient(ellipse 50% 60% at 15% 20%, rgb(124 58 237 / 0.45), transparent 70%),
    linear-gradient(180deg, #0e1020 0%, #07080f 100%);
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  max-width: 18ch;
}

Si vous voulez du mouvement, animez lentement, gardez les mots fixes et respectez prefers-reduced-motion ; la réduction des animations explique comment. Un peu de grain par-dessus masque le banding des grands dégradés sombres, traité dans la texture de bruit CSS.

Des cartes de projet qui expliquent l’impact

Une carte de projet a quelques secondes pour justifier un clic. Donnez à chacune les mêmes quatre parties : un titre, un problème en une phrase, ce que vous avez construit et le résultat, puis des liens vers le projet en ligne et le code. Les résultats n’ont pas à être spectaculaires. « Utilisé chaque jour par notre équipe de 30 personnes » ou « Temps de chargement passé de 4 s à 1,2 s » conviennent s’ils sont vrais et à vous.

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
}

.card {
  border-radius: 1rem;
  padding: 1.5rem;
  background: linear-gradient(160deg, #161a2e 0%, #0f1222 100%);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.card img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

Les captures paraissent plus abouties quand elles reposent sur le même fond. Placez chacune sur le fond de votre hero avec un peu de marge plutôt que de montrer des captures brutes de navigateur de tailles différentes.

Des images Open Graph pour votre portfolio

Le lien de votre portfolio sera collé dans des candidatures, des messages de recruteurs, des canaux Slack et des posts. Chacun affiche l’image Open Graph, de 1200×630 pixels. Une carte vide ou une capture rognée annule le soin que vous avez mis dans le site. Faites-en une pour la page d’accueil et, si vous avez des pages de projet, une par projet dans la même mise en page. Les images OG dynamiques montrent comment les générer au build ; la taille d’une image Open Graph couvre les recadrages.

Écrire les sections à propos et contact

Gardez la section à propos à un court paragraphe à la première personne : ce que vous aimez construire, votre façon de travailler et ce que vous cherchez ensuite. Une phrase sur la vie hors du code est bienvenue ; une biographie complète, non. Terminez la page avec un moyen évident de vous joindre, en général une adresse e-mail écrite en entier, plus GitHub et LinkedIn. Un formulaire de contact ajoute de la friction pour un recruteur qui veut juste copier votre adresse dans un message. Si vous visez des postes proches du design, le personal branding vous aide à garder le site, le CV et les profils dans un seul style.

Les petits détails qui se lisent comme du goût

• Une seule famille de polices, deux graisses. Une bonne sans-serif pour tout, une police à chasse fixe pour le code seulement.
• Une longueur de ligne de 60 à 75 caractères pour le texte courant, pour que les paragraphes se lisent confortablement.
• Un vrai contraste : le texte courant doit respecter le niveau WCAG AA sur son fond.
• Un favicon assorti aux couleurs du hero.
• Un chargement rapide : le portfolio d’un développeur qui met quatre secondes à apparaître plaide de lui-même.
• Un thème sombre et un thème clair seulement si vous saurez bien maintenir les deux.

Si vous préférez ne pas dessiner à la main les images d’aperçu et les cadres de captures, Gradiently peut les créer sur un Mark, un fond dégradé vivant qui garde vos mots lisibles, et avec Pro redimensionner un design en aperçu de lien, post LinkedIn et en-tête X en une étape. Il peut aussi se connecter à ChatGPT et Claude : vous pouvez demander un jeu d’aperçus de projets pendant que vous rédigez vos études de cas.