This site
A scroll-driven portfolio and printable CV built on a token-based design system, with the career history drawn as a git log.
- TanStack Start
- Tailwind v4
- Motion
This is the fifth portfolio I have built since 2023. The earlier ones were layout exercises: attractive pages that had no answer to "what should a visitor believe about me after reading this".
So the constraint for this one was editorial rather than visual. The site had to carry the evidence itself, the work and the decisions behind it, instead of pointing at a GitHub profile and hoping.
What is on it
- A scroll-driven homepage where each chapter owns the progress of its own effects, rather than one long animation.
- A journey chapter that renders the career as
git log --graph, with overlapping periods as parallel branches that merge back into master. - Experience detail pages for the decisions that are worth a full story.
- A printable A4 CV that is a real document, not a screenshot of the site.
The engineering
TanStack Start for routing and SSR, Tailwind v4 with a token layer: colour, type and motion roles are named in one file, so no component invents a hex value or a one-off type size. motion/react drives the scroll chapters, with a reduced-motion path for everything that animates.
Light and dark are both defined in CSS; the scheme cookie or the OS preference decides on the client, so the server-rendered fallback still works. Case studies are Markdown inlined at build time, which means no filesystem access at runtime and no CMS to maintain.
What I would change
Fewer chapters, sooner. Most of the delay on this version was design ambition, not engineering. The git-log chapter took less time than the three hero variants I threw away.
NEXT CASE STUDY