portfolio · field guide

How the portfolio actually works.

clairemull.com is a site I designed and built myself, plus a one-page résumé kept in sync with it. It presents the work; it doesn't store anything about the people who read it. Here's the whole thing on one page.

Living doc · rebuilt 2026-08-20 · updated when the site or stack changes

01 What it is

A portfolio site and a résumé, presenting three case studies: bakebook (a product I designed and shipped to the App Store), Blackbox Sandwiches (service design for a real business), and a KitchenAid usability evaluation (UX research). The site and the résumé say the same thing in two formats.

02 What a visitor can do, and the function behind it

A portfolio has a small job: show the work, tell the story, hand over the résumé. Each is a static page or file.

See the work

Read a full case study per project: the problem, the process, the outcome, the visuals.

/work/bakebook · blackbox · kitchenaid

Read the story

Who I am and how I work, on one about page.

/about

Browse explorations

Looser work and sketches that don't need a full case study.

/sketches

Take the résumé

Download a one-page PDF that matches the site.

/claire-mull-resume.pdf

See it on any screen

Layouts respond from phone to desktop.

Tailwind responsive styles

Find it & load it fast

Shows up cleanly when shared, and loads quickly.

static pages + og image + sitemap

03 Why I left Squarespace

The old site was a Squarespace template. I rebuilt it as code I own, so the design isn't boxed in by a template and the pages are exactly what I want them to be. The domain stayed the same the whole way through; only what sits behind it changed.

04 The stack

A static site: every page is built ahead of time, so there's no database and no server to run.

Part	What runs it	Why
Framework	Next.js 16 · React	Modern pages, components I can reuse, real control.
Language	TypeScript	Catches mistakes before they ship.
Styling	Tailwind CSS	Design tokens and responsive layout, close to the markup.
Rendering	Static generation	Every page built ahead of time. Fast, cheap, nothing to break at request time.
Backend	none	No database, no server logic, no accounts. It's a site, not an app.
Hosting	Vercel	Builds the static site and serves it on the domain over HTTPS.
Source	GitHub (private)	Version history for every change.

05 Where the content lives, and why

There's no user data here, so “where's the data” is really “where's the content.”

What	Where it lives	Why there
The pages	site/app/ React, in the repo	Written as components, then built into plain static HTML at deploy. The code is the content.
Images & the résumé PDF	site/public/	Served as static files straight from Vercel's CDN, close to whoever's visiting.
Every change, over time	GitHub	Private repo; full history, so nothing is ever lost and every edit is traceable.
Anything about a visitor	nowhere	No database, no accounts, no logins. A portfolio has nothing to store about the people who read it.

Site vs app

bakebook is an app: it stores your recipes, so it needs a database, accounts and security rules. The portfolio is a site: it stores nothing about you, so it needs none of that. Same builder, two very different shapes, chosen on purpose.

06 How it ships

From my machine to the live domain.

write

edit pages in Next.js

→

GitHub

committed, versioned

→

Vercel

builds the static site (from the CLI)

→

clairemull.com

live on HTTPS

One real gotcha

The build root had to be set to site explicitly. A CLI deploy records the root as ., which breaks the moment Git is connected and Vercel clones the repo root. Documented so it's never a mystery again.

07 The pages

The site and all three case studies are live. The many design explorations under /studies stay out of production.

/live · home

/aboutlive

/work/bakebooklive · case study

/work/blackboxlive · case study

/work/kitchenaidlive · case study

/sketcheslive

/claire-mull-resume.pdflive · résumé

/studies/*explorations · out of prod

08 The file map

site/ the Next.js project
  app/ the pages (App Router)
    page.tsx home
    about/ about
    work/ case studies (bakebook, blackbox, kitchenaid)
    sketches/ explorations
    studies/ design scratch (out of prod)
    globals.css design tokens
  public/ images, résumé PDF, og image
  package.json the stack (Next, React, Tailwind)

09 Glossary

Next.js: A React framework for building sites and apps.
App Router: Next.js's way of turning folders into pages.
Static generation: Pages built ahead of time, not per request. Fast and cheap.
CDN: A network that serves the files from close to each visitor.
Vercel: The host that builds and serves the site on the domain.
Tailwind CSS: Utility styling kept next to the markup.