Building This Portfolio

Setting up the environment: First, I needed Node.js installed to run the Next.js development server locally. Claude initially tried to install it via Homebrew, but that was taking too long. We pivoted and downloaded Node.js directly from the official site instead, which got me up and running in minutes.

Working with Git branches: Claude cloned the repo locally and created a development branch where we started building the site. This setup meant we had version control from day one. We built the entire site on the dev branch, which kept main clean while we experimented. After each work session, Claude committed changes with descriptive messages and pushed them to GitHub. This gave us a full history of every change and made it easy to roll back if needed.

Testing locally: Throughout development, I ran the site locally at localhost:3000. This let me review everything on mobile and desktop, catch layout issues, and make tweaks in real-time. When I spotted problems with mobile padding or footer layout, Claude fixed them immediately and we tested again. This quick feedback loop made iteration fast and productive.

Building this site with Claude Code took about 15 hours over 3 days. If I had built it in Framer, I estimate it would have taken 40-60 hours, and I would have hit platform limitations on custom interactions like the image lightbox and some animations.

Time saved: 25-45 hours (roughly 2-4x faster)

Beyond time, I'm also saving on ongoing costs. Hosted platforms like Framer, Squarespace, or Webflow charge $15-40/month ($180-480/year). My setup with Next.js on Netlify's free tier costs only my annual domain renewal, about $12/year.

Annual savings: ~$170-470/year

Plus, I have full ownership of the code. No platform lock-in, no feature limitations, and I can extend or modify anything without workarounds.

Phase 1: Planning & Foundation - Started by discussing project scope and requirements with Claude. Selected a Framer template as visual reference, set up GitHub, and built the homepage, about page, and core components. By the end of this phase, I had a working site with page animations.

Phase 2: Case Studies & Polish - Built out the case study template with two-column hero layouts, problem statement callouts, and embedded Arcade demos. Created mobile navigation with a full-screen overlay. Added thumbnail images and refined hover states.

Phase 3: Content & Iteration - Focused on content updates, image management, and fine-tuning. This is where the real collaboration happened, iterating on positioning, fixing caching issues, and making dozens of small adjustments until everything felt right.

After completing development and testing, getting the site live turned out to be straightforward. Since we had been working on the dev branch throughout the project, the deployment process was clean and organized.

Merging to main: Once everything looked good locally, we merged dev into main. This was a fast-forward merge since we hadn't touched main during development, bringing over all 251 files: the complete site, case studies, images, and dependencies.

Deploying to Netlify: I connected my GitHub repository to Netlify, pointed it at the main branch, and configured the build settings (base directory: site, build command: npm run build, publish directory: site/.next). Netlify handled the rest: building the site, provisioning SSL, and giving me a live URL in about 2 minutes.

Domain transfer: My domain was on Squarespace. I'll transfer it to Netlify by unlocking it in Squarespace, getting the authorization code, and initiating the transfer through Netlify's domain settings. Once transferred, Netlify will automatically handle DNS and SSL certificates.

Ongoing workflow: Now that it's live, making updates is straightforward. I make changes locally, test at localhost:3000, commit with git, push to main, and Netlify automatically rebuilds and deploys within 1-2 minutes. No manual deployment steps, no FTP uploads, just push and it's live.

Context is everything: I wrote my case studies by building a repo and using each document as context for the next, constantly iterating. As we built the site, I iterated on the content alongside the code. This layered approach meant Claude always had the full picture, making each conversation more productive than the last.

Reference-driven design: I fed Claude sites I liked and specific design elements I wanted to incorporate. From there, we put together a foundation and I tweaked until it felt right. Starting with references rather than a blank canvas made the design process faster and more focused.

AI as a collaborator, not a replacement: Claude didn't replace my design thinking. I still made all the creative decisions, chose the direction, and iterated until things felt right. The AI accelerated execution while I stayed in the driver's seat.

The details take time: The bulk of day 3 was spent on image positioning, caching issues, and fine-tuning. These are the same challenges you'd face with any development process. AI doesn't eliminate iteration, it just makes each iteration faster.

Understanding matters: Because I was involved in every decision, I actually understand how this site works. I can maintain it, extend it, and troubleshoot issues. That wouldn't be true if I'd just handed off a design to a developer.

This project reinforced my belief that AI is most powerful when it amplifies human creativity rather than replacing it. I came in with a vision, made decisions throughout, and ended up with something that feels authentically mine, built in a fraction of the time.

For designers curious about AI tools, my advice: stay in control. Use AI to execute faster, but don't outsource your taste or judgment. The best results come from true collaboration, human direction with AI acceleration.