Art-directed case studies
A small set of composed layout blocks that can be arranged per project, instead of one repeating template.
03 — Starter website
Editorial portfolio
A creative portfolio for people whose work is visual — art-directed, quiet, and fast enough that large imagery never feels like a cost.
Who it is for
Built for a particular kind of team.
- Photographers, designers and studios whose work is judged on how it is presented
- Practices with a small number of substantial projects rather than a long catalogue
- Anyone who has been offered the same masonry grid three times and wants a considered alternative
The challenge
What usually goes wrong here.
Photographers, designers and studios are usually offered the same template: a masonry grid, a lightbox and a contact form. It flattens very different bodies of work into one shape, and the person viewing it never gets a sense of pace.
The challenge is to give each project its own composition without rebuilding the site every time, and to keep large imagery genuinely fast on a phone.
How it works
How it actually feels to use.
The index is a list, not a grid — year, title, discipline — with a large preview that changes as you move through it. It reads like a contents page and sets an editorial tone before any image loads.
Each project is a composed page. Full-bleed plates, half-column details, quiet type, and generous space between sections, so a viewer moves at the pace the work deserves.
Motion is limited to masked headings and a shallow parallax on plates. Nothing moves while it is being read.
Baseline capabilities
Already built, already working.
Image pipeline
Responsive AVIF and WebP with reserved dimensions and priority only on the first plate, so nothing shifts and nothing over-downloads.
Indexed navigation
A typographic index with keyboard navigation and a previous and next path through the work.
Editorial typography
A display and body pairing with real hierarchy — oversized statements against small precise metadata.
Enquiry flow
A short enquiry form that asks about scope and timing, routed to email without a backend to maintain.
Content editing
Structured content files, or a CMS once there is a genuine editing workflow to justify one.
What we adapt
The part that becomes yours.
A practical starting point, adapted to your workflow, users, integrations, and growth stage.
Typography and grid
The type pairing, scale and column rhythm are art-directed for your work rather than picked from the foundation. This is the part that makes it yours.
The shape of a case study
Which layout blocks exist, and the order a project is allowed to use them in, set against the work you actually have.
Index behaviour
What the list shows and how it is ordered — by year, discipline or client — and what the preview does as someone moves through it.
Editing workflow
Content stays in the repository until there is a real reason to add a CMS. When there is, we add one you will actually use.
Configuration versus build
Typography, grid and the rhythm of each case study are art-directed per client. The image pipeline, navigation and content model are the reusable parts.
Possible integrations
It has to fit what you already run.
These are the connections this starter is commonly asked for. Each one is scoped against the specific system you use — an integration is only real once we have seen the account it has to talk to.
- A headless CMS, once there is an editing workflow to justify one
- Email and enquiry routing
- Image hosting and delivery networks
- Analytics without third-party tracking scripts
- Print and PDF export of a case study
Stack rationale
Chosen for this problem, not for the CV.
- Next.js static rendering
- A portfolio changes rarely and is read often. Fully static pages give the fastest possible first paint and cost almost nothing to host.
- next/image with AVIF
- Photography is the payload. Modern formats and correct sizing usually cut image weight by more than half with no visible loss.
- GSAP
- Masked heading reveals and a shallow parallax, scoped per section, with a complete reduced-motion path.
- Structured content files
- Typed content in the repository until the client actually wants to edit without a developer. A CMS added too early is a cost with no reader.
Responsive views
The same interface at three scales.
Other starter websites
- CRM starterA sales workspace that adopts the pipeline your team already sells with, instead of imposing a new vocabulary on them.
- HRM starterA people system that answers the three questions managers actually ask, without turning the team into a data-entry department.
- Travel starterA destination site that sells the trip through story and detail, then makes the enquiry the easiest thing on the page.
- ERP starterAn operations layer that replaces the spreadsheet the business actually runs on — one module at a time.
Want a Portfolio shaped around your business?
Bring the process you use today, including the awkward parts. That is where the useful decisions come from.