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 counts visits, and stores nothing about who the visitors are. Here's the whole thing on one page.

Living doc · updated 2026-09-30 · updated when the site or stack changes

01 What it is

A portfolio site and a résumé, presenting three pieces of work: bakebook (a product I designed and shipped to the App Store), How I use Claude (the system I build with, and where I stay in control), and Blackbox Sandwiches (service design for a real business). 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 · /how-i-use-claude · /work/blackbox
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.
hand-written CSS media queries
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.
PartWhat runs itWhy
FrameworkNext.js 16 · ReactModern pages, components I can reuse, real control.
LanguageTypeScriptCatches mistakes before they ship.
StylingHand-written CSSOne stylesheet of design tokens and classes I named. Tailwind is installed, but only its browser reset is used (the rules that clear each browser's default styles). No utility classes.
RenderingStatic generationEvery page built ahead of time. Fast, cheap, nothing to break at request time.
BackendnoneNo database, no server logic, no accounts. It's a site, not an app.
HostingVercelBuilds the static site and serves it on the domain over HTTPS.
Visitor countsVercel AnalyticsPage views and where visitors came from, seen only by me in the Vercel dashboard. No cookies, so no cookie banner. Added to the code 30 Sep 2026; switched on in the dashboard and counting since 4 Oct 2026.
Old linksnext.config.tsRedirects send old Squarespace addresses (like /blackbox-sandwiches) to their new pages. Anything else lands on a branded broken-link page: the homepage with “This page doesn’t exist” above the name.
SourceGitHub (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.”
WhatWhere it livesWhy there
The pagessite/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é PDFsite/public/Served as static files straight from Vercel's CDN, close to whoever's visiting.
Every change, over timeGitHubPrivate repo; full history, so nothing is ever lost and every edit is traceable.
Anything about a visitoronly countsNo database, no accounts, no logins. Vercel Analytics counts visits without cookies and without knowing who anyone is; nothing else is kept.
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 only counts visits, without cookies or names, 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 and deploys on every push
→
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 pieces of work are live. The many design explorations under /studies stay out of production.
/live · home
/aboutlive
/work/bakebooklive · case study
/work/blackboxlive · case study
/how-i-use-claudelive · process
/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)
    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)

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.
Media query
A CSS rule that only applies at certain screen sizes. It is how one page lays out for a phone and a desktop.