# 5 blocchi per una pagina portfolio

Un portfolio deve far scrivere qualcuno, non esibire ogni progetto. Cinque categorie, la gallery che regge formati diversi, i guasti del masonry e i conteggi reali del catalogo.

> Pagina: https://ui.eneawork.it/blog/blocchi-per-portfolio
> Markdown: https://ui.eneawork.it/blog/blocchi-per-portfolio.md

*2026-10-31*

Un portfolio deve far scrivere qualcuno, non esibire ogni progetto realizzato. Il catalogo indicizza 51 blocchi hero, 4 gallery, 50 testimonial, 33 contact e 45 footer, letti il 2026-11-01: cinque categorie per una pagina portfolio.

I numeri vengono dalle pagine categoria pubbliche, misurati lo stesso giorno. Quattro blocchi gallery su 1.556 record sono il dato che cambia il piano: la parte visiva di un portfolio, quella che tutti guardano, è la meno coperta del catalogo.

## Cosa deve fare la pagina

Chi guarda un portfolio cerca una cosa sola: se il tuo lavoro somiglia a quello che deve commissionare. La pagina deve quindi mostrare tre progetti con un titolo che dice il problema risolto e un'immagine che si vede senza click. Il resto, dalla biografia al processo creativo, serve a chi ha già deciso di scriverti e va messo dopo.

## L'ordine dei blocchi

Hero, gallery, testimonial, contact, footer. Il testimonial dopo la gallery funziona perché arriva quando il visitatore ha già visto la qualità del lavoro e cerca conferma sul modo di lavorare. Il contatto sta prima del footer: chi arriva in fondo ha già deciso, e un form sepolto tra i link legali perde quel momento.

## I blocchi da cui partire

Le tabelle riportano blocco, registry, file e categoria. La gallery da 2 file è una griglia semplice con immagine principale: regge formati uguali, non misti. Il contact da 5 file include già i campi nome, email e messaggio, quindi il lavoro è nella validazione e nella conferma, non nel layout.

## Blocchi hero

## Blocchi gallery

## Blocchi testimonial

## Blocchi contact

## Cosa si rompe in produzione

Il guasto tipico è il masonry: le immagini arrivano senza dimensioni, la colonna si ricalcola a ogni caricamento e la pagina salta mentre il visitatore scorre. Il secondo è la gallery con formati misti, dove un progetto verticale accanto a uno orizzontale lascia un buco che nessun CSS riempie senza tagliare. Il terzo è il form che conferma senza aver inviato nulla.

curl "https://ui.eneawork.it/api/blocks/category/gallery?limit=5"

La risposta elenca le gallery disponibili con fonte e file: con quattro risultati la verifica è breve, e serve soprattutto a vedere quali prevedono più di una colonna. Se nessuna regge il formato che usi, la griglia si scrive con CSS grid e le immagini si ritagliano prima.

Scegli la gallery dal formato che hai in mano, non da quello che vorresti: se i progetti sono verticali, una griglia a tre colonne orizzontali ti costringe a tagliare il lavoro che stai mostrando.

## Un limite da dichiarare

Con 4 blocchi gallery, il catalogo non copre il caso più comune: progetti con proporzioni diverse nello stesso elenco. Le soluzioni pronte assumono tutte immagini uguali, quindi il masonry vero resta da scrivere e va testato su mobile, dove le colonne diventano una e l'ordine cambia.

Nel catalogo: hero portfolio, componenti e tutti i blocchi. Le guide: Flexbox e Grid per designer, hero misurati e UI kit o design system.

## FAQ

### Quanti progetti deve mostrare un portfolio in home?

Tre, scelti per varietà di problema e non per data. Il portfolio convince quando il visitatore pensa «questo ha già risolto il mio caso»; dieci progetti in griglia diluiscono quel pensiero e allungano la pagina fino al contatto.

### Perché ci sono solo quattro blocchi gallery?

Perché una gallery utile dipende dalle proporzioni delle immagini, che cambiano da progetto a progetto. I registry pubblicano griglie uniformi, facili da mostrare in vetrina; il masonry con formati misti richiede logica e nessuno lo regala.

### Meglio immagine singola o griglia per ogni progetto?

Una sola immagine forte per progetto, con il titolo accanto. Tre immagini piccole si leggono male e non dimostrano niente; una grande, scelta bene, dice subito di che lavoro si tratta e permette di decidere se aprire il caso.

### Il form di contatto o l'email in chiaro?

Entrambi, con l'email visibile e copiabile. Chi commissiona lavoro spesso scrive dal client di posta e non compila form; il form serve a chi vuole dare struttura al messaggio. Nascondere l'email dietro un bottone riduce i contatti senza ridurre lo spam.

### Come evito che la pagina salti mentre carica le immagini?

Con width, height o aspect-ratio su ogni immagine e un segnaposto della stessa proporzione. Il browser riserva lo spazio prima del download, quindi la griglia non si ricalcola e il visitatore non perde il punto in cui stava leggendo.