Back to Blog

How I Built This Website

A product manager's approach to personal branding

Abstract illustration of scaffolding and construction frames with organic growing elements representing craft and creation

Most product managers have a portfolio problem. We need to show our work, but our work is inherently invisible. The shipped features blend into products. The strategy docs live in company wikis. The "aha" moments happened in meetings nobody recorded.

So I built this site to solve that problem for myself. Not by listing projects and outcomes, but by demonstrating how I think.

Why build from scratch?

I could have used Notion, Framer, or a template. But I wanted:

  1. Full control over interaction design - The micro-interactions matter. How a tooltip appears. What happens on hover. These details communicate craft.
  2. A forcing function to learn - I've managed engineers for years. Building something myself keeps me grounded in the reality of implementation.
  3. Longevity - Platforms change. Code I control doesn't disappear when a startup pivots.

The meta-point: building this site is product work. Scoping, prioritizing, shipping iteratively, balancing polish against time.

The tech stack

Next.js 15 with App Router and Turbopack. I wanted React for component composition, but with static generation for performance. The new App Router patterns are clean once you internalize them.

Tailwind CSS for styling. I resisted it for years, then tried it and never looked back. The utility-first approach matches how I think about design systems.

Vercel for hosting. Push to main, it deploys. No infrastructure to manage.

Claude Code for implementation. This is the interesting part.

Building with AI

I used a combination of Claude.ai (for content and strategy) and Claude Code (for building and design). The workflow:

  1. Content first - Draft case study prose in Claude.ai, iterating on narrative structure
  2. Design exploration - Describe interactions I wanted, get implementation options
  3. Code generation - Claude Code writes the components, I review and refine
  4. Debugging - When something breaks, Claude traces through the code faster than I can

The productivity gain is real. I shipped features in hours that would have taken days. But AI didn't replace product thinking - it amplified it. I still made every decision about what to build and why.

Design inspirations

I studied several sites before starting:

rog.ie (Rogie King) - His playful hover effects and custom cursors showed how personality can come through in interaction design. I borrowed the stylized text approach and the casual, direct tone.

alantrotter.com - A writer's portfolio that treats text itself as the design element. His hypertext fiction pattern - where clicking words reveals more text - inspired my sidenote system.

Tufte CSS - Edward Tufte's principles: high information density, sidenotes instead of footnotes, respect for the reader's intelligence. This became the foundation for my case study layout.

The case study system

The hardest part was the case study architecture. I needed:

  • Long-form prose with clear narrative structure
  • Sidenotes for context without interrupting flow
  • Embedded prototypes to show, not just tell
  • Password protection for sensitive client work (since removed for published case studies)

The sidenote system went through three iterations. First, imperative DOM positioning (broke on re-renders). Then, CSS-only positioning (couldn't handle collision detection). Finally, a React-controlled system with context that calculates positions after all refs are available.

What I learned

Ship early, iterate publicly. I launched with one case study live and others behind WIP overlays. Better to have something real than wait for perfection.

Constraints enable creativity. The 650px content column, the three-column grid, the sidenote system - these constraints forced clarity.

Code is a thinking tool. Building this myself surfaced questions about my work I hadn't considered. What outcomes actually mattered? What process details would resonate? What would bore people?

What's next

The backlog includes:

  • More case studies (when I can discuss them publicly)
  • A release notes / shipping log section
  • Process diagrams explaining how I approach problems
  • Improvements to mobile experience

If you're a PM considering building your own site: do it. The process of articulating your work is valuable even if nobody ever sees the result.

Built with Next.js 15, Tailwind CSS, and deployed on Vercel.