Blocks
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.
In sintesi
- La gallery si sceglie dal formato delle immagini che hai davvero.
- Quattro blocchi gallery: il masonry va scritto o adattato.
- Il contatto va prima del footer, non dentro.
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.
- Tre progetti in evidenza, non venti in griglia.
- Un titolo per progetto che dice il problema, non «Progetto 04».
- Immagini con proporzioni coerenti tra loro.
- Un contatto con email in chiaro, oltre al form.
L'ordine dei blocchi
| Sezione | Ruolo nella pagina | Blocchi disponibili |
|---|---|---|
| hero | dire chi sei e cosa fai | 51 |
| gallery | mostrare il lavoro senza filtri | 4 |
| testimonial | dare voce a chi ha pagato | 50 |
| contact | aprire una conversazione | 33 |
| footer | chiudere con contatti e note | 45 |
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
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Hero 01 - Agency Hero Section | Shadcn Space | 8 | hero |
| Hero 02 - Real Estate Hero Section | Shadcn Space | 6 | hero |
Blocchi gallery
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Gallery 01 - Image Gallery Section | Shadcn Space | 2 | gallery |
| Gallery Grid with Lightbox | uitripled | 1 | gallery |
Blocchi testimonial
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Testimonial 02 - Testimonial Slider Showcase | Shadcn Space | 5 | testimonial |
| Feature 01 - Feature with Testimonials | Shadcn Space | 3 | feature |
Blocchi contact
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Contact 01 - Project Inquiry Contact Form | Shadcn Space | 5 | contact |
| Contact section | 1st-pouf | 1 | 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.
- Masonry senza width e height: salti di layout a ogni immagine.
- Formati misti senza rapporto fisso: buchi nella griglia.
- Form che mostra «grazie» senza chiamare l'endpoint.
- Email solo dentro un'immagine: non si può copiare.
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.
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.
Domande frequenti
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.