Website Examples
Portfolio Website Examples
Real portfolio website examples for developers, designers, illustrators, and photographers.
A portfolio website is a site built around a body of work: a designer's projects, a developer's apps, a photographer's photos, an illustrator's drawings, a filmmaker's films. Where a personal website presents the person, a portfolio presents the output. Its job is to convince a visitor — a client, a studio, an employer — that you are good enough to hire, and to make saying yes easy. This page collects portfolio website examples and breaks down what each one does with its homepage structure, hero, navigation, calls to action, and trust signals, so you can borrow the patterns for your own site. It is part of the website examples library.
Portfolios vary by discipline, but the patterns repeat. Instead of a long article, here are the examples — grouped by who builds them — plus the anatomy of a portfolio homepage and a case-study page, good vs weak patterns, and a copyable plan you can fill in.
What is a portfolio website?
A portfolio website exists to make a body of work easy to judge quickly. Its structure follows one question: can the visitor see the best of what you make in under a minute? Everything else — the about page, the contact form, the blog — supports that.
What the site shows depends on the discipline:
- Developers — open-source projects, deployed apps, and write-ups that explain the hard parts
- Designers — case studies that tell the story of a project from problem to outcome
- Photographers and filmmakers — large image and video galleries organized by body of work
- Illustrators and artists — a gallery plus a shop, commissions info, and process sketches
- Students and new graduates — coursework, internships, and a few finished projects that stand in for a work history
Most portfolios mix a gallery with a few case studies: the gallery proves range, the case studies prove depth.
Portfolio vs personal vs business vs ecommerce
| Type | Primary job | Typical visitor action | Example |
|---|---|---|---|
| Portfolio website | Showcase a body of work | View work, hire | This page |
| Personal website | Present one person | Contact, follow, hire | Personal examples |
| Business website | Explain a company and generate leads | Call, book, request a quote | Business examples |
| Ecommerce website | Sell products online | Add to cart, check out | Ecommerce examples |
A portfolio and a personal website overlap heavily: every portfolio is personal, but not every personal site is a portfolio. The dividing line is emphasis. A portfolio leads with the work and makes hiring the goal; a personal site can lead with the person and make following the goal. If your site is built around one person more than one body of work, the personal website examples page is the better match.
The anatomy of a portfolio homepage
Portfolio homepages differ in style far more than in skeleton. The mockup below shows the sections most of them reuse in some order: a header, a hero that says who you are and what you make, a selected-work grid, a short about, a contact call, and a footer. It uses a fictional person, Ari Kim, so nothing here measures a real person.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ari Kim — Visual designer</title>
<style>
:root { --accent: #b45309; --ink: #1f2430; --muted: #6b7280; --line: #e5e7eb; --bg: #fffdf8; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); }
header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.name { font-weight: 800; letter-spacing: -0.02em; }
nav a { margin-left: 18px; color: var(--ink); text-decoration: none; font-size: 14px; }
.hire { background: var(--accent); color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.hero { max-width: 880px; margin: 0 auto; padding: 72px 24px 40px; }
h1 { font-size: 42px; letter-spacing: -0.03em; margin: 0 0 8px; }
.role { font-size: 20px; font-weight: 600; color: var(--accent); margin: 0 0 14px; }
.intro { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 0 24px; max-width: 52ch; }
.actions a { display: inline-block; margin-right: 12px; }
.cta { background: var(--accent); color: #fff; padding: 12px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.ghost { border: 1px solid var(--line); color: var(--ink); padding: 12px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; }
section { max-width: 880px; margin: 0 auto; padding: 48px 24px; }
h2 { font-size: 24px; margin: 0 0 4px; letter-spacing: -0.01em; }
.sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.thumb { background: #f3ead9; height: 150px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.card h3 { font-size: 16px; margin: 12px 14px 2px; }
.card p { margin: 0 14px 12px; font-size: 13px; color: var(--muted); }
.about { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: start; }
.photo { width: 110px; height: 110px; border-radius: 50%; background: #f3ead9; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.contact { text-align: center; background: var(--ink); color: #fff; border-radius: 12px; padding: 48px 24px; max-width: 880px; margin: 0 auto; }
.contact a { background: var(--accent); color: #fff; padding: 12px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; }
footer { text-align: center; padding: 24px; font-size: 13px; color: var(--muted); }
footer a { color: var(--muted); margin: 0 8px; }
@media (max-width: 760px) {
.grid { grid-template-columns: 1fr; }
nav { display: none; }
.hero { padding: 48px 20px 28px; }
h1 { font-size: 34px; }
}
</style>
</head>
<body>
<header>
<span class="name">Ari Kim</span>
<nav>
<a href="#work">Work</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<a class="hire" href="mailto:hello@arikim.example">Hire me</a>
</header>
<div class="hero">
<h1>I'm Ari Kim</h1>
<p class="role">Visual & brand designer</p>
<p class="intro">I help startups and studios look like themselves — with identities, web design, and art direction that hold up across a screen and a street corner.</p>
<div class="actions">
<a class="cta" href="#work">See my work</a>
<a class="ghost" href="mailto:hello@arikim.example">Email me</a>
</div>
</div>
<section id="work">
<h2>Selected work</h2>
<p class="sub">A few projects that show how I think</p>
<div class="grid">
<div class="card"><div class="thumb">Project</div><h3>Northwind</h3><p>Brand identity, 2026</p></div>
<div class="card"><div class="thumb">Project</div><h3>Ledger</h3><p>Web design, 2025</p></div>
<div class="card"><div class="thumb">Project</div><h3>Compass</h3><p>Art direction, 2025</p></div>
</div>
</section>
<section id="about">
<h2>About</h2>
<div class="about">
<div class="photo">Photo</div>
<div>
<p>I've been designing identities and interfaces for eight years, mostly for climate, education, and developer-tooling companies. I like strong typography, generous whitespace, and work that gets out of the way of the people using it.</p>
<p><a href="mailto:hello@arikim.example">Get in touch</a> — I take a few freelance projects a year.</p>
</div>
</div>
</section>
<div class="contact">
<h2>Let's make something worth looking at</h2>
<p style="color:#cbd5e1">Available for select projects this quarter.</p>
<a href="mailto:hello@arikim.example">Start a project</a>
</div>
<footer>
<a href="https://dribbble.com">Dribbble</a>
<a href="https://www.behance.net">Behance</a>
<a href="https://www.linkedin.com">LinkedIn</a>
<span>© 2026 Ari Kim</span>
</footer>
</body>
</html>
The sections in order:
- Header — name, a few links, and a persistent "Hire me" action
- Hero — who you are, what you make, and one clear next step
- Selected work — three to six project cards; the gallery that proves range
- About — a few sentences and a real photo
- Contact call — a repeat of the main action near the end
- Footer — portfolio platform links and a copyright line
The two patterns worth studying hardest are the selected-work grid — the first thing a visitor judges — and the case study, the page that proves you can do more than make thumbnails. For the wireframe version of this skeleton, see the website wireframe example page; if you plan to build the page by hand, the HTML website example page shows the file structure.
The anatomy of a portfolio case-study page
The gallery wins the click; the case study wins the job. A case study is the page where a single project is unpacked: the problem, your role, the process, and the outcome. The same fictional person is shown below so you can compare the case-study layout with the homepage anatomy above.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Northwind — Case study | Ari Kim</title>
<style>
:root { --accent: #b45309; --ink: #1f2430; --muted: #6b7280; --line: #e5e7eb; --bg: #fff; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); }
header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.name { font-weight: 800; letter-spacing: -0.02em; }
nav a { margin-left: 18px; color: var(--ink); text-decoration: none; font-size: 14px; }
.page { max-width: 720px; margin: 0 auto; padding: 56px 24px 24px; }
.back { font-size: 14px; color: var(--muted); text-decoration: none; }
h1 { font-size: 38px; letter-spacing: -0.03em; margin: 12px 0 10px; }
.meta { font-size: 14px; color: var(--muted); margin: 0 0 32px; }
.meta span { display: inline-block; margin-right: 18px; }
.hero-img { background: #f3ead9; height: 260px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--muted); margin-bottom: 40px; }
section { margin-bottom: 32px; }
h2 { font-size: 20px; margin: 0 0 10px; }
p { line-height: 1.7; color: #374151; margin: 0 0 14px; }
.role-list { padding-left: 18px; color: #374151; }
.role-list li { margin-bottom: 6px; }
.step { border-left: 3px solid var(--accent); padding-left: 16px; margin-bottom: 18px; }
.step h3 { font-size: 16px; margin: 0 0 4px; }
.step p { margin: 0; font-size: 15px; }
.next { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; font-size: 15px; }
.next a { color: var(--accent); text-decoration: none; font-weight: 600; }
</style>
</head>
<body>
<header>
<span class="name">Ari Kim</span>
<nav>
<a href="#work">Work</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<div class="page">
<a class="back" href="#work">← All work</a>
<h1>Northwind — a brand that maps a whole company</h1>
<p class="meta">
<span>Client: Northwind</span>
<span>Role: Brand identity, art direction</span>
<span>Year: 2026</span>
</p>
<div class="hero-img">Project hero image</div>
<section>
<h2>Overview</h2>
<p>Northwind had grown from a two-person shop into a company of thirty, and its visual identity still looked like the two-person shop. The brief was to give the company a brand that could scale across product, marketing, and recruiting — without losing the handmade character people liked.</p>
</section>
<section>
<h2>My role</h2>
<ul class="role-list">
<li>Led the identity redesign from research to delivery</li>
<li>Designed the wordmark, color system, and type pairing</li>
<li>Built the logo and brand usage guidelines</li>
</ul>
</section>
<section>
<h2>Process</h2>
<div class="step"><h3>01 · Research</h3><p>Interviewed customers and the founding team about what the company stands for, and audited every place the old brand appeared.</p></div>
<div class="step"><h3>02 · Direction</h3><p>Tested three visual directions with internal stakeholders and picked the one that read as both capable and warm.</p></div>
<div class="step"><h3>03 · Design</h3><p>Built the system in a design tool, then applied it to the website, pitch deck, and hiring page as a proof of scale.</p></div>
<div class="step"><h3>04 · Handoff</h3><p>Delivered a usage guide so the team could apply the brand without the designer in the room.</p></div>
</section>
<section>
<h2>Outcome</h2>
<p>The company now has a single system it can apply itself, and the new identity gives the team something to rally behind. Full metrics are confidential to the client.</p>
</section>
<div class="next">
<a href="#work">← Previous project</a>
<a href="#work">Next project →</a>
</div>
</div>
</body>
</html>
The case-study sections in order:
- Back link — keeps the visitor inside the portfolio
- Title and meta — project name, client, your role, and year, so the visitor can judge fit fast
- Hero image — the single most representative visual
- Overview — the problem in plain language
- My role — what you personally did (vital when you worked in a team)
- Process — the steps, shown briefly; this is what proves depth
- Outcome — what changed, stated honestly without invented metrics
- Next project — a path onward, so the visitor keeps browsing
The meta line matters more than it looks: a hiring person wants to know your role in a project at a glance. If you claim a project, name what you did in it.
Portfolio website examples by type
The real examples below are people with public portfolio websites, and each card is limited to what is publicly observable on the site: structure, navigation, CTA text, and trust signals. Nothing here states traffic, revenue, or business results. Where no single well-known site fairly represents a type, it is shown as a clearly labelled illustrative pattern.
Developers and engineers
Alvaro Trigo — alvarotrigo.com
| Field | Observation |
|---|---|
| Type | Developer portfolio built around open source |
| Primary goal | Show open-source work and be hired for freelance and plugin work |
| Homepage structure | Single scrolling page: hero → open-source project cards → about → podcasts → "what I use" → photos → contact form |
| Hero pattern | Name, one-line role, and a GitHub presence rather than a photo |
| Navigation | Projects, About, Blog, Photos, Contact |
| Primary CTA | A contact form at the end of the page |
| Trust signals | Widely-used open-source libraries, podcast appearances, and a detailed project list |
| Notable UX pattern | Each open-source project gets a card with a one-line description, then a full detail page |
| What to learn | When your code is the product, the portfolio is the project list; let the work itself be the proof |
Sara Soueidan — sarasoueidan.com
| Field | Observation |
|---|---|
| Type | Front-end developer and educator portfolio |
| Primary goal | Build an audience, promote a course, and win speaking and consulting work |
| Homepage structure | Hero → latest blog articles → notable updates → newsletter → about and endorsements |
| Hero pattern | Name and a plain-spoken introduction of what she does |
| Navigation | Blog, Newsletter, Speaking, Course, About |
| Primary CTA | Newsletter signup |
| Trust signals | A long writing archive, a published course, and an endorsements page |
| Notable UX pattern | Text-first and content-led; the writing is the portfolio |
| What to learn | A developer portfolio can be built on writing and teaching; deep content outranks a thin gallery |
Tania Rascia — taniarascia.com
| Field | Observation |
|---|---|
| Type | Software engineer and open-source creator site |
| Primary goal | Share a digital garden of writing and document open-source projects |
| Homepage structure | Hero → a timeline-style about → guide and article sections → project cards |
| Hero pattern | Name, one-line role, and a friendly personal note |
| Navigation | Blog, Projects, About, plus a color theme switcher |
| Primary CTA | Email signup and links to GitHub |
| Trust signals | A large writing archive, open-source projects, and a public career timeline |
| Notable UX pattern | Every project card links out to article, demo, and source, so each piece of work is verifiable |
| What to learn | Giving each project a demo and source link turns a claim into something a visitor can check |
Designers, makers, and studios
Rob Hope — robhope.com
| Field | Observation |
|---|---|
| Type | Designer and maker portfolio |
| Primary goal | Show products, projects, and podcast work and drive people to his sites |
| Homepage structure | Hero → current focus → project cards → recent blog posts → about |
| Hero pattern | Name and a personality-led one-liner ("Maker. Surfer. Optimist.") |
| Navigation | Home, Blog, Projects |
| Primary CTA | Links into projects, the podcast, and the blog |
| Trust signals | A long-running design site, a podcast, and published courses |
| Notable UX pattern | Project cards group work by category so the page reads as a résumé of side projects |
| What to learn | A portfolio can be a running list of everything you ship; breadth of making is its own credential |
Jack McDade — jackmcdade.com
| Field | Observation |
|---|---|
| Type | Designer-developer portfolio |
| Primary goal | Promote a design course and a CMS, and share a distinctive personality |
| Homepage structure | Hero → about → a promoted course → recent articles → personal interests → footer |
| Hero pattern | A memorable, voice-led statement ("I'm tired of boring websites.") |
| Navigation | Course, Statamic, Articles, Design Work, Connect |
| Primary CTA | Explore the course |
| Trust signals | A well-known open-source CMS, a course, and a long-running site |
| Notable UX pattern | Humor and personality are the design; the site proves its own claims about not being boring |
| What to learn | Voice is a legitimate portfolio asset; a site that demonstrates its own philosophy is memorable |
Mike Kus — mikekus.com
| Field | Observation |
|---|---|
| Type | Designer studio portfolio |
| Primary goal | Win branding and web design clients |
| Homepage structure | Header → hero tagline → selected project cards → clients → services → testimonial → footer |
| Hero pattern | A confident one-line positioning statement |
| Navigation | Work, About, Contact, plus a photo book |
| Primary CTA | "View our work" and a contact path |
| Trust signals | Named clients, a testimonial, and a clear service list |
| Notable UX pattern | Work is shown as a tight set of project cards rather than a long gallery |
| What to learn | Curation beats volume: a few strong projects positioned with a clear offer outperform a crowded gallery |
Illustrators and artists
Gemma Correll — gemmacorrell.com
| Field | Observation |
|---|---|
| Type | Illustrator and artist portfolio |
| Primary goal | Show illustration and comics work and sell products |
| Homepage structure | Featured projects → shop categories (comics, product design, books, illustration) → newsletter |
| Hero pattern | Featured work and exhibitions rather than a personal statement |
| Navigation | Books, Comics, Illustration, Products, Shop, About |
| Primary CTA | Shop and newsletter signup |
| Trust signals | Published books, exhibitions, and a recognizable illustration style |
| Notable UX pattern | The portfolio doubles as a storefront: gallery and shop are one system |
| What to learn | An artist portfolio can sell work directly; a distinctive style is both the brand and the inventory |
Photographers and filmmakers
Alex Strohl — alexstrohl.com
| Field | Observation |
|---|---|
| Type | Photographer and filmmaker portfolio |
| Primary goal | Show a body of photographic work and book commercial and editorial clients |
| Homepage structure | A large image grid as the entire homepage |
| Hero pattern | Minimal text; the images are the message |
| Navigation | About, Photo (split into advertising, personal, journal), Motion, Expeditions, Writing |
| Primary CTA | View fullsize and contact for bookings |
| Trust signals | Recognized published work across advertising, editorial, and personal series |
| Notable UX pattern | Work is organized into named series so a client can jump to a relevant body of work |
| What to learn | For image-first disciplines, the gallery is the whole page; organize by body of work, not by year |
Chris Burkard — chrisburkard.com
| Field | Observation |
|---|---|
| Type | Photographer portfolio |
| Primary goal | Show a large photographic archive and support commercial and print work |
| Homepage structure | An image-led gallery with minimal text |
| Hero pattern | The photographs, presented full-bleed |
| Primary CTA | Browse the archive and contact for licensing and commissions |
| Trust signals | A well-known archive of published adventure and landscape photography |
| Notable UX pattern | The site is built for browsing images quickly; the work is the interface |
| What to learn | When there is a large body of work, make browsing effortless and keep the words out of the way |
Students and new graduates — illustrative pattern
These cards are not real people or sites. They are illustrative patterns built from the common structure of this site type, so the observations are about the pattern, not a specific person.
Student or new graduate portfolio — illustrative pattern
| Field | Pattern |
|---|---|
| Type | Portfolio with no paid work history yet |
| Homepage structure | Header → hero → selected projects (coursework, internships, personal) → skills → about → contact |
| Hero pattern | Name, field, and a line about what you are looking for (internship, junior role, freelance) |
| Primary CTA | Download résumé / Contact |
| Navigation | Work, About, Skills, Contact |
| Trust signals | Grades or coursework where relevant, internships, and finished personal projects |
| Notable design choice | The projects themselves are the work history; quality and presentation matter more than volume |
| What to learn | A student portfolio should present a few finished, documented projects — the proof you can complete work |
One-page freelancer portfolio — illustrative pattern
| Field | Pattern |
|---|---|
| Type | Single-page portfolio for a freelancer or creative generalist |
| Homepage structure | Hero → services → selected work → testimonials → contact in one scroll |
| Hero pattern | Name, role, and a specific offer ("I build brand identities for food startups") |
| Primary CTA | Book a call / Email |
| Trust signals | Client names, testimonials, and a short service list |
| Notable design choice | Everything a client needs lives on one page, so there is nothing to click away from |
| What to learn | When you are the product, a single focused page can beat a sprawling multi-page site |
Agency or studio portfolio — illustrative pattern
| Field | Pattern |
|---|---|
| Type | Multi-person studio portfolio |
| Homepage structure | Header → hero → selected projects → clients or awards → team → contact |
| Hero pattern | Studio name, positioning statement, and an "Our work" CTA |
| Primary CTA | Start a project |
| Trust signals | Client logos, awards, a team page, and case-study depth |
| Notable design choice | The portfolio sells the studio's outcome, not one person's style |
| What to learn | A studio site leads with results and social proof, then invites a project conversation |
Good vs weak portfolio website patterns
The examples below are illustrative patterns, not real sites. They show the difference between a portfolio that leaves a visitor unsure and one that makes the next step obvious.
| Instead of this (weak) | Try this (stronger) | Why |
|---|---|---|
| A gallery of twenty unlabeled thumbnails | Three to six selected projects with a one-line context | A hiring person judges fast; curation shows taste and focus |
| "Welcome to my portfolio" | "I design brand identities for food startups" | The visitor learns the offer in one line, not a greeting |
| A project card with only an image | A project card that links to a case study | The case study is the proof that you can do the work, not just show it |
| "I was the designer on this" | "My role: identity, art direction, guidelines" | Naming your role makes a team project honestly yours |
| No contact details anywhere | A visible email or a short form on every page | Hiring is the goal; never make the visitor hunt for it |
| A "process" section with no detail | Three or four steps that show how you think | Process is the strongest signal of seniority on a portfolio |
| Stolen or vague "case studies" | Honest outcomes with no invented metrics | A single false claim destroys trust in everything else |
| An about page with a stock photo | A real photo and a few honest sentences | People hire people; a face and a voice beat a generic stand-in |
Copyable portfolio website plan template
Use the anatomy above as a skeleton and fill in this template with your own details. A filled example lives at the top of this page in the mockups; this is the blank version you can copy and edit.
# Portfolio website plan
## About you
- Name: [your name]
- One-line description: [What you make, for whom]
- Field: [e.g. "Front-end developer", "Illustrator", "Photographer"]
- Looking for: [freelance work / a job / commissions / speaking]
## Primary goal (pick one)
- [ ] Win freelance or client work
- [ ] Get a job
- [ ] Win commissions or bookings
- [ ] Sell products (prints, merch, comics)
- [ ] Build an audience for a course or writing
- [ ] Other: _____
## Audience
- Who visits: [clients, studios, employers, collectors]
- What they want to check: [range, depth, role fit, availability]
## Pages or sections
- Homepage (gallery + intro)
- Selected work
- Case studies (2-4 projects, each with a real story)
- About
- Contact
- Other: _____
## Homepage sections (in order)
1. Header: name, [navigation], and a "Hire me" / "Book" action
2. Hero: name, role, one-line offer, primary CTA
3. Selected work: 3-6 project cards with one-line context
4. About: who you are in 2-3 sentences + a real photo
5. Contact: email or a short form
6. Footer: portfolio platform links and copyright
## Case study structure (for each project)
- Title and meta: client, your role, year
- Hero image: the single most representative visual
- Overview: the problem in plain language
- My role: what you personally did
- Process: 3-4 steps that show how you think
- Outcome: what changed, stated honestly
- Next project: a link onward
## What to show
- Your 3-6 strongest, most recent pieces of work
- 2-4 case studies with real process, not just screenshots
- Your skills and the tools you use, stated plainly
- A real, current photo of you
## Trust signals to include
- [ ] A real, current photo
- [ ] Project demos or live links, where applicable
- [ ] Source code links, where applicable
- [ ] Named clients or publications (only what is true)
- [ ] Testimonials, if you have real ones
- [ ] Your role named on every team project
## Contact pattern
- Email visible on the homepage and case studies
- A clear "next step" on every page: hire, book, commission, email
- [Booking link] if you take calls
- [Résumé or CV link] if you are job hunting
## Final checks
- [ ] A visitor can judge your best work in under a minute
- [ ] Every claimed project has your role named
- [ ] No invented outcomes, metrics, clients, or testimonials
- [ ] Reads well on a phone
- [ ] Every page has a title and meta description
- [ ] Links work and point at real pages
- [ ] Live on a secure https:// address
FAQ
Frequently asked questions
What is a portfolio website?
A site built around a body of work. It exists so a visitor can judge what you make quickly and decide to hire, book, or commission you. A gallery shows range; a case study shows depth.
What is the difference between a portfolio website and a personal website?
A portfolio leads with the work and treats hiring as the goal. A personal website can lead with the person and treat following or contact as the goal. Every portfolio is personal, but not every personal site is a portfolio.
What should a portfolio website include?
At minimum: a homepage with a hero and a selected-work grid, a few case studies that tell the story of your best projects, a short about section, and an obvious way to contact you.
How many projects should a portfolio show?
Three to six strong projects beat twenty weak ones. The goal is to prove range and depth, and curation itself is a signal of taste.
What is a case study?
A page about one project that explains the problem, your role, your process, and the outcome. It is the strongest proof a portfolio can offer, because it shows how you think, not just what you made.
Should I include every project I have ever done?
No. Show your best and most recent work, and cut anything that does not represent where you want to go next. A portfolio is a selection, not an archive.
Do I need a case study for every project?
No. Two to four well-written case studies are enough; the rest of the gallery can be simple project cards. Writing a real case study takes time, so invest it in the projects you want more of.
How do I make my portfolio stand out?
Show real work with named roles and honest outcomes, write in your own voice, use a real photo, and make the next step obvious on every page. Original work and honest process beat decoration.
Should a photographer or artist use a gallery or a case study?
Image-led disciplines work best with a large, well-organized gallery split into bodies of work. Case studies matter more for designers, developers, and anyone whose process is part of the value.
Where to go next
A portfolio is built around one decision: what do you want the visitor to do next — hire you, book you, commission you, or buy from you? Start from the template above, then borrow the specifics that fit your discipline. If your site is more about the person than the work, the personal website examples page is the better match; if you sell a service rather than a body of work, the business website examples patterns apply. For the words and structure, see website name examples, website title examples, and website structure examples. Make sure it reads well on a phone — the responsive website example shows how — and if you build these sites for a living, the website proposal example page shows what the document around a project looks like.