Blocks
5 blocks for a portfolio page
A portfolio has to make someone write, not display every project. Five categories, the gallery that holds mixed formats, the masonry faults and the real catalogue counts.
Key points
- Pick the gallery by the image format you actually hold.
- Four gallery blocks: masonry gets written or adapted.
- The contact step goes before the footer, not inside it.
A portfolio has to make someone write, not display every project ever made. The catalogue indexes 51 hero blocks, 4 gallery, 50 testimonial, 33 contact and 45 footer, read on 2026-11-01: five categories for a portfolio page.
The numbers come from the public category pages, measured on the same day. Four gallery blocks out of 1.556 records are the fact that changes the plan: the visual part of a portfolio, the one everyone looks at, is the least covered in the catalogue.
What the page has to do
Whoever looks at a portfolio checks one thing: whether your work resembles what they need to commission. The page should therefore show three projects with a title that names the solved problem and an image visible without a click. The rest, from the biography to the creative process, serves whoever has already decided to write, and goes after.
- Three featured projects, not twenty in a grid.
- One title per project that names the problem, not “Project 04”.
- Images with coherent proportions across the set.
- A contact step with a plain email address, beyond the form.
The order of the blocks
| Section | Role on the page | Blocks available |
|---|---|---|
| hero | say who you are and what you do | 51 |
| gallery | show the work without filters | 4 |
| testimonial | give voice to whoever paid | 50 |
| contact | open a conversation | 33 |
| footer | close with contacts and notes | 45 |
Hero, gallery, testimonial, contact, footer. The testimonial after the gallery works because it arrives once the visitor has seen the quality of the work and looks for confirmation about the way you work. Contact sits before the footer: whoever reaches the bottom has already decided, and a form buried among legal links loses that moment.
The blocks to start from
The tables list block, registry, files and category. The 2-file gallery is a simple grid with a main image: it holds equal formats, not mixed ones. The 5-file contact already includes name, email and message fields, so the work sits in validation and confirmation, not in layout.
Hero blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Hero 01 - Agency Hero Section | Shadcn Space | 8 | hero |
| Hero 02 - Real Estate Hero Section | Shadcn Space | 6 | hero |
Gallery blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Gallery 01 - Image Gallery Section | Shadcn Space | 2 | gallery |
| Gallery Grid with Lightbox | uitripled | 1 | gallery |
Testimonial blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Testimonial 02 - Testimonial Slider Showcase | Shadcn Space | 5 | testimonial |
| Feature 01 - Feature with Testimonials | Shadcn Space | 3 | feature |
Contact blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Contact 01 - Project Inquiry Contact Form | Shadcn Space | 5 | contact |
| Contact section | 1st-pouf | 1 | contact |
What breaks in production
The usual fault is masonry: images arrive without dimensions, the column recalculates on every load and the page jumps while the visitor scrolls. The second is a gallery with mixed formats, where a vertical project next to a horizontal one leaves a hole no CSS fills without cropping. The third is the form that confirms without having sent anything.
- Masonry without width and height: layout jumps on every image.
- Mixed formats without a fixed ratio: holes in the grid.
- A form showing “thanks” without calling the endpoint.
- Email only inside an image: it cannot be copied.
curl "https://ui.eneawork.it/api/blocks/category/gallery?limit=5"The response lists the available galleries with source and files: with four results the check is short, and it mainly shows which ones support more than one column. If none holds the format you use, the grid gets written with CSS grid and the images are cropped beforehand.
A limit to declare
With 4 gallery blocks, the catalogue misses the most common case: projects with different proportions in one list. Every ready solution assumes identical images, so real masonry stays to be written and tested on mobile, where columns become one and order changes.
In the catalogue: portfolio hero, components and all blocks. The guides: Flexbox and Grid for designers, measured heroes and UI kit or design system.
Frequently asked questions
How many projects should a portfolio home page show?
Three, chosen for variety of problem rather than date. A portfolio convinces when the visitor thinks “this person already solved my case”; ten projects in a grid dilute that thought and stretch the page up to the contact step.
Why are there only four gallery blocks?
Because a useful gallery depends on image proportions, which change from project to project. Registries publish uniform grids, easy to show in a showcase; masonry with mixed formats needs logic and nobody gives it away.
Is a single image better than a grid for each project?
One strong image per project, with the title beside it. Three small images read badly and prove nothing; one large, well-chosen image says at once what the work is and lets people decide whether to open the case.
Contact form or plain email address?
Both, with the address visible and copyable. People who commission work often write from a mail client and skip forms; the form serves whoever wants structure. Hiding the address behind a button cuts enquiries without cutting spam.
How do I stop the page jumping while images load?
With width, height or aspect-ratio on every image plus a placeholder of the same proportion. The browser reserves space before download, so the grid does not recalculate and the visitor does not lose their reading position.