ENGINEERING / FRONTEND
joanduan.dev
A self-built portfolio in a week — brand identity, code, copy, and ship. The site you are reading is the project.
Role
Designer + Developer
Timeline
1 week · May 2026
Stack
Next.js 16 · Tailwind v4 · TypeScript · Vercel
Status
● Live
Why build it myself.
Most portfolios are template-shaped. Mine couldn't be — the work I want to do sits at the intersection of business thinking and engineering taste, and a template would smooth out exactly the edges that matter.
So I treated the portfolio itself as a Wirtschaftsinformatik problem: brand decisions, code decisions, copy decisions, deployment decisions — all the same project, all needing to land together.
What's underneath.
Fraunces serif paired with Inter sans. A four-color system: ivory, near-black, caramel, mute. Tailwind v4 with CSS variables. Inline SVG schematics for each project card — black line work, one caramel highlight per visual, never decoration.
The Projects section got rebuilt once: first version came out too decorative (“girly handbook” was the verdict). Second version went Swiss-editorial. The taste lives in what got removed, not what got added.
What I'm taking from it.
Brand work and engineering work are the same work. The decision to use Fraunces over Georgia, the decision to use SVG over PNG, the decision to call a section “What I'm working on” instead of “Selected Work” — none of these are decoration. They're the same thinking: making something legible to the person on the other side.
Sustainability and accuracy are most important. I'm not here to participate in competition. I'm here to do real work.
This portfolio is the first place I tried to hold that thesis end-to-end.