Gist

Gist is a portfolio for a product or UX designer looking for their next role, built around written case studies. Warm paper, near-black ink, a heavy serif for the thinking.

Its signature is a Skim / Read switch in the header of every page. In Read, each case study is the full story (context, problem, research, decisions, outcome, reflection) with its key sentences highlighted. In Skim, everything but those sentences, the before/after slider and the outcome folds away, so a recruiter gets the case in about a minute. Cards swap their summary for the outcome line and the choice follows the visitor. Press S to switch.

You mark a key sentence by making it bold in the CMS. That's all: the highlight, the Skim version and the reading times come from the same text.

Features

• Five case studies in one CMS collection, each with its own page: a sticky contents column, six sections, a before/after slider and outcome figures

• Read and Skim times on every card and in the header

• A Work index with platform filters, Newest / Most impact sorting and an "Also worked on" list

• Home: a plain statement and portrait, four case cards with two figures each, a CV table, two quotes, About and a contact panel with copy-email

• Desktop, tablet and phone layouts, 404 and privacy pages

• Every colour and font is a shared style; no motion on load or scroll

Framer Skills

Five ready-made instructions for Framer's AI agent, plus a page showing every colour, font and block:

• /design-system: add pages and sections that match

• /rebrand: your name, colours, fonts and words

• /content: add a case study, with key sentences and times

• /effects: edit the switch, contents, slider and filters

• /before-publish: check every page in Skim and Read