A portfolio has one reader with one question: can this person do the thing I need. Every section either answers it or delays it, and the most common failure is a site that is beautiful for thirty seconds and never says what the work was.
48 components on 21st carry the portfolio tag. Here are the sections that get replies.
The hero
Name, what you do, and the one thing you want them to do next. Portfolio Hero by wisedev is the direct version and Portfolio Hero with paper shaders by shadway is the atmospheric one.
The specific mistake to avoid: a hero that is only your name and a scroll indicator. A reader who arrived from a link needs to know within a second whether you are a motion designer, a backend engineer or an architect. "Product designer, currently at X, previously Y" costs one line and answers it.
The work
The section that decides everything. Portfolio Gallery by Isaiah, Portfolio and Image Gallery by iamsatish4564 and Glassmorphism Portfolio by Moumen Soliman are the grid shapes, and Music Portfolio by scott clayton is a discipline-specific one.
Three rules that matter more than the layout.
Six pieces, not twenty. A portfolio is judged by its weakest item, not its average. Cut anything you would have to explain.
Say what you did. "Redesigned onboarding, sign-up completion went from 34% to 51%" is a portfolio entry. A screenshot with a project name is a mood board.
Name the constraint. The team size, the timeline, what was already there. Work done in four days with no design system reads differently from the same screens done in four months, and only one of those is impressive.
The case study
One project, in depth, is worth more than nine thumbnails. The structure that works is the same one every landing page uses: the problem, what you did, what happened. Numbers where you have them, honest gaps where you do not.
If the work is under NDA, describe the problem and the approach without the client's name. "A logistics company" and a real explanation beats a blurred screenshot.
The contact
Almost every portfolio makes this harder than it needs to be. A form that goes nowhere visible, an email hidden behind three clicks, or a "let's talk" button that opens a scheduling tool with no availability for three weeks.
A visible email address, as text, is still the highest-converting contact method on a portfolio. Add the form if you like, but never make the address the thing behind it.
The technical part, which is the actual test
For an engineer or a design engineer, the portfolio is the work. Three things get checked whether you intend them to or not.
Load time. A portfolio that takes six seconds because of a full-screen video says more about your judgement than the case study does. The gallery guide covers the image rules, and they are most of it.
The metadata. A shared link with no title, no description and no image looks careless in exactly the place you are being judged for care.
Whether it reads. Contrast, focus states, keyboard navigation, reduced motion. A hiring manager will not audit it, but a designer looking at your work will notice a focus ring you removed.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| Templates | A whole portfolio site, already structured | Someone else's structure, and it may look familiar |
| A hosted portfolio platform | Shipping today with no code at all | Everyone's looks related, which matters here more than elsewhere |
| Components | Building the sections yourself | You are assembling and deciding |
| 21st | Portfolio heroes, galleries and discipline-specific blocks | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a portfolio section, get the previews inline, and let the agent write the file.
Frequently asked
- How many projects should a portfolio show?
- About six. A portfolio is judged by its weakest item rather than its average, so cut anything that needs explaining. Depth beats breadth: one project written up properly, with the problem, what you did and what happened, is worth more than nine thumbnails.
- What makes a portfolio entry work?
- Saying what you did and what changed. Redesigned onboarding, completion went from 34% to 51% is an entry; a screenshot with a project name is a mood board. Name the constraint too, since work done in four days with no design system reads differently from the same screens over four months.
- What should a portfolio hero say?
- Name, discipline, and the next action, within a second. A hero that is only a name and a scroll indicator makes a reader who arrived from a link guess whether you are a motion designer or a backend engineer. One line of role, current company and previous answers it.
- Does portfolio performance matter?
- For engineers and design engineers it is the work sample. A site that takes six seconds because of a full-screen video says more about judgement than the case study does, and the same goes for missing link metadata, removed focus rings and contrast that fails. The people reading it notice those specifically.