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

[Canonical HTML page](https://gradiently.design/fr/guide/developer-portfolio-design)

On juge un portfolio de développeur sur le code que vous liez et le soin visible que vous y mettez. Voici une structure, un fond de hero à copier, des cartes de projet qui se lisent vite et des aperçus de lien soignés.

## The short version

- Un bon portfolio de développeur a quatre parties : un hero court qui dit ce que vous construisez, trois à six cartes de projet, une brève section à propos et un moyen simple de vous contacter.
- Un fond de hero fait de dégradés CSS superposés se charge instantanément et montre du goût visuel sans image lourde.
- Chaque carte de projet doit énoncer le problème, ce que vous avez construit et le résultat, avec des liens vers le projet en ligne et le code.
- Une image Open Graph de 1200×630 donne un air soigné au lien de votre portfolio quand il est partagé dans des candidatures, des discussions et des posts.
- Moins de projets, mieux expliqués, font un portfolio plus fort qu’une longue grille de tutoriels.

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

| Section | Son rôle | À limiter à |
| --- | --- | --- |
| Hero | Votre nom et ce que vous construisez | Une ligne, une phrase d’appui |
| Projets | La preuve que vous savez livrer | Trois à six cartes |
| À propos | Votre façon de travailler, ce que vous voulez ensuite | Un court paragraphe |
| Articles ou conférences | Montre comment vous pensez (facultatif) | Trois liens |
| Contact | Facilite la suite | E-mail, GitHub, LinkedIn |

Une page suffit à la plupart des développeurs. Ajoutez des pages de projet seulement pour un travail qui mérite une histoire plus longue.

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](https://gradiently.design/fr/guide/hero-section-design) 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](https://gradiently.design/fr/guide/website-hero-background) et [le dégradé mesh en CSS](https://gradiently.design/fr/guide/css-mesh-gradient) vont plus loin.

Fond de hero indigo profond: `radial-gradient(ellipse at 20% 15%, #3b2a8f 0%, #0e1020 55%, #07080f 100%)`

La couche de base : un seul halo indigo qui se fond dans le presque noir. Assez calme pour du texte blanc n’importe où dessus.

```css
.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;
}
```

Un hero à deux halos en CSS simple. Gardez le halo le plus lumineux loin de l’endroit où se place le titre pour que les mots restent lisibles.

Si vous voulez du mouvement, animez lentement, gardez les mots fixes et respectez `prefers-reduced-motion` ; [la réduction des animations](https://gradiently.design/fr/guide/reduced-motion) explique comment. Un peu de grain par-dessus masque le banding des grands dégradés sombres, traité dans [la texture de bruit CSS](https://gradiently.design/fr/guide/css-noise-texture).

## 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.

### Carte faible

- « Appli météo » avec une capture d’écran
- Une liste de huit technologies
- Aucune idée de ce que vous avez fait vous-même
- Un lien de démo mort

### Carte forte

- « Rota : échanges de services pour un café »
- Le problème en une phrase
- Votre part et un résultat mesurable
- Un lien en ligne qui marche et un dépôt propre

```css
.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;
}
```

Une grille de cartes adaptative. Un rapport d’aspect d’image fixe garde chaque carte de la même forme même quand les captures diffèrent.

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](https://gradiently.design/fr/guide/dynamic-og-images) montrent comment les générer au build ; [la taille d’une image Open Graph](https://gradiently.design/fr/guide/open-graph-image-size) couvre les recadrages.

Une image Open Graph en paysage pour un portfolio de développeur avec le nom de la développeuse et une description en une ligne

L’aperçu de la page d’accueil : le nom et la ligne, rien d’autre.

Une image Open Graph assortie pour un projet de portfolio nommé Rota sur le même dégradé

Un aperçu de page de projet dans la même mise en page et sur le même fond.

## É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](https://gradiently.design/fr/guide/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.

## FAQ

### Que doit contenir un portfolio de développeur ?

Un hero d’une ligne sur ce que vous construisez, trois à six cartes de projet avec problème, solution et résultat, une courte section à propos et des liens de contact. Liez les projets en ligne et leur code.

### Combien de projets dans un portfolio de développeur ?

Trois à six projets bien expliqués valent mieux qu’une longue grille. Choisissez des travaux qui montrent le genre de poste que vous voulez ensuite.

### Quelle taille pour l’image Open Graph d’un portfolio ?

1200×630 pixels. Gardez le nom et la description en une ligne au centre pour que rien ne soit rogné dans les aperçus carrés.

### Un portfolio de développeur doit-il avoir un fond animé ?

Seulement s’il est discret, ne retarde pas la page et respecte les réglages de réduction des animations. Un dégradé CSS en couches offre le même soin pour un coût de performance quasi nul.