This Portfolio

Overview

I rebuilt my portfolio from scratch using React and Next.js — treating the process as both a design challenge and a learning opportunity. Rather than using a website builder, I wanted to own the full stack: from component architecture to deployment.

The Problem

My previous Wix portfolio communicated design work but not technical range. In a product design landscape where engineers and designers increasingly overlap, I wanted a portfolio that showed I could think in systems, write code, and ship something independently. A template wouldn't do that — I needed to build it.

Process

1. 1.

   Audited the existing Wix portfolio for content gaps, visual inconsistencies, and case study depth — identified that projects lacked problem framing and measurable outcomes

2. 2.

   Researched minimal portfolio patterns used by designers who straddle engineering: studied typography-forward layouts, monochromatic palettes, and content hierarchy patterns that work for recruiter scanning behavior

3. 3.

   Chose Next.js for static site generation and GitHub Pages for deployment — the git-based workflow signals technical credibility to product teams

4. 4.

   Designed a monochromatic system with CSS custom properties for light/dark mode — no heavy theming library, just variables and next-themes for the toggle

5. 5.

   Built every component in React iteratively with Claude as a learning collaborator, focusing on understanding the reasoning behind each pattern rather than copying boilerplate

6. 6.

   Documented the entire process as a live case study within the portfolio itself — a self-referential loop that demonstrates both design thinking and follow-through

Outcome

A fully custom portfolio deployed on GitHub Pages — demonstrating design judgment, React fundamentals, and the ability to ship independently. This case study is the portfolio's proof of concept: the medium is the message.