Every developer eventually builds their own portfolio. Most look the same — a hero, a skills grid, a contact form. The challenge here was to make something that felt like a considered piece of design rather than a checklist.
The Problem
I needed a portfolio that communicated craft without being loud about it. The common pattern — saturated gradients, hero animations, skill percentage bars — signals effort but not taste. I wanted the opposite: restraint that demonstrates confidence.
The Approach
The design takes direct inspiration from Canal Street Market in New York — a physical space that uses raw concrete, tight typography, and negative space to feel premium without ornamentation.
Typographically, the whole system rests on two weights: Ogg Roman (a high-contrast serif) for display text, and Apercu Mono for all functional copy. No sans-serif. No system font fallback visible anywhere.
The signature interaction is the marching-ants border — a dashed border that animates clockwise on hover. It's implemented entirely in CSS using four background-image gradients, no SVG or canvas. The animation is paused by default and triggered on :hover, so the page is still until you touch it.
background-image:
linear-gradient(90deg, var(--color-border) 50%, transparent 0),
linear-gradient(90deg, var(--color-border) 50%, transparent 0),
linear-gradient(180deg, var(--color-border) 50%, transparent 0),
linear-gradient(180deg, var(--color-border) 50%, transparent 0);
animation: marchingAnts 0.4s linear infinite paused;
The Result
A portfolio that loads fast, reads clearly, and has one interaction worth noticing. The marching-ants detail became the foundation for the Next.js rewrite — it's now a reusable @utility class in Tailwind 4 that any component can apply.