A portfolio for someone with two showable projects, built so that the thinness is the argument rather than the problem

Context

I needed a portfolio, and I had two problems that pointed in opposite directions.

The first was the audience. I want a full-time design role, and I want freelance clients. Those two readers want different things from the same page. A hiring manager will read process, wants to see how I think, and will spend real time on it. A founder with a budget wants to know within thirty seconds whether the work looks good, and does not care about my research method.

The obvious solution — two sites, or a toggle at the top asking who you are — fails both. It asks the visitor to do work before they have any reason to.

The second problem was harder. Almost none of my work can be shown. Two client projects, both internal, neither publishable. No screens I can put on a public page. A portfolio is conventionally a gallery, and I did not have the pictures.

So the question was not "how do I lay out my work." It was: what can a portfolio be when the artefacts are missing?

What the problem actually was

The instinct with a thin portfolio is to make it look thicker. Add concept projects with invented clients. Write outcomes that were never measured. Use the word "led" where "contributed to" is accurate.

I decided early that this was the wrong direction, for a practical reason rather than a moral one: it does not survive an interview. Anyone who asks a second question about an invented metric gets an answer that unravels. The downside is not embarrassment, it is losing a job you were otherwise going to get.

That reframed the whole brief. If the site cannot show much work, and cannot inflate what it shows, then the only thing left to compete on is the quality of the reasoning. Which meant the site had to be built so that reasoning is what it displays — not as a subheading under some screenshots, but as the actual content.

Everything after that followed from it:

• Case studies lead with the decision that changed the design, not the final screen.
• Every record carries a contribution ledger stating what I owned, what I contributed to, and what sat outside my scope. Volunteering the limits of my role is more credible than claiming all of it.
• A record with no visuals is a complete record, not a broken one. Research readings — an interview count, a coverage matrix, a participant quote — do the work images would have done.
• The site says plainly how much work is on it. "Two client projects and three self-directed concepts are on record. That is where I am, and I would rather state it plainly than dress it up."

Explorations

Five visual directions were built far enough to judge, and abandoned.

Glassmorphism. Frosted panels, soft depth. Rejected: it is the default output of every AI design tool, it has poor contrast, and it dates a site to a specific year.

Warm editorial. Cream, serif, generous measure. Rejected for the opposite reason to the first — it looked competent and completely anonymous. It also read as AI-generated, which is now what "tasteful default" looks like.

Swiss archival. Grid, Helvetica, no colour. Rejected: correct but cold, and it made a thin portfolio feel thinner.

Aperture. Colourless, high contrast, photographic. Rejected: it needed photographs, and photographs were the thing I did not have.

A dark technical direction with a single bright accent. This one was close, and it was the most instructive failure: it was close to an existing consumer brand's identity. Not an accidental resemblance — the same dark ground, the same dot-matrix numerals, the same single accent. Shipping it would have meant a designer's personal site whose most distinctive feature belonged to someone else.

That was the useful moment. Rather than abandon what was working, I asked what the direction was for — and found that it had no idea underneath it. It looked technical because technical looked good.

Decisions and trade-offs

The concept: an observation log. The site is structured as an observatory record. Projects are catalogued objects with designations. The signature effect is resolution — a point of light blurring into a disc and sharpening into an image.

It is not decoration. A telescope is an instrument for understanding something before you can reach it, which is what research-led design is. Once that held, every other decision had somewhere to be argued from, and the resemblance problem solved itself: the star field is data, the coordinates are derived from the pointer, and the differentiating details came from the idea rather than from taste.

Plain navigation under a themed site. The menu says Work, Services, About, Contact. It does not say Index, Log, or Lab, though earlier versions did — I could not reliably decode my own menu, which is a finding, not a preference. The metaphor lives in headings and body copy where it is a pleasure. It never touches wayfinding, where it is a tax. A recruiter with fifteen tabs open has no patience for a decoded menu.

No preloader. An animated intro before a portfolio is the most reliable way to lose a hiring manager who is comparing twenty of them. The reveal happens underneath fully readable content: the headline resolves on load while the page is already legible. Same effect, no gate.

One journey, not a maze. The homepage is a five-part sequence, and it is the only route with one. Every other page is direct access, and the link to the work sits in the navigation from the first pixel. Someone who wants to skip the experience can reach the work in one click. That constraint cost some drama and is the single decision most likely to have saved an interview.

The wordmark is PB—00. The projects are PB-01 through PB-06. Zero is the observer — the origin the coordinates are measured from. The first version used PB-01, which collided with the first project's designation: the same string meaning two things on one page.

Accessibility as a floor, not a pass at the end. Every interactive element has a visible focus ring, all motion is disabled under a reduced-motion preference, and the whole thing is keyboard reachable. It matters more than usual here: a designer whose site fails an accessibility check has disqualified himself before anyone reads a word.

Everything is written down. The site is governed by two documents — one for the design system and its rules, one holding every word of copy. They exist because the build ran across many sessions, and a rule that lives only in my head gets relitigated every time. When a decision changed, the document changed first.

What I got wrong

I wrote breakpoints against the mobile artboard width — twice. 390px is a canvas size in a design file. It is not a property of any layout, and both times a rule keyed to it broke on real phones at 412 and 430px. The second occurrence is the interesting one: I had already made the mistake, fixed it, and made it again in a different rule. The fix was to ban the number outright and record why.

I specified the star field as a flat opacity band and it read as noise. Every star roughly the same brightness, evenly scattered. The eye reads uniformity as texture and filters it out. The fix was not "make them brighter" — it was to specify a distribution weighted heavily toward the faint end, with size following brightness. Then a handful of bright stars give the eye something to catch on and the faint ones become depth.

I nearly shipped a password gate that was not a gate. An early version checked the password in the browser, which means the protected content is readable from the page source by anyone who looks. For client work under a confidentiality agreement, that is not a cosmetic failure. It was replaced with a check that runs before the page is served.

I chased a visual direction for weeks on the strength of it looking good. The near-clone above was not a small detour. What made it recoverable was asking what the direction was for, which is a question I should have asked at the start rather than after the third iteration.

What I'd revise

[to write]