Independent · Design & Development

Personal Portfolio

Built and maintain a portfolio showcasing product case studies, design decisions and hands-on web development work.

Objective

The product objective

One site that has to work as a design portfolio and as a front-end code sample at the same time — so the way it is built is part of what it shows.

Role: Independent project — product, design, front-end and integration
Timeline: Independent Project
Deployment: Deployed on Vercel; every route statically generated.

Stack

Technology stack

Next.js 16 (App Router)
React 19
TypeScript
Tailwind CSS
Motion
GSAP ScrollTrigger
Lenis
Vercel

Ownership

Designed, implemented, integrated

What I did on each side of the project — kept separate, because they are different kinds of work. AI tools accelerated implementation; understanding the code, reviewing the output, integrating it and validating it stayed with me.

What I designed

The visual system — an editorial paper-and-ink palette, a display grotesque with a mono annotation layer, and one section rhythm used everywhere.
Long-form case studies with a contents rail, and five scroll-driven figures that explain the practice — how design, engineering and AI combine, how an interface is assembled, an AI product loop, how a problem gets ordered, and the method as one machine.

What I implemented

Feature-folder architecture: each case study owns its components and content; shared case-study primitives sit in one place.
Every fact — dates, metrics, contact details, projects — read from two typed content modules, so nothing is duplicated.
Motion that honours the reduced-motion preference everywhere: pinned, scroll-driven figures fall back to a static, fully written-out sequence on phones and under reduced motion — and GSAP is never downloaded there.
A contents rail that builds itself from the headings on the page, so a new section is indexed without being registered.

What I integrated

Static generation for every route, metadata, sitemap and schema.org JSON-LD, deployed on Vercel.

Where AI assisted

Claude is used as a coding partner — for audits, refactors and first drafts — with every change reviewed, built and checked in the browser before it ships.

Problem solving

Challenges and decisions

01
Challenge
The same employment dates and metrics appeared in a timeline, cards, metadata and case studies, and drifted out of sync.
Approach
Moved every fact into one typed source with structured dates and a single formatter; the pages derive their copy from it.
02
Challenge
The hero headline is the page's largest paint, and a fade-in entrance kept it from counting as painted until hydration finished.
Approach
The headline reveal is a mask, not a fade: the text is fully opaque from the first frame and rises from behind its own clip box, so the entrance costs nothing in Largest Contentful Paint.
03
Challenge
The hero's project tiles had to travel into the real case-study cards below without a second copy of either ever being on screen.
Approach
A sibling layer measures both ends each frame and flies one tile at a time, hiding only the element it is standing in for — and below tablet width, or under reduced motion, nothing flies at all.

Code

From the repository

Dates are stored structured and formatted in one place, so no page carries its own copy.

constants/profile.tsView on GitHub

/** "November 2024 – May 2026", "May 2026 – Present". */
export function formatPeriod(role: Pick<Employment, "start" | "end">, short = false): string {
  const end = role.end ? formatYearMonth(role.end, short) : "Present";
  return `${formatYearMonth(role.start, short)} – ${end}`;
}

Want to work together?

Let's build the next one together.

Back to Portfolio Get in Touch