I Built My Entire Professional Site in One Session Using Claude — Here's Every Skill It Required

There is a widespread misconception about AI-augmented development: that the AI does the work and the human watches.

This post is a direct refutation of that idea — documented in real time.

On March 4, 2026, I opened a Claude Code session with a blank repository, a single PDF file, and a six-phase implementation plan I had written myself. Under four hours later, node scripts/verify-site.mjs https://js17.dev printed 84 passed, 0 failed, 0 warnings.

What happened in between is what I want to walk you through — not to impress you with the AI, but to show you precisely what the human brought to that collaboration that made the difference between a generic boilerplate and a production-grade professional site.

The Numbers at a Glance

The Brief

The goal: build js17.dev — a personal professional site for a Senior AI-Augmented Fullstack Systems Engineer — from an empty directory to a DNS-verified, SSL-secured, fully tested production deployment.

Hard constraints I set from the start:

• ✦ Vercel free tier only
• ✦ No external CMS — MDX files in the repo
• ✦ No static OG images — dynamic generation via Next.js ImageResponse
• ✦ Emails via Resend, not a third-party form service
• ✦ Cal.com embed for scheduling, with Google Calendar sync
• ✦ 84 automated checks across 9 test suites before declaring success

🧱 The Stack

Every technology choice was deliberate, not default.

🧠 What I Brought to the Session

Let me be direct: the AI wrote the code. I directed everything that the code needed to be.

1. The Architecture Document

Before writing a single prompt, I produced a six-phase implementation plan covering framework selection with justification, file structure down to individual component names, render strategy per route (SSG, ISR, CSR, Edge), environment variable schema, performance targets, and verification criteria.

This is not a task you can delegate to an AI. Producing this document requires knowing what a production Next.js App Router project looks like at scale, understanding the tradeoffs between MDX solutions, knowing why next-mdx-remote@6 behaves differently from @next/mdx, and having opinions about component architecture before any code exists.

2. Technology Triage Under Constraints

Several decisions involved choosing between options with non-obvious tradeoffs:

• MDX: @next/mdx vs next-mdx-remote vs contentlayer — chose next-mdx-remote for the compileMDX RSC API
• OG Images: Static PNG vs ImageResponse Edge function — chose dynamic, one file handles all posts
• Email: SendGrid vs Resend vs Postmark — chose Resend for Next.js-native SDK and free tier
• Scheduling: Calendly vs Cal.com — chose Cal.com for inline embed and native calendar sync

3. Security Discipline That Didn't Bend

API keys were provided at the right moment and never written to files. When Vercel's build pipeline surfaced CVE-2026-0969 in next-mdx-remote@4, I immediately recognized what a CVE flag means in a CI/CD pipeline and directed the upgrade to v6 rather than ignoring the warning.

4. Precise Information at the Right Moment

Every external service required exact credentials provided at the right step — GitHub PAT with public_repo scope, Resend API key, Cal.com username (jeroham-sanchez-gfvgbp), Cloudflare API token with the right permission scope. The quality and precision of this information directly determined whether each integration worked on the first attempt or required a rework cycle.

5. Infrastructure Diagnosis Nobody Can Outsource

When https://js17.dev returned HTTP 200 but served the wrong content, I diagnosed three simultaneous issues: two stale GoDaddy A records competing with the Vercel record, Cloudflare proxy (orange cloud) intercepting TLS and breaking Vercel's SSL provisioning, and the SSL certificate not auto-provisioning after DNS migration.

# The three-step fix:
# 1. Delete competing A records via Cloudflare API
# 2. Set proxied: false on A + CNAME records
# 3. Manually trigger cert issuance
vercel certs issue js17.dev www.js17.dev

This requires knowing how Cloudflare's proxy layer interacts with origin SSL — not something you can Google your way to under time pressure.

🔥 The Challenges

// Derive title from slug — zero Node.js APIs, works in Edge runtime
const slugTitle = params.slug
  .split("-")
  .map(w => w.charAt(0).toUpperCase() + w.slice(1))
  .join(" ")

let _resend: Resend | null = null
export function getResend(): Resend {
  if (!_resend) _resend = new Resend(process.env.RESEND_API_KEY!)
  return _resend
}

📊 Iterations vs. Information Quality

The entire build required 23 meaningful iterations. Here's the breakdown:

⏱️ Timeline: First Prompt → Confirmed Production

For reference: this site includes a multi-step proposal form with Zod validation and dual-email submission, a GitHub stats dashboard with REST + GraphQL data and a custom SVG contribution heatmap, an MDX blog with syntax highlighting and per-post dynamic OG images, full dark/light theming, structured data (JSON-LD), sitemap, robots.txt, security headers, and a /cv redirect to a downloadable PDF.

A traditional agency would quote 3–6 weeks and $15,000–$40,000 for comparable scope.

🛠️ The Full Skills Inventory

What AI-Augmented Engineering Actually Means

This project is a working definition of the term.

It is not "AI writes code, human reviews it." That is AI-assisted copy-paste, and it produces exactly the quality you would expect.

AI-augmented engineering is the human operating as architect, decision-maker, quality gate, and infrastructure owner — using AI as a force multiplier that eliminates the gap between design and implementation.

The multiplier only works when the human brings a sound architecture, correct technology choices, security discipline that doesn't erode under time pressure, domain knowledge for the layers AI cannot access (DNS panels, API dashboards, production credentials), and a verification standard rigorous enough to catch the gap between "it looks like it works" and "84 checks pass against the live production URL."

Remove any one of those, and the multiplier disappears.

Want This For Your Project?