What to Put on Your Portfolio Website Homepage (Section by Section)

Your portfolio homepage is probably the most visited page on your site and the one people spend the least time thinking about. Most freelancers assemble it by feel — add a header, drop in some project thumbnails, maybe an about blurb — and then move on to obsessing over case study details or font choices.

The problem is that an unstructured homepage silently loses clients. Someone arrives, looks around for a few seconds, does not immediately understand what you do or why it matters to them, and leaves. No dramatic exit — just a closed tab and a missed opportunity.

A homepage is not a gallery. It is a conversation that starts with your most important point and walks a visitor toward a specific action. Every section either advances that conversation or clutters it. Here is what belongs, in what order, and why.

Section 1: The Hero

The hero — the content visible before anyone scrolls — is the most important real estate on your site. In three to five seconds, a visitor decides whether to keep reading or leave. That decision is made almost entirely based on what they see here.

A homepage hero needs three things:

Your name. Obvious, but worth stating. Surprisingly many portfolios bury the name in a small corner header or make it hard to find at all.

A positioning line. One sentence — sometimes two — that answers: what do you do, and who do you do it for? This is not your job title. "UX Designer" tells someone what you are. "I design onboarding flows for SaaS tools that reduce churn" tells them why they should care. The more specific, the better it works as a filter: it repels people who are not a fit and pulls in the ones who are.

One call to action. Not three — one. "See my work" or "Get in touch" or "View selected projects." The visitors who arrive at your hero are oriented. They do not need five links competing for their attention. Give them one clear next step.

What does not belong in the hero: your entire resumé, a lengthy paragraph, multiple competing CTAs, social icons, or animations that delay the content from appearing. Keep it fast and clear.

For detailed guidance on writing the positioning line itself, the portfolio headline examples guide has templates and worked examples across different disciplines.

Section 2: Selected Work

After the hero, a visitor who is still engaged wants proof. They need to see that your work is real, that it is good, and that it matches what they need.

Do not show everything. Show three to five projects — the ones that best represent the work you want more of. If you have twelve projects in your full portfolio, the homepage is not where all twelve live. It is where you feature the two or three that make the strongest first impression, with a link to see more.

What makes a good project thumbnail on the homepage:

• A strong, clear visual that shows the work (not a logo on a gray background)
• A title and a one-line description of what it is
• The client name or industry, if you can include it

Case studies and in-depth write-ups belong on individual project pages, not the homepage. A visitor scanning your homepage is in triage mode — they are deciding whether to go deeper, not ready to read a 1,200-word breakdown. Give them enough to decide to click.

Order your work deliberately. Most visitors scan from top left. Your single strongest project goes first.

Section 3: About Snippet

After someone has seen your positioning and your work, they want a quick read on who you are. This is not your full bio — it is a paragraph or two that adds a human layer to what they have already read.

Think of it as the short version of your about page. Three to four sentences covering: your background or specialization, the type of clients or projects you are drawn to, and something that communicates attitude or point of view. End it with a link to your full about page or bio.

The mistake most people make: writing this in third person, or writing it as a list of credentials. "John Smith is an award-winning designer with fifteen years of experience in brand strategy across Fortune 500 companies." That is a press release. Write it the way you would introduce yourself in an email: "I'm a brand designer based in Berlin. I work mostly with early-stage startups building their first visual identity — the moment where what a company stands for meets how it actually looks."

First person, specific, a little personality. That is the register you want.

The full guide to writing this copy is at how to write a bio for your website.

Section 4: Social Proof

One strong testimonial at the right moment does more work than anything else on the page. After someone has read your positioning, seen your work, and gotten a sense of who you are, a quote from a satisfied client lands differently than it would cold.

You do not need a full testimonials section here — a single quote, attributed clearly, with the client's name and company. Pick the one that is most specific: a quote that describes the experience of working with you and names a concrete outcome is worth ten times more than "great to work with, highly recommend."

If you have client logos — companies or brands you have worked with that the visitor might recognize — a subtle logo strip can work well here too. Do not overdo it. Logos without names or context can feel like wallpaper. Use them if they add genuine credibility, not just to fill space.

For a complete breakdown of how to get and place testimonials, read how to ask clients for testimonials.

Section 5: Services or "How I Work" (Optional but Often Worth Adding)

This section is not required, but it earns its place on homepages where visitors might not immediately know what to ask for.

If you offer a few defined services — brand identity, UX audit, website design — a brief list with one-sentence descriptions helps visitors self-identify as a potential client. "Oh, they do exactly that" is the reaction you are aiming for.

Keep it short: three to five items, each with a name and a single sentence of description. This is not a full services page. It is orientation — a way to make it obvious whether you are the right person for what they need. If you want to show pricing or packages, your services page is the better home for that detail. The should you list rates on your website guide covers when and how to do it.

Skip this section entirely if your work is self-evident from your project thumbnails — most visual designers, photographers, and illustrators do not need it.

Section 6: A Clear Call to Action

If someone has scrolled the full length of your homepage and is still reading, they are close to reaching out. Do not make them scroll back to the top.

End the page with a direct invitation. Not a footer. An actual section — a headline and a button or a direct email address. Something like:

"Working on something that needs a fresh set of eyes? I'd like to hear about it."
Get in touch → hello@yourname.com

Make the next step as frictionless as possible. A button that opens a form, a direct email address, a link to your contact page — any of these works. What does not work is ending the page with nothing and hoping visitors find the nav link.

The full guide to structuring your contact page — what to include and how to write it — is at how to write a contact page for your portfolio website.

What to Leave Off Your Homepage

A few things that commonly clutter portfolio homepages without adding value:

Every project you have ever done. Curate. The homepage is not an archive. More thumbnails does not mean more impressive — it usually means less focused.

An autobiography. Your full professional history belongs on your about page. The homepage about section should be a teaser that makes someone want to learn more, not the full story.

Multiple competing calls to action. "Hire me / See my work / Download my resume / Connect on LinkedIn / Subscribe to my newsletter" — this is analysis paralysis. One primary CTA per section.

Slow-loading video backgrounds or complex animations. Anything that delays when a visitor sees content costs you. Browse Awwwards for inspiration, but notice that the best-recognized sites are fast even when they look elaborate — the visual complexity is achieved without sacrificing load time.

Social media feeds. An embedded Instagram or Twitter feed sounds like it adds dynamism but in practice pulls attention away from your work and toward a feed you do not control.

Order Is the Strategy

The sequence matters as much as the individual sections. Think of the homepage as a logical path:

1. Who you are and what you do (hero) — answers the immediate question
2. Evidence that you do it well (selected work) — builds belief
3. Who you are as a person (about snippet) — builds trust
4. Proof from others (testimonial) — reduces risk
5. What you offer (services, optional) — clarifies fit
6. How to take the next step (CTA) — removes friction

Each section earns the right to the next one. A visitor who is not convinced by your hero section will not read your testimonials. A visitor who is not impressed by your work will not care about your process. The homepage works when every section answers the question a visitor would naturally have at that moment in the scroll.

Browse Dribbble's portfolio collection to see how leading creatives in your discipline structure their homepages — looking specifically at pacing, section order, and density of content per screen, not just visual style.

---

Building or rebuilding a homepage is easier when the structure does not require custom code to implement. mnml.page uses a block-based editor where each section above — hero, work samples, about snippet, testimonial, CTA — has a dedicated block you can reorder and configure without writing anything. The structure is already solved; the only thing you need to fill in is your own content.

A well-structured homepage will not substitute for good work. But good work on a poorly structured homepage will not get you hired either. Sort the structure first, then fill it with the best version of what you do.

Tools & Resources

• Awwwards — Curated collection of the web's best-designed sites. Filter by portfolio or agency sites to study how top-tier designers structure their homepages — useful for calibrating what great visual pacing looks like at a high level.

• Dribbble — Web Design Shots — Browse popular portfolio homepage designs in your discipline. Useful for studying thumbnail choices, hero section layouts, and what makes a project cover compelling enough to click.

• Portfolio Headline Examples — Templates and examples for writing the positioning line in your hero section — the one sentence that tells a visitor exactly who you are and who you work with.

• How to Ask Clients for Testimonials — A complete guide to requesting, improving, and placing testimonials on your portfolio — including which moments in the scroll they are most effective.

• mnml.page for Designers — A minimal portfolio builder with blocks for every section on this list. No design or development skills required — build a structured, fast-loading homepage in an afternoon.