Portfolio per sviluppatori: un sito che mostra gusto

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

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 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 e gradiente mesh in CSS vanno più a fondo.

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

Se vuoi del movimento, anima lentamente, tieni ferme le parole e rispetta prefers-reduced-motion; movimento ridotto spiega come. Un po’ di grana sopra nasconde il banding nei grandi gradienti scuri, come spiegato in texture di rumore CSS.

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.

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

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 mostra come generarle in fase di build; dimensioni dell’immagine Open Graph spiega i ritagli.

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