A work page that explains itself in ten seconds

A visitor to a work page tends to scan, not read, and has to work out quickly whether the person behind it builds the kind of thing they need. Each entry has to answer three questions fast: what is this, who is it for, and why should I believe it exists. Everything else on the card is there to make those answers quicker to find. The "ten seconds" in the title is a design target for the test at the end, not a measured figure about visitors.

The anatomy of an entry

Every project, whatever its size, can be described in the same five slots:

Slots two and three are the ones people skip, and they are what makes a card explain itself. "A brand identity" tells nobody anything. "Identity and website for a small bakery" tells a bakery owner this page is for them and tells an agency what level of work to expect.

Proof you can honestly give

The fourth slot is where portfolios drift into fiction. Stay with facts that are true and checkable:

• Existence: a live URL, a store listing, a repository, a published article.
• Time: the month and year it launched or was last updated.
• Role: what you did, in one verb phrase: "designed and built", "built the front end", "wrote the copy".
• Scope: a concrete, verifiable detail: "four languages", "works offline", "no JavaScript required to read it".
• Outcome only when you can document it: and say where the number comes from.

Leave out adjectives (award-winning, innovative), unsourced percentages, and testimonials you cannot attribute. If you have nothing to put in the slot, the project may not belong on the page yet.

Which proof line fits depends on what you can show:

A fictional before and after

Everything below is fictional. Here is an entry as most people first write it:

Harbourline A modern, clean and innovative digital experience that strengthens the brand and drives engagement. View project

It names a project and then says nothing: fourteen words, no noun a visitor could picture. Fixed, using the five slots:

Harbourline (fictional) Booking site for a small ferry operator. Built for first-time visitors checking times on a phone. Designed and built, launched March 2026. Works with no JavaScript. See the live site

The rewrite's description and proof lines use twenty-six words, answers every question, and every clause can be checked by opening the site. It is also honest about its limits: it claims what was done and what can be seen, not what the visitor will feel.

Order, count and grouping

• Lead with the project that best matches the work you want more of, not the most recent one. People often sample the first entries and skim the rest.
• Keep the list short. As a working judgement, beyond about eight entries scanning gets harder and quality varies. Link an archive for the rest.
• Group only if you must. Two or three groups with plain labels ("Websites", "Tools", "Writing") help a visitor with a specific need; five groups hide everything.
• Be consistent. Same slots, same order, same image shape in every card. Consistency lets the eye compare entries without reading.
• Do not auto-rotate or hide entries behind a carousel. If the content is worth showing, show it.

Thumbnails or plates

The image does two jobs: it makes the card scannable and it proves something.

Whatever you pick, set aspect-ratio (or width and height attributes) so the page does not shift as images load. Give every image meaningful alt text that describes what it shows, or an empty alt="" when the same information sits in the adjacent text, which is the case the W3C images tutorial describes for redundant images. Keep the first visible card's image at normal loading priority and lazy-load those below the fold; the details are in images in 2026. Do not bake the project name into an image. Text inside pictures cannot be selected, is not read by assistive technology unless the alt repeats it, and does not scale with the reader's settings. WCAG 1.4.5 Images of Text asks for real text wherever the presentation can be achieved with it.

Links that behave

Make the whole card a target without nesting links inside links. The reliable pattern is one real link on the project name, stretched over the card with a pseudo-element:

<article class="work-card">
  <img src="/img/harbourline.avif" width="1280" height="800" alt="Ferry timetable on a phone screen" loading="lazy">
  <h3>
    <a href="https://example.com/" target="_blank" rel="noopener">
      Harbourline<span class="visually-hidden"> (opens in a new tab)</span>
    </a>
  </h3>
  <p>Booking site for a small ferry operator. Built for first-time visitors on a phone.</p>
  <p class="proof">Designed and built, launched March 2026.</p>
</article>

.work-card { position: relative; }
.work-card h3 a::after { content: ""; position: absolute; inset: 0; }
.work-card:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

The :has() rule draws the focus ring around the whole card when the link is focused by keyboard, so the visible indicator matches the area you can click. Points worth checking:

• Link text must make sense. WCAG 2.4.4 (Link Purpose in Context) allows a vaguer link if its purpose can be determined from the link together with its context, such as the same sentence, paragraph, list item or table cell. "Read more" repeated six times still serves people who navigate by a list of links poorly. Use the project name as the link text. If you prefer a visible label such as "See live", keep the visible text inside the accessible name, as Label in Name (2.5.3) requires.
• Warn about new tabs in text, as above. MDN says that in newer browsers target="_blank" implicitly gives the same protection as rel="noopener", so writing the attribute is optional but harmless.
• Internal case studies stay in the same tab. Reserve new tabs for external sites.
• Show where it goes. Putting the domain in small text under the title tells the visitor it is an external site.
• One stretched link per card. A second link inside the card, such as "case study" beside "live site", needs position: relative and a higher z-index to stay clickable above the stretched area, and it must have its own text.
• Check every link before launch, and again on a schedule. A dead project link is worse than no entry.

Phones

Many visits to a work page will be on a phone, where hover does not exist.

• No hover-only information. If a hover preview adds detail, the same detail must be visible by default on touch screens. Wrap enhancements in @media (hover: hover), which MDN describes as matching when the primary input can hover.
• One column, image above text, name first in the text, so the order of reading matches the order of importance.
• Target size: WCAG 2.2 criterion 2.5.8 asks for pointer targets of at least 24 by 24 CSS pixels, with exceptions for spacing among others. The stretched card link far exceeds that.
• Avoid horizontal carousels for the list itself; they hide entries and compete with vertical scrolling.
• Test at 360 px width and at 200 percent zoom.

What goes wrong

• Every card sounds the same. If the "what it is" lines read "A modern website for a brand", the slot is filled with adjectives. Replace with a noun a stranger could picture.
• The proof line is a mood. "Delivered a polished experience" cannot be checked. Swap it for the one thing a visitor could verify in under a minute.
• The image says nothing. A stock-looking plate or a full screenshot at 300 px wide adds no information. Crop to the detail that explains the project or use the same plate for every card on purpose.
• Links that look like decoration. If only the title is a link and it matches the body colour, visitors will not click. Underline it or give it the site's link style.
• Hover is the only affordance. A card that reveals its link on hover has no link on a phone.

Test it in ten seconds

Show the page to someone who does not know you, for ten seconds, then hide it. Ask:

1. What kind of work does this person do?
2. Name one thing on the page.
3. Would you know where to click to see it?

If they cannot answer the first question, the headings and the what it is lines are not doing their job. If they cannot answer the second, the cards look identical. The third tests the link treatment. Fix what failed and repeat with a different person. A handful of people will usually repeat the same failure, which is enough to act on; this is a qualitative check, not a measurement. The same clarity helps search: a card's text is also the page's snippet material, covered in titles, descriptions and snippets. Frames and borders around the cards deserve a deliberate choice too; see frames, brackets and borders in interface design.

Checklist

• Five slots per entry: name, what it is, who it is for, one checkable proof line, one link.
• No adjectives as proof; no numbers you cannot source.
• A short list, strongest first, one consistent card.
• Cropped detail or designed plate, with fixed aspect ratio and honest alt text.
• One stretched link per card, descriptive text, new-tab notice, 24 px minimum targets.
• Ten-second test with a stranger before it ships.