The Agentic Architecture

The Vision: PMM as a System Architect

For a Product Marketing Lead, the website is more than a resume — it is a proof of concept. I chose to bypass “drag-and-drop” builders to master a stack that represents the frontier of web development: Astro 6.0 for performance, Claude Code for agentic execution, and Vercel for edge delivery.

The Integrated Stack

Layer	Technology	Strategic Value
Framework	Astro 6.0	Islands architecture that ships zero JavaScript by default for maximum speed.
IDE	VS Code	Local development environment allowing for full source-code ownership.
Agent	Claude Code	Terminal-based AI agent capable of executing file system changes and complex refactors.
Source Control	GitHub	Versioned repository management and the bridge to the cloud.
Deployment	Vercel	Automated CI/CD (Continuous Integration/Continuous Deployment) pipeline.

Phase 1: Local Environment & The Astro 6.0 Hurdle

The build started in the terminal. The first challenge was initializing Astro 6.0, which introduced a shift in how dependencies like tinyexec are handled.

The Struggle: Initializing a “Minimalist” template isn’t always a one-click process. I encountered dependency mismatches that required manual intervention in the terminal.

The Navigation: Using VS Code’s integrated terminal, I worked with Claude Code to identify the specific peer dependencies required. This phase was about stabilizing the “Localhost” so that I could see the site at localhost:4321 before a single line went public.

Essential initial commands:

npm create astro@latest  # Initializing the project structure
npm install              # Installing the core engine
npm run dev              # Launching the local preview server

Phase 2: Agentic Engineering with Claude Code

The “New Age” design wasn’t built by clicking buttons — it was built through Natural Language Engineering. I used Claude Code not just to write copy, but to architect the Layout.astro and index.astro files.

The Workflow:

• Design Systems — I defined a palette of Neo-Mint and Terracotta.
• Visual Hierarchy — I instructed Claude to implement Glassmorphism, using backdrop-filter: blur() and translucent borders to create a “layered” SaaS feel.
• Typography — We opted for Plus Jakarta Sans at Thin (200) weight. Claude executed these CSS changes across the global stylesheet instantly.

Phase 3: The Git Identity Crisis (The “Pro” Trap)

This was the most significant technical roadblock. After working across different terminal sessions, I attempted to push my changes to GitHub. Vercel immediately blocked the deployment, claiming I was a “team” and needed to upgrade to a $20/month Pro plan.

The Discovery: Vercel’s free tier (Hobby) tracks unique Git signatures. Because different terminal sessions hadn’t been configured with a consistent global Git identity, commits appeared to come from multiple conflicting usernames — triggering Vercel’s collaborator detection.

The Technical Fix: I had to “unify” the local machine’s identity to match my GitHub account — rewriting history and signing all commits under a single, consistent author.

The commands that saved the deployment:

# 1. Unifying the signature (from projects/personal-site)
git config --global user.email "your-github-email@example.com"
git config --global user.name "Your Name"

# 2. Rewriting history with the correct identity
git filter-branch -f --env-filter '
GIT_AUTHOR_NAME="Your Name"
GIT_AUTHOR_EMAIL="your-github-email@example.com"
GIT_COMMITTER_NAME="Your Name"
GIT_COMMITTER_EMAIL="your-github-email@example.com"
' -- --branches

# 3. Synchronizing with the cloud
git push origin main --force

Phase 4: The CI/CD Pipeline to Vercel

Once the identity was unified, the Sync Trilogy became the heartbeat of the project — the Continuous Deployment loop that keeps the site alive.

1. Stage (git add .) — snapshot all local changes: Astro components, Markdown files, CSS.
2. Commit (git commit -m "...") — label the update for the version history.
3. Push (git push origin main) — trigger the Vercel webhook.

The moment the code hit GitHub, Vercel’s servers detected the update, ran npm run build in the cloud, and updated the live URL. This is the gold standard for modern web publishing.

Summary of the Build Journey

Milestone	Technical Challenge	Navigation Strategy
Initialization	Astro 6.0 dependency errors	Manual dependency mapping via VS Code terminal
Design	Creating a high-end SaaS aesthetic	Agentic execution of Glassmorphism and Thin typography
Deployment	Vercel “Pro” block / Identity mismatch	Git config unification and history rewrite
Sync	Maintaining live updates	Established a disciplined CI/CD workflow

The PMM Verdict

Building this way taught me that Technical Agency is the most important skill for an AI-native leader. I don’t need to be a senior engineer to own my infrastructure — I just need to understand the logic of the pipeline.

I moved from being a user of tools to an architect of systems.