# Portfolio per sviluppatori: un sito che mostra gusto

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

Un portfolio da sviluppatore si giudica dal codice che colleghi e dalla cura che si vede. Ecco una struttura, uno sfondo hero da incollare, schede progetto veloci da leggere e anteprime dei link rifinite.

## The short version

- Un buon portfolio da sviluppatore ha quattro parti: un hero breve che dice cosa costruisci, da tre a sei schede progetto, una breve sezione su di te e un modo semplice per contattarti.
- Uno sfondo hero fatto con gradienti CSS sovrapposti si carica all’istante e mostra gusto visivo senza un’immagine pesante.
- Ogni scheda progetto dovrebbe indicare il problema, ciò che hai costruito e il risultato, con link al progetto online e al codice.
- Un’immagine Open Graph 1200×630 rende curato il link del tuo portfolio quando viene condiviso in candidature, chat e post social.
- Pochi progetti spiegati bene rendono un portfolio più forte di una lunga griglia di tutorial.

Un buon **portfolio da sviluppatore** è un sito piccolo e veloce in quattro parti: un hero che dice in una riga cosa costruisci, da tre a sei schede progetto che spiegano il problema e il tuo ruolo nel risolverlo, una breve sezione su di te e un link di contatto. Il gusto si vede nei dettagli: uno sfondo hero calmo, schede coerenti, tipografia leggibile e un’anteprima del link curata quando un recruiter incolla il tuo URL in un canale di selezione. Non serve una vetrina di framework. Serve una pagina evidentemente curata.

## La struttura di un portfolio da sviluppatore

| Sezione | Cosa fa | Da limitare a |
| --- | --- | --- |
| Hero | Il tuo nome e ciò che costruisci | Una riga, una frase di supporto |
| Progetti | La prova che sai consegnare | Da tre a sei schede |
| Chi sono | Come lavori, cosa vuoi fare dopo | Un breve paragrafo |
| Articoli o interventi | Mostra come ragioni (facoltativo) | Tre link |
| Contatti | Rende facile il passo successivo | Email, GitHub, LinkedIn |

Per la maggior parte degli sviluppatori basta una pagina. Aggiungi pagine progetto solo per lavori che meritano una storia più lunga.

Di’ cosa costruisci, non cosa sei. «Realizzo checkout veloci per negozi online» dice al lettore più di «Sviluppatore full stack». Se sei all’inizio, «Realizzo web app accessibili con React e Postgres» è onesto e specifico. [Design della sezione hero](https://gradiently.design/it/guide/hero-section-design) approfondisce come scrivere quella prima riga.

## Uno sfondo hero che mostra gusto

Molti portfolio usano una pagina bianca piatta oppure uno sfondo animato pesante che rallenta tutto il resto. Una via di mezzo è un gradiente CSS a strati: due o tre aloni radiali morbidi su un fondo scuro o chiaro. Sono poche righe di codice, non costano nulla in rete e hanno comunque un aspetto curato. [Sfondo hero di un sito](https://gradiently.design/it/guide/website-hero-background) e [gradiente mesh in CSS](https://gradiently.design/it/guide/css-mesh-gradient) vanno più a fondo.

Fondo hero indaco profondo: `radial-gradient(ellipse at 20% 15%, #3b2a8f 0%, #0e1020 55%, #07080f 100%)`

Lo strato di base: un solo alone indaco che sfuma in un nero quasi pieno. Abbastanza calmo da ospitare testo bianco ovunque.

```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 a due aloni in puro CSS. Tieni l’alone più luminoso lontano da dove sta il titolo, così le parole restano leggibili.

Se vuoi del movimento, anima lentamente, tieni ferme le parole e rispetta `prefers-reduced-motion`; [movimento ridotto](https://gradiently.design/it/guide/reduced-motion) spiega come. Un po’ di grana sopra nasconde il banding nei grandi gradienti scuri, come spiegato in [texture di rumore CSS](https://gradiently.design/it/guide/css-noise-texture).

## Schede progetto che spiegano l’impatto

Una scheda progetto ha pochi secondi per giustificare un clic. Dai a ciascuna le stesse quattro parti: un titolo, il problema in una frase, ciò che hai costruito e l’esito, poi i link al progetto online e al codice. I risultati non devono essere clamorosi. «Usato ogni giorno dal nostro team di 30 persone» o «Tempo di caricamento ridotto da 4 s a 1,2 s» vanno bene se sono veri e tuoi.

### Scheda debole

- «App meteo» con uno screenshot
- Un elenco di otto tecnologie
- Nessuna idea di cosa hai fatto tu
- Un link demo non funzionante

### Scheda forte

- «Rota: scambi di turno per un team di un caffè»
- Il problema in una frase
- Il tuo ruolo e un risultato misurabile
- Un link online funzionante e un repository in ordine

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

Una griglia di schede responsive. Un rapporto d’aspetto fisso per l’immagine mantiene ogni scheda della stessa forma anche quando gli screenshot cambiano.

Gli screenshot appaiono più rifiniti quando poggiano sullo stesso sfondo. Mettili ciascuno sul fondo del tuo hero con un po’ di margine, invece di mostrare catture grezze del browser di misure diverse.

## Immagini Open Graph per il tuo portfolio

Il link del tuo portfolio verrà incollato in candidature, messaggi di recruiter, canali Slack e post social. In tutti questi casi compare l’**immagine Open Graph**, da 1200×630 pixel. Una scheda vuota o uno screenshot tagliato annulla la cura messa nel sito. Creane una per la home e, se hai pagine progetto, una per ciascun progetto con lo stesso layout. [Immagini OG dinamiche](https://gradiently.design/it/guide/dynamic-og-images) mostra come generarle in fase di build; [dimensioni dell’immagine Open Graph](https://gradiently.design/it/guide/open-graph-image-size) spiega i ritagli.

Un’immagine Open Graph orizzontale per il portfolio di una sviluppatrice, con il suo nome e una descrizione di una riga

L’anteprima della home: il nome e la riga di presentazione, nient’altro.

Un’immagine Open Graph coordinata per un progetto del portfolio chiamato Rota, sullo stesso gradiente

L’anteprima di una pagina progetto con lo stesso layout e lo stesso sfondo.

## Scrivere le sezioni chi sono e contatti

Mantieni la sezione su di te in un breve paragrafo in prima persona: cosa ti piace costruire, come ti piace lavorare e cosa cerchi dopo. Una frase sulla vita fuori dal codice va bene; una biografia completa no. Chiudi la pagina con un modo evidente per raggiungerti, di solito un indirizzo email scritto per esteso, più GitHub e LinkedIn. Un modulo di contatto aggiunge attrito per un recruiter che vuole solo copiare il tuo indirizzo in un messaggio. Se ti candidi per ruoli vicini al design, il [personal branding](https://gradiently.design/it/guide/personal-branding) ti aiuta a tenere sito, CV e profili nello stesso stile.

## Piccoli dettagli che sanno di gusto

- **Una sola famiglia di caratteri**, in due pesi. Un buon sans per tutto, un monospace solo per il codice.
- **Una lunghezza di riga da 60 a 75 caratteri** per il testo, così i paragrafi si leggono comodamente.
- **Contrasto reale**: il testo deve superare il livello WCAG AA rispetto al suo sfondo.
- **Una favicon** in tinta con i colori dell’hero.
- **Caricamento rapido**: il portfolio di uno sviluppatore che impiega quattro secondi ad apparire è già un argomento contro di lui.
- **Un tema scuro e uno chiaro** solo se saprai mantenerli entrambi come si deve.

Se preferisci non disegnare a mano le immagini di anteprima e le cornici degli screenshot, Gradiently può crearle su un Mark, uno sfondo a gradiente vivo che mantiene leggibili le tue parole, e con Pro ridimensiona un design per l’anteprima del link, per un post LinkedIn e per un’intestazione X in un solo passaggio. Si può anche collegare a ChatGPT e Claude, così puoi chiedere una serie di anteprime dei progetti mentre scrivi i casi di studio.

## FAQ

### Cosa deve includere un portfolio da sviluppatore?

Un hero di una riga su ciò che costruisci, da tre a sei schede progetto con problema, soluzione e risultato, una breve sezione su di te e i link di contatto. Collega i progetti online e il loro codice.

### Quanti progetti deve avere un portfolio da sviluppatore?

Da tre a sei progetti ben spiegati valgono più di una lunga griglia. Scegli lavori che mostrino il tipo di impiego che vuoi ottenere dopo.

### Che dimensione deve avere l’immagine Open Graph di un portfolio?

1200×630 pixel. Tieni il nome e la descrizione di una riga al centro, così nulla viene tagliato nelle anteprime quadrate.

### Un portfolio da sviluppatore deve avere uno sfondo animato?

Solo se è sottile, non ritarda la pagina e rispetta le impostazioni di movimento ridotto. Un gradiente CSS a strati dà la stessa finitura con un costo di prestazioni quasi nullo.