Website Examples
Personal Website Examples
Real personal website examples for developers, designers, writers, consultants, and one-page resume sites.
A personal website is the corner of the web you fully own: a single page or a small site where you introduce yourself, show your work, share what you are learning, and make it easy to contact you. Unlike a business website, which represents a company, a personal site is built around one person. This page collects 15+ personal 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.
Personal sites vary more than any other type, because the thing being presented is a person. That is exactly why examples are useful: the same job gets solved dozens of ways. Instead of a long article, here are the examples grouped by what the site is for, plus an anatomy of a personal homepage and a one-page resume, good vs weak patterns, and a copyable plan you can fill in.
What is a personal website?
A personal website represents one person rather than a company or a store. Its job depends on what that person wants to happen next:
- Get hired — a resume-style site that shows work history and projects
- Win clients — a site for consultants and freelancers that leads with an offer and proof
- Build an audience — a blog or creator hub built around writing, videos, or a newsletter
- Present a body of work — a portfolio-style site for artists and designers
- Own a front door — a simple homepage with a now page and links to everything else you publish
Most personal sites mix two or three of these. A developer's site is often part resume, part portfolio, and part blog; a writer's site is usually a blog plus a newsletter.
Personal vs portfolio vs business vs ecommerce
| Type | Primary job | Typical visitor action | Example |
|---|---|---|---|
| Personal website | Present one person | Contact, follow, hire | This page |
| Portfolio website | Showcase a body of work | View work, hire | Portfolio 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 is the closest neighbour, and the line is fuzzy: every portfolio is personal, but not every personal site is a portfolio. This page keeps the focus on the person; the work-first angle of a portfolio is covered on the portfolio website examples page.
The anatomy of a personal homepage
Personal 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, a status line, selected work, writing, a short about, a contact call, and a footer. It uses a fictional person, Maya Chen, so nothing here measures a real person.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Maya Chen</title>
<style>
:root { --accent: #4f46a5; --ink: #1f2430; --muted: #6b7280; --line: #e5e7eb; --bg: #faf9ff; }
* { 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; }
.hello { background: var(--accent); color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.hero { max-width: 720px; margin: 0 auto; padding: 72px 24px 48px; }
h1 { font-size: 40px; letter-spacing: -0.03em; margin: 0 0 10px; }
.role { font-size: 20px; font-weight: 600; color: var(--accent); margin: 0 0 16px; }
.intro { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 0 24px; max-width: 56ch; }
.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; }
.status { max-width: 720px; margin: 0 auto; padding: 14px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
section { max-width: 720px; margin: 0 auto; padding: 40px 24px; }
h2 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; }
.sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #fff; }
.thumb { background: #eceaf6; border-radius: 8px; height: 120px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.card h3 { font-size: 15px; margin: 10px 0 2px; }
.card p { margin: 0; font-size: 13px; color: var(--muted); }
.post { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.post time { color: var(--muted); font-size: 13px; }
.about { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
.photo { width: 96px; height: 96px; border-radius: 50%; background: #e5e0f2; 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: 720px; 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: 720px) {
.grid { grid-template-columns: 1fr; }
nav { display: none; }
.hero { padding: 48px 20px 32px; }
h1 { font-size: 32px; }
}
</style>
</head>
<body>
<header>
<span class="name">Maya Chen</span>
<nav>
<a href="#work">Work</a>
<a href="#writing">Writing</a>
<a href="#about">About</a>
</nav>
<a class="hello" href="mailto:hello@mayachen.example">Get in touch</a>
</header>
<div class="hero">
<h1>Hi, I'm Maya Chen</h1>
<p class="role">Product designer & design engineer</p>
<p class="intro">I design and build web products that people actually enjoy using — and I write about the process along the way.</p>
<div class="actions">
<a class="cta" href="mailto:hello@mayachen.example">Email me</a>
<a class="ghost" href="#work">See my work</a>
</div>
</div>
<div class="status">Currently: Senior product designer at Northwind · Available for select freelance projects</div>
<section id="work">
<h2>Selected work</h2>
<p class="sub">Three projects that show how I think</p>
<div class="grid">
<div class="card"><div class="thumb">Project</div><h3>Field Notes</h3><p>Research tool for remote teams</p></div>
<div class="card"><div class="thumb">Project</div><h3>Ledger</h3><p>Open-source budgeting app</p></div>
<div class="card"><div class="thumb">Project</div><h3>Compass</h3><p>Wayfinding for a museum</p></div>
</div>
</section>
<section id="writing">
<h2>Writing</h2>
<p class="sub">Notes on design and code</p>
<div class="post"><span>What a design system really does</span><time>Aug 2026</time></div>
<div class="post"><span>Three lessons from shipping small</span><time>Jun 2026</time></div>
<div class="post"><span>Why I keep a now page</span><time>May 2026</time></div>
</section>
<section id="about">
<h2>About</h2>
<div class="about">
<div class="photo">Photo</div>
<div>
<p>I've been designing and building interfaces for eight years, mostly in the design tools and developer tooling space. When I'm not at a keyboard, I'm hiking or printing photographs.</p>
<p><a href="#now">What I'm up to now</a></p>
</div>
</div>
</section>
<div class="contact">
<h2>Let's build something</h2>
<p style="color:#cbd5e1">I read every email and reply to the good ones.</p>
<a href="mailto:hello@mayachen.example">Get in touch</a>
</div>
<footer>
<a href="https://github.com/mayachen">GitHub</a>
<a href="https://www.linkedin.com/in/mayachen">LinkedIn</a>
<a href="https://twitter.com/mayachen">X</a>
<span>© 2026 Maya Chen</span>
</footer>
</body>
</html>
The sections in order:
- Header — name, a few links, and a persistent way to contact you
- Hero — who you are, what you do, and one clear next step
- Status line — a current role or availability note keeps the site feeling fresh
- Selected work — three to six items with short descriptions
- Writing — a taste of what you publish, with dates
- About — a few sentences and a real photo
- Contact call — a repeat of the main action near the end
- Footer — social links and a copyright line
The two patterns worth studying hardest are the hero — your one chance to say who you are and what to click — and the proof, the real work that makes the claims believable. The rest of the page supports those two. 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 one-page resume site
When the goal is a job, many people compress everything into one scannable page: name and title, contact links, experience, skills, education, and a photo. The same fictional person is shown below as a one-page resume so you can compare the two layouts side by side.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Maya Chen — Resume</title>
<style>
:root { --accent: #4f46a5; --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); }
.page { max-width: 820px; margin: 0 auto; padding: 40px 24px; }
.top { border-bottom: 2px solid var(--ink); padding-bottom: 16px; margin-bottom: 24px; }
h1 { font-size: 34px; letter-spacing: -0.02em; margin: 0 0 4px; }
.role { color: var(--accent); font-weight: 600; margin: 0 0 8px; }
.meta { font-size: 14px; color: var(--muted); }
.meta a { color: var(--ink); }
section { margin-bottom: 24px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 12px; }
.job { margin-bottom: 16px; }
.job .row { display: flex; justify-content: space-between; font-weight: 600; }
.job time { color: var(--muted); font-weight: 400; font-size: 13px; }
.job ul { margin: 6px 0 0; padding-left: 18px; color: #374151; font-size: 14px; line-height: 1.6; }
.skills { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.edu p { margin: 0; font-size: 14px; }
@media print {
.page { padding: 0; }
}
</style>
</head>
<body>
<div class="page">
<div class="top">
<h1>Maya Chen</h1>
<p class="role">Product designer & design engineer</p>
<p class="meta">hello@mayachen.example · 555-010-4455 · <a href="https://www.linkedin.com/in/mayachen">LinkedIn</a> · <a href="https://mayachen.example">mayachen.example</a></p>
</div>
<section>
<h2>Experience</h2>
<div class="job">
<div class="row"><span>Senior product designer, Northwind</span><time>2022 — present</time></div>
<ul>
<li>Lead the design system adopted across three product teams</li>
<li>Shipped the research tool that cut interview setup time</li>
</ul>
</div>
<div class="job">
<div class="row"><span>Product designer, Fieldhouse Labs</span><time>2019 — 2022</time></div>
<ul>
<li>Designed onboarding used by new accounts</li>
<li>Ran usability sessions with customers before each release</li>
</ul>
</div>
<div class="job">
<div class="row"><span>Design intern, Commonplace</span><time>2018</time></div>
<ul>
<li>Built marketing pages and a component library</li>
</ul>
</div>
</section>
<section>
<h2>Skills</h2>
<div class="skills">
<span class="chip">UX research</span><span class="chip">Interface design</span><span class="chip">Design systems</span><span class="chip">HTML & CSS</span><span class="chip">Prototyping</span>
</div>
</section>
<section class="edu">
<h2>Education</h2>
<p>B.A. in Graphic Design, Meridian State University</p>
</section>
</div>
</body>
</html>
A one-page resume keeps the same facts but drops the storytelling: header with name and contact, experience in reverse order with short bullets, a skill list, and education. It works because a hiring person wants to skim fast. If you want to write more than a resume allows, that extra space becomes the personal homepage anatomy above.
Personal website examples by type
The real examples below are well-known people with public personal 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
Brittany Chiang — brittanychiang.com
| Field | Observation |
|---|---|
| Type | Personal portfolio for a front-end engineer |
| Primary goal | Be found by employers and start a conversation |
| Homepage structure | One scrolling page: hero → about → experience → featured projects → other projects → contact → footer |
| Hero pattern | Name, a one-line role, a short intro, and quick links to email and GitHub |
| Navigation | Single-page anchor links (About, Experience, Work, Contact) plus a resume link |
| Primary CTA | "Get in touch" — a mailto link in the hero and again at the end |
| Trust signals | A work-history list, detailed project write-ups, links to open source, and a running blog |
| Notable UX pattern | Numbered section headings and a narrow reading column that make a long page feel structured |
| What to learn | A job-hunting developer site can be one scrolling page that answers "who, where I've worked, what I've built, how to reach me" |
Josh Comeau — joshwcomeau.com
| Field | Observation |
|---|---|
| Type | Developer and educator personal site |
| Primary goal | Build an audience and promote courses and writing |
| Homepage structure | Hero → about → articles → courses → interactive playground |
| Hero pattern | Avatar, name, and a personal, humorous intro that sets the tone |
| Navigation | Blog, Courses, Playground, About |
| Primary CTA | Subscribe to the newsletter |
| Trust signals | A long-running writing archive, an open-source presence, and published course materials |
| Notable UX pattern | Playful interactive animations that demonstrate the author's front-end skill |
| What to learn | A developer site can teach and entertain; interactive elements are proof of skill, not decoration |
Dan Abramov — overreacted.io
| Field | Observation |
|---|---|
| Type | Developer blog |
| Primary goal | Publish long-form technical writing |
| Homepage structure | Title → reverse-chronological post list → a short about blurb → footer |
| Hero pattern | Name and a one-line description; no hero image |
| Navigation | Minimal text links |
| Primary CTA | None — the content is the page |
| Trust signals | Author reputation and a deep, searchable writing archive |
| Notable UX pattern | Text-first with no images and no advertising; readability is the entire design |
| What to learn | A blog does not need chrome; if the writing is the product, let it carry the page |
Tobias Ahlin — tobiasahlin.com
| Field | Observation |
|---|---|
| Type | Designer–engineer personal site |
| Primary goal | Show design and engineering work and share writing |
| Homepage structure | Minimal hero → selected projects → latest writing → now |
| Hero pattern | Name, role, a one-line intro, and a few plain links |
| Navigation | Work, Writing, Now, About |
| Primary CTA | Contact / "say hello" link |
| Trust signals | Published projects and a long-running blog |
| Notable UX pattern | Restrained, near-empty pages with confident typography |
| What to learn | Restraint reads as craft; one person can show both design and engineering with a single minimal page |
Designers and creative developers
Frank Chimero — frankchimero.com
| Field | Observation |
|---|---|
| Type | Designer personal site with essays |
| Primary goal | Publish essays and present design work |
| Homepage structure | A strong statement up top, then links to writing and projects |
| Hero pattern | Large typography; often a single declarative line instead of a product pitch |
| Navigation | Minimal, mostly text links |
| Primary CTA | Read / follow along |
| Trust signals | A long body of published writing and design work |
| Notable UX pattern | Typography-first layout where the writing is the design |
| What to learn | A personal site can open with one confident statement and let the work follow |
Maggie Appleton — maggieappleton.com
| Field | Observation |
|---|---|
| Type | Visual essayist / researcher personal site |
| Primary goal | Share essays and a growing set of notes |
| Homepage structure | Illustrated hero → essays → projects → about |
| Hero pattern | A hand-drawn illustration with name and role |
| Navigation | Essays, Garden, Projects, About |
| Primary CTA | Explore essays / subscribe |
| Trust signals | A large, public body of writing and original illustrations |
| Notable UX pattern | A consistent original illustration style that makes the site instantly recognizable |
| What to learn | A personal site can be a personality; a distinctive visual voice is a brand |
Adham Dannaway — adhamdannaway.com
| Field | Observation |
|---|---|
| Type | UX/UI designer personal site |
| Primary goal | Win freelance and full-time design work |
| Homepage structure | Minimal intro → projects → writing → contact |
| Hero pattern | Small-type intro with a one-liner |
| Navigation | Text links to work, writing, and contact |
| Primary CTA | Get in touch / email |
| Trust signals | Case studies and published articles |
| Notable UX pattern | Deliberately understated, text-sized layout that stands apart from louder portfolios |
| What to learn | Confidence can be quiet; a minimal site is a differentiator in a crowded field |
Lynn Fisher — lynnandtonic.com
| Field | Observation |
|---|---|
| Type | Creative developer / designer personal site |
| Primary goal | Showcase experimental web projects |
| Homepage structure | Playful, project-first, often a single page |
| Hero pattern | A bold, experimental visual with the name |
| Navigation | Minimal, usually anchored to projects |
| Primary CTA | Explore projects |
| Trust signals | A well-known history of playful, interactive personal sites |
| Notable UX pattern | A fresh bespoke design built in code each year — the site itself is the portfolio |
| What to learn | When you build websites, the site can be the work; let the medium demonstrate the craft |
Writers and creators
Derek Sivers — sivers.org
| Field | Observation |
|---|---|
| Type | Content-first personal site |
| Primary goal | Share ideas, books, articles, and a now page |
| Homepage structure | Dense text list of content with a short intro |
| Hero pattern | A few plain lines; no hero image |
| Navigation | About, Books, Articles, Now, Contact |
| Primary CTA | Read — and an email contact |
| Trust signals | Books, a long writing archive, and a famously bare, no-tracking site |
| Notable UX pattern | No cookies, no logins, no paywalls; the site states its own ethos up front |
| What to learn | A personal site can be pure content with no persuasion machinery; clarity and honesty become the brand |
Tim Urban — waitbutwhy.com
| Field | Observation |
|---|---|
| Type | Writer / creator site for long-form essays |
| Primary goal | Publish essays and build a readership |
| Homepage structure | Start-here path for new readers → latest posts → about → newsletter |
| Hero pattern | Featured essay plus a recognizable avatar |
| Navigation | Posts, Start Here, About, newsletter |
| Primary CTA | Read the latest post / subscribe |
| Trust signals | A large archive of widely shared long-form essays |
| Notable UX pattern | A clear entry point for new readers and custom stick-figure illustrations |
| What to learn | Give new readers a clear on-ramp; personality in illustrations makes long writing feel friendly |
Austin Kleon — austinkleon.com
| Field | Observation |
|---|---|
| Type | Author / artist personal site |
| Primary goal | Share posts, promote books, grow a newsletter |
| Homepage structure | Name → latest posts → books → newsletter signup → about |
| Hero pattern | Name and a personal, handwritten feel; little chrome |
| Navigation | Blog, Books, Newsletter, About, Shop |
| Primary CTA | Join the newsletter |
| Trust signals | Published books and a long-running blog |
| Notable UX pattern | A simple, personal, DIY aesthetic that matches the author's published voice |
| What to learn | An author site has one job — move readers to the newsletter and the books — and the design stays out of the way |
James Clear — jamesclear.com
| Field | Observation |
|---|---|
| Type | Author personal site |
| Primary goal | Promote books and build a newsletter |
| Homepage structure | Name → author intro → articles → newsletter |
| Hero pattern | Name, author bio, book cover, newsletter offer |
| Navigation | Articles, Books, Newsletter, About |
| Primary CTA | Free newsletter signup |
| Trust signals | A best-selling book and a large article archive |
| Notable UX pattern | A single clear offer (the newsletter) repeated cleanly |
| What to learn | A personal brand site can center one product and one funnel without complexity |
Consultants and coaches — illustrative patterns
These cards are not real people or companies. They are illustrative patterns built from the common structure of this site type, so the observations are about the pattern, not a specific person.
Consultant or coach — illustrative pattern
| Field | Pattern |
|---|---|
| Type | Independent consultant / coach |
| Homepage structure | Header → hero with name and offer → services → results → testimonials → booking CTA → footer |
| Hero pattern | "I help [audience] do [outcome]" plus a "Book a call" button |
| Primary CTA | Book a call / Get in touch |
| Navigation | About, Services, Results, Contact |
| Trust signals | Client logos, testimonials, credentials |
| Notable design choice | The offer is stated as a specific outcome, and booking is the single next step |
| What to learn | Name the outcome you deliver and remove every step between the visitor and a booking |
Resume and homepage formats — illustrative patterns
One-page resume site — illustrative pattern
| Field | Pattern |
|---|---|
| Type | Single-page CV / resume site |
| Homepage structure | Name → role → experience → skills → education → contact |
| Hero pattern | Name, title, location, and contact links |
| Primary CTA | Email / download CV |
| Navigation | None — one page with anchors |
| Trust signals | Work history, skills list, education |
| Notable design choice | Everything fits on one scannable page for a hiring person who is skimming |
| What to learn | When the goal is a job, one focused page beats five empty ones |
Personal homepage with a now page — illustrative pattern
| Field | Pattern |
|---|---|
| Type | Personal homepage / front door |
| Homepage structure | One-line intro → links to the important parts of your life → now page |
| Hero pattern | A single honest sentence about who you are right now |
| Primary CTA | Follow or contact |
| Navigation | Now, About, Contact |
| Notable design choice | The now page answers "what are you focused on lately" so the site stays current |
| What to learn | A homepage can be a front door to everything else you publish — one line plus links |
Creator hub — illustrative pattern
| Field | Pattern |
|---|---|
| Type | Creator / channel hub |
| Homepage structure | Hero with name and latest content → posts or videos → links → newsletter |
| Hero pattern | Name, a friendly line, and the latest video or post |
| Primary CTA | Watch / subscribe |
| Navigation | Content, About, newsletter |
| Notable design choice | The site links out to every platform while collecting an email list on its own domain |
| What to learn | When your content lives on platforms, the personal site is the hub that links it all and owns your audience |
Good vs weak personal website patterns
The examples below are illustrative patterns, not real sites. They show the difference between a homepage that leaves the visitor unsure and one that makes the next step obvious.
| Instead of this (weak) | Try this (stronger) | Why |
|---|---|---|
| "Welcome to my website" | "Hi, I'm Maya — I design and build websites" | The visitor learns who you are in one line instead of being greeted |
| A resume with no work shown | A resume plus real projects | Proof beats claims; a hiring person wants to see output |
| A generic template look | A distinctive voice, even if simple | A personal site should feel like a person, not a demo |
| A contact button that opens a blank form | A mailto link or a short, direct form | The goal is contact, not form-filling |
| A blog with no about page | An About page and a Now page | Readers trust people with context, and "now" shows you are current |
| One long page with no structure | Clear sections with headings | Visitors skim; structure lets them jump to the part they need |
| Five different CTAs competing | One primary action per page | Too many choices and none gets chosen |
| Stock photos of strangers | A real, current photo of you | People connect with a face more than with a stock image |
Copyable personal 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 mockup; this is the blank version you can copy and edit.
# Personal website plan
## About you
- Name: [your name]
- One-line description: [What you do, for whom, and what makes you different]
- Current role: [e.g. "Product designer at Northwind"]
- Email: [your email]
## Primary goal (pick one)
- [ ] Get hired (resume + work shown)
- [ ] Win clients (offer + proof)
- [ ] Build an audience (writing, newsletter)
- [ ] Share a body of work (portfolio)
- [ ] Own a homepage and a presence (now page + links)
- [ ] Other: _____
## Audience
- Who visits: [recruiters, clients, readers, followers]
- What they want from the site: [one line]
## Pages or sections
- Homepage
- About
- Work / Projects
- Writing (optional)
- Now
- Contact
- Other: _____
## Homepage sections (in order)
1. Header: name, [navigation], and a way to contact you
2. Hero: name, role, one-line intro, primary CTA
3. Status line (optional): [current role or availability]
4. Selected work: 3-6 items with one-line descriptions
5. Writing: latest 3-5 posts with dates
6. About: who you are in 2-3 sentences + a real photo
7. Contact: email or a short form
8. Footer: social links and copyright
## Hero formula
- Line one: [Your name]
- Line two: [Your role — "I design and build websites"]
- Line three: [One sentence on what you do for whom]
- Primary CTA: [Email me / See my work / Book a call]
- Visual: [A real, current photo or none]
## What to show
- 3-6 pieces of work, each with what you did and the outcome
- Your writing or talks, if you create them
- Current projects and what you are learning
## Trust signals to include
- [ ] A real, current photo
- [ ] Your work shown, not just described
- [ ] Social links that match the site
- [ ] Where you work now or have worked
- [ ] A short About that sounds like you
## Contact pattern
- Email visible on the homepage
- Social links in the header or footer
- [Booking link] if you take calls
- [CV link] if you are job hunting
## Final checks
- [ ] One clear next step on the homepage
- [ ] 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 personal website?
A site built around one person: it introduces you, shows your work or writing, and makes it easy to contact you. It can be one page or several, depending on what you want it to do.
What is the difference between a personal website and a portfolio website?
A portfolio focuses on showing a body of work, usually to win work or a job. A personal website can do that too, but it can also be a blog, a homepage, or a hub for a creator; the work is one part of the person.
What should a personal website include?
At minimum a homepage that says who you are, a way to contact you, and something you have made or written. About and Now pages help readers trust you and see that you are current.
How many pages does a personal website need?
One is often enough: a single page with an intro, your work, and contact details. Add separate pages for About, Now, or a blog only when the content is worth its own page.
What should a personal homepage say?
Who you are, what you do, and what the visitor should do next. A good first line is 'Hi, I'm [name] — I [do this] for [these people].'
What is a now page?
A page that says what you are focused on right now: the projects, jobs, or goals taking your attention. It helps returning visitors catch up and keeps the site feeling current.
How do I make my personal website stand out?
Show real work, write in your own voice, use a real photo, and keep one clear action on the page. A distinctive visual style helps, but honesty and proof matter more than decoration.
Should my personal website have a blog?
Only if you will keep writing. A blog is a commitment, and three strong posts beat a blog with one. Writing does help people find you, but it is not required.
Where to go next
A personal website is built around one decision: what do you want the visitor to do next? Start from the template above, then borrow the specifics that fit your goal. If you are showing work, the portfolio website examples page goes deeper; if you sell a service, 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.