This Portfolio Website | Personal Project

Overview

This is my personal portfolio site, built from scratch using the same Vercel/Sanity stack I helped implement at Grayscale. As a PM, I've spent years speccing out features and working alongside engineers, but this was my first time actually building something myself.

I used Claude Code to build the entire site. It let me move fast while still learning the fundamentals along the way. The goal was to create a clean, modern portfolio that I could easily maintain myself without needing to touch code every time I want to update something.

Claude Code

This project was developed almost entirely with Claude Code, Anthropic's AI coding agent. As AI-assisted development becomes more common in the tech industry, I have been getting hands-on experience configuring and learning how to get the most out of these tools.

A few things I set up to maximize Claude Code's effectiveness:

MCP Servers - I connected several MCP servers to extend what Claude Code could do. Chrome DevTools and BrowserStack for debugging across browsers, Sanity for direct CMS access, and Context7 for pulling in up-to-date documentation on libraries and frameworks.

Skills - I used the frontend-design skill for UI work, along with skills for creating documents and other file types.

CLAUDE.md - This is a markdown file that lives in the project root and gives Claude Code context about the codebase. Mine includes the tech stack, project structure, design tokens, key commands, and recent updates. It acts like onboarding docs for the AI, so it understands the project without me re-explaining everything each session.

Tech Stack

The site runs on Next.js with TypeScript, Tailwind CSS for styling, and Framer Motion for animations. All content lives in Sanity.io, and the whole thing deploys automatically to Vercel whenever I push to GitHub.

CMS

Every piece of content on this site is managed through Sanity Studio. Project descriptions, images, the "What I Do" section, all of it can be updated without opening VS Code.

I designed the CMS schemas myself, drawing on years of using (and being frustrated by) various content management systems. The setup is simple and intuitive. Since I only update my portfolio a few times a year, it needed to feel familiar even after months away.

Animations

The site uses scroll-triggered animations throughout. Elements fade in as you scroll, project cards scale on hover, and page transitions feel smooth. Most animations complete in 150ms to keep things snappy. Scroll triggers fire early using negative viewport margins, so users never feel like they're waiting for content to appear.

Performance

Images are automatically optimized through Sanity's CDN with WebP conversion, cutting file sizes by 60-80%. The CDN is enabled in production for faster page loads, and a webhook system instantly clears the cache whenever I publish updates in Sanity.

All data fetches have error handling built in. If something fails, the site shows a fallback instead of crashing.

Security

I set up Dependabot to run weekly security scans and flag any vulnerabilities in dependencies. When Next.js had a security issue in early December, Dependabot caught it and I updated within hours.

Contact Form

The contact page uses Formspree to handle form submissions. No backend required. Users can reach out directly from the site, and messages land in my inbox without any friction.

Additional Thoughts

This project was a lot of fun, and also acted as a great way to better market myself while continuing to learn and improve upon my app-building skills. Hopefully your user experience is pleasant! I'm always open to feedback so feel free to let me know what you think via the Contact page.