Personal Portfolio

02 / 08
Next.jsTypeScriptCSSMDXView Transitions

Date

Aug 2026

Contribution

Individual

Type

Personal website

The site you're on. I wanted a portfolio that felt made by hand, not assembled from a template, so the whole thing is built around Japanese ink-wash painting: warm paper, near-black ink, greys diluted from that ink, and one vermilion accent used the way a seal is stamped on a scroll.

The look

Two typefaces

Playfair Display for anything that names something, JetBrains Mono for everything that explains it.

One accent

Vermilion marks only what matters right now: the current page, the current section, the primary action.

Paper grain

A fractal-noise overlay sits over every page, so flat colour reads as paper.

Ink art that blends in

Every painting is colour-matched to the page's paper and blended with darken, so only the ink shows. No rectangles, no visible edges.

The motion

Pages as one strip

Home, Projects, Experience and Contact sit side by side. Moving between them slides the old page out and the new one in, as one camera pan, using the browser's View Transitions API.

Scroll parallax

Hero art drifts slower than the page and fades out; later sections lift into the space it leaves. Pure CSS scroll timelines, no JavaScript on scroll.

A mountain you can explore

On the experience page each role is pinned to a peak. Clicking one zooms into it and opens the details beside it.

A quiet scrollbar

The native bar is hidden. A vermilion cylinder and a dot show which section you're in.

Under the hood

A statically exported Next.js 16 site in TypeScript and Tailwind CSS v4. Projects and experience are MDX files; profile, awards and contact details live in one JSON file. Runtime dependencies are kept to six.