Blog Series

Building This Site

I built this site with the two ideas in mind:

I wanted more of an online presence and a place to my thoughts on lots of different things, including personal projects, work, etc.
I wanted to see what building a REAL website with AI was like, especially with it hooked up to headless CMS (I'm using Agility CMS).

I used the Cursor IDE initially and then switched to Claude Code. I like Cursor, since it's so deeply integrated into the IDE, and it's really cost effective, however, I'm starting to like Claude more and more, especially when using MCP Servers, as I'm doing a LOT with Agility.

I got Cursor and Claude to create these blog posts for me as I was working, so there's a LOT of stuff documented here. I have my personal hand-written thoughts separated from the agent-generated stuff.

Post Creation

One of the coolest things about this whole process, was how I created the posts in the series. Claude and Cursor did all the heavy lifting created these posts as Markdown files, included screenshots (created with Playwright MCP). Then I got Claude Code to upload the screenshots to Agility (using the Agility MCP), after which it then updated the image references and then created the posts.
I would LOVE to see that process of semi-attended content creation be more seamless - it worked pretty well, but I think it could be better.

I hope you enjoy learning about the process I took in building this site!

Posts in this series

Planning JoelVarty.com - Before the Build

January 6, 2026 at 1:00 AM EST

Build a personal website showcasing who I am, my career, and my blog. Inspired by Daring Fireball's clean design and Wes Bos's /uses page. Built with Next.js 16 and Agility CMS, targeting 100 Lighthouse scores.

Phase 1 Setup: Building the Foundation

January 6, 2026 at 2:00 AM EST

I started by running create-next-agility-app to spin up a new Next.js project with Agility CMS integration. The AI agent set up ShadCN UI with the 'new-york' style and 'neutral' base color, installed base components, and created the complete folder structure.

BlogPost Model Setup: Learning from Assumptions

January 6, 2026 at 3:00 AM EST

When setting up the BlogPost content model in Agility CMS, the AI agent ran into several issues trying to configure it via the MCP Server. The model needed specific field types and relationships that weren't immediately clear from the schema documentation.

Phase 3: Building the Layout Foundation

January 6, 2026 at 4:00 AM EST

Phase 3 focused on creating the foundational layout components that will wrap every page on the site. The AI agent built out a complete header, footer, navigation system, mobile menu, and dark mode toggle - all with responsive design and clean styling.

Phase 5: About & Career Pages

January 6, 2026 at 5:00 AM EST

Phase 5 was actually pretty straightforward since most of the heavy lifting was already done. The CareerTimeline component was already created in Phase 3, and the CareerEntry content model already existed in Agility CMS.

Phase 6: Uses Page

January 6, 2026 at 6:00 AM EST

The /uses page was already mostly built in Phase 3 when we created the UsesSection component. I just needed to polish it up to use AgilityPic for images and make sure everything is ready to go.

Phase 7: Content & CMS Integration

January 6, 2026 at 7:00 AM EST

Phase 7 is about populating the CMS with content and creating the actual pages. Most of this work needs to be done manually in Agility CMS, but the agent has prepared everything needed.

Phase 8: Styling & Polish

January 6, 2026 at 8:00 AM EST

Phase 8 was all about making everything look and feel polished. The agent added subtle animations, improved typography, enhanced the dark mode experience, and implemented a bunch of performance optimizations.

Project Summary: JoelVarty.com Development

January 6, 2026 at 9:00 AM EST

We've made incredible progress on the site. All the core development work is done - components, styling, performance optimizations, everything. Now it's just a matter of adding content and doing final testing.

Testing Content Requirements

January 6, 2026 at 10:00 AM EST

To properly test the site, we need actual content in Agility CMS. I've specified what content we need to create so we can test all the features properly.

Phase 9: Testing & QA Setup

January 6, 2026 at 11:00 AM EST

I've set up the testing infrastructure, but we can't do full testing until we have content in the CMS. The agent created Playwright tests, Lighthouse CI configuration, and GitHub Actions workflows.

Sample Content Creation for Testing

January 6, 2026 at 12:00 PM EST

The agent created sample content so we can test everything. Some things worked, some didn't - that's the reality of working with APIs and content management systems.

The Agility Component Content Loading Mistake

January 6, 2026 at 1:00 PM EST

When building the Agility CMS components for this site, I ran into a consistent issue where components weren't loading their content properly. The problem? The AI agent was trying to access module.fields directly, assuming the fields would be available on the module object passed to the component.

Blog Details Component: The dynamicPageItem Discovery

January 6, 2026 at 2:00 PM EST

After fixing the content loading issue in all Agility components, I was still getting 'Page Not Found' errors on blog post detail pages. The issue was in the BlogDetails component - it was trying to find the blog post using complex logic when Agility CMS was already providing the blog post directly.

Upgrading the Career Timeline with 8star Labs

January 6, 2026 at 3:00 PM EST

I decided to upgrade the career timeline component to use a more polished, professional timeline from 8star Labs. The original custom timeline was functional, but I wanted something with better visual hierarchy and a more refined look.

Switching from Cursor to Claude Code: A New Development Partner

January 8, 2026

I started building this personal website using Cursor as my primary AI coding assistant. But here's the thing about AI development tools - they're evolving rapidly, and it's worth experimenting. Today I switched to Claude Code to see how it handles project handoff and continuation.

Refactoring Markdown Gallery Processing: A Deep Dive

January 8, 2026

The blog system supports seven different gallery types that can be embedded in markdown. We refactored the gallery processing into a proper Remark plugin that follows the unified/remark ecosystem patterns.

Series Feature Implementation

January 8, 2026

The Series feature allows grouping blog posts into series with dedicated landing pages. Each series has a title and slug, a markdown summary that displays at the top of the landing page, and a filtered list of blog posts that belong to the series.

Using MCP to Bulk Upload Blog Posts: The Final Step

January 9, 2026

The final piece of the puzzle: using Claude Code and the Agility CMS MCP server to bulk upload 18 blog posts documenting this entire journey. What took minutes would have taken hours manually - and it demonstrates the power of AI-assisted content management.