Portfolio website prompt for Claude

Somebody opens a portfolio with one question, and it is not who you are. It is whether the work is any good. Every element above the first image is time spent not answering that.

So a portfolio inverts the rule every other page in this set follows: it has no hero copy at all. The first screen is work, full bleed or three up, with the name set at 18px in a fixed corner and nothing else competing.

Short verdict: ratio 1.5 from a 12px root, spacing in powers of two, four near neutral values plus one, and a 940ms clip-path wipe rather than a fade. The Thanor library ships designs written at that resolution.

Why the grid is the hero#

A portfolio is the only page type here where the content was made by somebody better at design than the template. That inverts the usual brief. The page is not trying to look good, it is trying to lose an argument with the images.

Three decisions carry almost all of it:

• One aspect ratio for the entire grid. 4:5 in a three column layout, 3:2 if the work is landscape, and never both. A masonry wall of mixed ratios reads as a folder, not a body of work, and no amount of image quality corrects that impression.
• Four of the five colours near neutral. The work supplies the saturation. A branded accent behind a photograph is a page arguing with its own contents.
• One typeface, two weights. A display face paired with a body face doubles the visual voices on a page whose job is to have none.

Then the thing a model will add unless it is forbidden. Ask Claude, ChatGPT or v0 for a portfolio and the default output is a centred headline, a gradient background, a stats row and a skills grid with icons. None of the four belongs. The brief has to name them as refusals rather than simply omit them, because omission reads as an unfilled slot and a model fills slots.

The last decision is the caption. Each thumbnail gets three lines: the client, the kind of work, the year. Set at 12px, in muted, 8px under the image, left aligned to the image edge. No card, no border, no hover reveal, because a caption that appears on hover does not exist on a phone.

Six steps, six roles#

Ratio 1.5, the perfect fifth, from a 12px root. It is the widest ratio in these ten specifications and a portfolio can carry it, because there are only six text roles on the whole site and wide gaps between six things read as confidence.

Weight 400 on every step including 91px. A portfolio that reaches for bold is compensating for work it does not trust.

Spacing is powers of two: 8, 16, 32, 64, 128, 256. Six values, no sevenths. Grid gutter 32px, section padding 128px top and bottom, 256px once, above the contact block. On a phone images go edge to edge and the gutter drops to 8px.

The rule measures 1.33:1 against paper deliberately. A divider you can see is a divider competing for attention with a photograph.

One curtain, one hover#

Two curves, and the first one is the only piece of motion anybody will remember.

--ease-curtain: cubic-bezier(0.19, 1, 0.22, 1);  /* 940ms */
--ease-thumb:   cubic-bezier(0.33, 1, 0.68, 1);  /* 240ms */

--ease-curtain at 940ms drives a clip-path wipe on every image: inset(100% 0 0 0) to inset(0), bottom edge to top, triggered once when the image crosses 15% of the viewport, 120ms stagger down a column and none across a row. The duration is long by the standards of the other nine specifications here, and it can be, because an image arriving is the only event on the page.

A wipe rather than an opacity fade, for a reason worth stating in the brief: a fading image is indistinguishable from an image loading slowly, so the visitor reads craft as latency. A wipe cannot be mistaken for a network condition.

--ease-thumb at 240ms does exactly one thing, and the list of what it does not do is longer than the list of what it does.

• Hover: scale(1) to scale(1.02), behind @media (hover: hover), caption static. No lift, no shadow, no overlay, no play icon, no title sliding up.
• No entrance on the name, no parallax on the grid, no marquee of client names, no cursor follower, no page transition.

The hero specification covers the opposite case, a page whose first screen is copy, and the contrast between the two briefs is the clearest illustration of why one motion system cannot serve both.

The order of a portfolio, and its refusals#

Five blocks. The order matters more than on most pages because there are so few of them.

1. The grid. Immediately, above everything, 12 items maximum. Name in a fixed top left corner at 18px, one link to Contact top right. No navigation bar.
2. One line. Who you are and what you do, at step 4, 61px, maximum 14 words, on its own screen with 256px of air. This is the whole About section on the index.
3. Three case pages. Linked from the grid, not summarised on it. Each is one column, 680px measure, images at full container width, 128px between them.
4. The rest, as text. A list of everything else: client, year, one line. No thumbnails. A second grid of weaker work weakens the first grid.
5. Contact. One email address at step 3, in Live, and nothing else. No form.

Now the refusals, written as a block in the brief because each one is a thing a model adds by default:

• No hero headline, no subhead, no primary button above the grid.
• No gradient anywhere, no glassmorphism, no blurred colour blobs.
• No skills grid, no tool icons, no percentage bars, no years of experience counter.
• No testimonial carousel. A portfolio is the testimonial.
• No dark mode toggle. Pick the one background the work looks correct against.

That refusal list is why a portfolio brief has to be explicit rather than adjectival: clean and minimal do not remove a skills grid, and a sentence saying no skills grid does.

The verdict on a portfolio brief#

Lead with the work, one ratio, one typeface at one weight, four near neutral colours and a fifth used once, a 940ms wipe, and a written refusal list. Built that way a portfolio reads as a body of work, and Thanor sells designs with those decisions already made. A centred headline above the grid reads as a template somebody filled in.

The brief to paste#

Build a portfolio index and one case page. No hero section.

TYPE: ratio 1.5 from a 12px root: 12, 18, 27, 41, 61, 91. Weight 400 at
every step. One typeface. Body 18/29. Captions 12/17.

SPACE: 8, 16, 32, 64, 128, 256. Grid gutter 32px, section padding 128px,
256px above contact. On phones images bleed edge to edge, gutter 8px.

COLOUR: paper #FAFAF7, rule #DDDBD3 at 1px, ink #141413, muted #73716A,
live #1B4D3E on the contact link only.

GRID: three columns, every thumbnail 4:5, one ratio throughout, 12 items
maximum. Caption under each: client, kind of work, year, 12px muted, 8px
below the image, no card and no border.

MOTION: clip-path wipe inset(100% 0 0 0) to inset(0) on images,
cubic-bezier(0.19, 1, 0.22, 1) 940ms, once at 15% of viewport, 120ms
stagger down a column. Hover scale 1 to 1.02, cubic-bezier(0.33, 1, 0.68,
1) 240ms, behind @media (hover: hover). Nothing else moves.

ORDER: grid / one 61px line of who and what, 14 words, alone on a screen
/ three linked case pages, single column, 680px measure / remaining work
as a text list with no thumbnails / one email address at 41px.

REFUSE: hero headline, subhead, button above the grid, gradients, glass
effects, skills grid, tool icons, percentage bars, experience counters,
testimonial carousel, dark mode toggle.

Paste that into Claude and the refusal block does more work than the rest combined. Browse the Thanor library for designs where the refusals are already written down.