Portfolio v2
This site. A redesign in a monorepo with its own identity, a Go content api, internationalization and verifiable quality gates — including a black-and-white composition test that failed the first version of the interface.
- category
- personal
- stack
- Next.js
- TypeScript
- next-intl
- Tailwind
- Zod
- Turborepo
Context
The previous portfolio communicated a generic fullstack profile. The new thesis is a declared niche — quality, security and operations — and a visual identity derived from Japanese composition: notan, ma and earth pigment instead of alarm red.
Pressure and constraint
The identity forbids the easy path: no HUD, no gauges, no decorative kanji, no asset from the game used as reference. What remains is precision, space and materiality — none of which the eye verifies on its own.
Reading
A two-value notan test — the screen flattened to pure black and white — showed the hierarchy lived entirely in color: the primary CTA, the decision line and the verdict bar vanished. The same measurement showed the opposite of what was expected for the accent, at 1.3% of the fold against a 10% ceiling.
Decision
Rebuild hierarchy in value, not color: a light outline on the CTA over the dark ground, a decision line starting at a high value, a panel behind the verdict. The accent stayed under the ceiling, because a limit is a ceiling and not a target.
Execution
Palette and typography moved into CSS tokens, with no hex written inside a component. Contrast checked pair by pair in both themes, visible keyboard focus on every surface, a skip link as the first focusable element and fonts self-hosted through next/font. The code came from AI agents at three levels, from lightest to strongest: every task had a brief, a list of allowed files and hashes before and after, and a file outside the list fails the delivery. Anything touching the contract, the api or CI is first reviewed by an agent that did not write it, and the merge is mine.
What was measured and cut
- Raising accent saturation for contrast. Rejected by the area rule: more red on a dark ground reads as a system error, not as a decision.
- Using liturgical shu vermilion, #FF3500, as the most recognizable color of the reference. Rejected: the correct pigment is bengara, iron oxide, which is what makes the accent read as ink rather than as an alarm.
How I know it worked
Contrast measured in both themes, accent area summed pixel by pixel across the fold and shared JavaScript size checked in a production build — not in development mode, where an initial 184 kB reading was inflated.
- tightest text contrast
- 4,57tightest pair across both themes, against the WCAG AA minimum of 4.5
- accent area above the fold
- 1,3%measured on the home page at 1440 px wide, against a 10% ceiling
- shared JavaScript
- 102 kBfirst load in a production build, after replacing the icon namespace import with a static map
impact
The identity stopped being a description and became an executable contract: nine rules verifiable in the repository, each with the instrument that measures it. A new screen is only approved after passing the two-value test.
what transfers
If your screen's hierarchy disappears in flat black and white, the problem is composition and no palette fixes it. The test costs one CSS filter and catches the defect before the first user.