---
id: seed:copy-patterns/personal-portfolio
title: Personal portfolio (designer / developer / writer) copy patterns
source_type: seed_copy
priority: warm
---

A personal portfolio sells the person. It is different from an agency site (which sells a team) and a resume (which sells a history). Visitors usually arrive after seeing the person's work in another context — so the homepage's job is to confirm "yes, this person is who I thought they were" and give them an obvious next action: hire, follow, or read more.

**Hero patterns:**

- *Name + niche + status*: "Sarah Drasner. SVG animation specialist. Available for consulting Q3."
- *Identity-led, plain-spoken*: "I'm Cassidy. I build things on the web and write about it."
- *Outcome / past work*: "I helped design Stripe Press. Now working on something new."
- *Quietly authoritative*: "Hi. I'm Maggie. I write essays — three of which you've probably read."

The hero must answer:
1. Who is this person (name + face)
2. What do they do in one phrase
3. What does the visitor do next (contact / portfolio / writing)
4. Are they available (booking status: open / booked / not for hire)

```html
<section data-amb-section="hero" class="hero-section">
  <div class="container">
    <div class="hero-content">
      <h1 class="hero-title">Hi, I'm {Name}.</h1>
      <p class="hero-description">{One-sentence positioning. Specific niche.}</p>
      <p class="hero-availability">
        <span class="hero-availability-dot hero-availability-dot--open" aria-hidden="true"></span>
        Available for consulting · Q3 2026
      </p>
      <div class="hero-actions">
        <a class="cta-button" href="#contact">Get in touch</a>
        <a class="hero-link" href="#work">See my work</a>
      </div>
    </div>
    <figure class="hero-portrait">
      <img class="hero-portrait-image" src="https://placehold.co/480x600" alt="{Name}" />
    </figure>
  </div>
</section>
```

*Animation Pattern (The Slow Hello):*
- **Cursor-Following Portrait:** The hero portrait shifts position by ±4px tracking cursor coordinates with high friction (damping = 0.25). Creates subtle eye contact without becoming distracting.
- **Type-In Headline:** The name types in character-by-character over 0.8s on first load, then settles. Should NOT loop or replay on scroll — one-time entrance only. Skip entirely if `prefers-reduced-motion`.
- **Availability Indicator Pulse:** The green "available" dot pulses softly (0.6s cycle, opacity 1 → 0.5 → 1). Single most-effective animation on a portfolio — visitors notice the breathing dot and read the status.

**Work / portfolio section:**

The single most-clicked area of a personal portfolio. Show 3–6 case studies, each with: project name, role (so visitors know what YOU contributed vs. the team), one-line outcome, primary image.

```html
<section data-amb-section="work" class="work-section">
  <div class="container">
    <h2 class="work-title">Selected work · 2022 – 2026</h2>
    <div class="work-grid">
      <a class="work-card" href="/work/stripe-press">
        <img class="work-card-image" src="https://placehold.co/720x540" alt="Stripe Press" />
        <div class="work-card-meta">
          <h3 class="work-card-title">Stripe Press</h3>
          <p class="work-card-role">Lead designer · 2023</p>
          <p class="work-card-outcome">A reading-first publishing site for Stripe's book imprint. 4M+ visits since launch.</p>
        </div>
      </a>
    </div>
  </div>
</section>
```

*Animation Pattern (The Considered Reveal):*
- **Image Zoom on Hover:** The card image scales to 1.04 with a 400ms cubic-bezier ease on hover. Restraint matters — bigger scales feel desperate.
- **Cursor-Adjacent Project Label:** On hover, a small "View case study →" label follows the cursor with spring physics. Replaces the generic "Read more" button and feels more intimate.
- **Lazy-Reveal on Scroll-In:** Each card fades up with a 60ms stagger as it enters the viewport. Cap at 4 simultaneous fades — long staggers feel slow.

**About / story section:**

Two paragraphs max. Lead with what you DO and who FOR, then add personal context. The visitor doesn't need your full life story — they need to know you're a real person with discernible taste.

- Bad: "Hi, I'm Sarah, and I'm passionate about technology. Ever since I was a kid..."
- Good: "I've spent ten years thinking about web animation — most recently at Netlify, where I ran the engineering org. I work best on hard rendering problems and editorial design. I write about both at <link>."

**Writing / thinking section:**

If the person writes, show 3–5 recent pieces with: title, publication date, one-line summary, read time. Writers especially benefit from this — readers who found the homepage are often coming from a piece and want more.

```html
<section data-amb-section="writing" class="writing-section">
  <div class="container">
    <h2 class="writing-title">Recent writing</h2>
    <ol class="writing-list">
      <li class="writing-entry">
        <a class="writing-link" href="/essays/scale-and-craft">
          <span class="writing-date">Apr 2026</span>
          <h3 class="writing-headline">Scale and craft can coexist</h3>
          <p class="writing-summary">Why "scrappy" is a phase, not a philosophy. — 8 min read</p>
        </a>
      </li>
    </ol>
  </div>
</section>
```

**Social proof / "as seen in" strip:**

For mid-career professionals. Logos of publications/conferences that have featured the person. Monochrome. Skip if the visitor wouldn't recognize the names.

**Testimonials (optional):**

Personal-portfolio testimonials work when they're SHORT (under 25 words), specific, and attributed to someone the visitor can verify ("Director of Eng at Vercel"). Two or three is plenty — more reads as a sales page.

**Contact section:**

The lowest-friction conversion on the page. Most personal portfolios don't need a form — an email link + social icons is fine.

```html
<section data-amb-section="contact" class="contact-section">
  <div class="container">
    <div class="contact-card">
      <h2 class="contact-title">Let's talk.</h2>
      <p class="contact-description">Consulting inquiries, speaking, or to say hi.</p>
      <a class="contact-email" href="mailto:hello@example.com">hello@example.com</a>
      <div class="contact-socials">
        <a class="contact-social" href="https://twitter.com/..." aria-label="Twitter">{svg}</a>
        <a class="contact-social" href="https://github.com/..." aria-label="GitHub">{svg}</a>
        <a class="contact-social" href="https://linkedin.com/in/..." aria-label="LinkedIn">{svg}</a>
        <a class="contact-social" href="/rss.xml" aria-label="RSS">{svg}</a>
      </div>
    </div>
  </div>
</section>
```

*Animation Pattern (The Closing Note):*
- **Hand-Written Signature:** A scanned-and-traced SVG signature draws itself with `stroke-dasharray` + `stroke-dashoffset` over 1.2s when scrolled into view. Personal touch that reads as warm rather than cliched.
- **Email Click-to-Copy:** Clicking the email address copies it to clipboard AND opens the mail client. Toast confirmation: "Copied — say hi any time."

**What to omit:**
- Skills bars / star ratings ("HTML ★★★★☆, CSS ★★★★★"). They quantify what shouldn't be quantified and signal junior.
- A long timeline of every job ever. Use 3–5 most-relevant items, link to LinkedIn for the full history.
- "Open to work" labels that have been there for a year. Update the date or remove.
- Carousels for projects. Visitors don't carousel; they scan. Use a grid.
- Loading screens / pre-loaders. Personal sites should load instantly — pre-loaders are theatre.

### Technical Performance Guardrails

| Metric / Rule | Target Limit | Tech Solution |
| :--- | :--- | :--- |
| **Time-to-portrait** | < 1.0 s | Inline above-fold CSS, preload the hero portrait image, use AVIF/WebP at intrinsic size. |
| **Total page weight** | < 800 KB | Personal portfolios should be one of the lightest sites on the visitor's day. Avoid heavy fonts (≤ 2 weights), avoid videos in the hero, avoid JS frameworks if static HTML suffices. |
| **No JavaScript required** | Core navigation must work without JS | Email link, work links, writing links all work as plain `<a>`. JS enhances; it doesn't gate. |
| **Print-friendly** | One CSS print stylesheet | Old habit, still useful — hiring managers print portfolios. |
| **Reduced motion** | Disable signature draw, type-in, cursor-follow | The site reads correctly without any animation. |

### What to Omit (Animation perspective)
* **Liquid mouse trails or cursor magnetism EVERYWHERE.** It's overdone on personal sites. Pick ONE place to do it (the contact section is a good candidate) and let the rest be still.
* **Looping background videos / animated gradients running constantly.** Drains the visitor's battery for no signal value.
* **Custom 3D scenes for the hero.** Three.js intros work for senior 3D artists. Everyone else: a still photograph beats a half-baked 3D experiment.
* **"Press any key to continue" entrance screens.** Treat your homepage as the front door, not a video game.
