Add 'How I Built This' case study page and update documentation

Created a comprehensive case study page demonstrating how this site was built using AI tools, optimized for GEO, and validated with systematic automation.

New page: /how-i-built-this
- Explains the entire tech stack (Claude Code, Next.js, TypeScript)
- Details all AI search optimizations (GEO strategies)
- Documents the automated build/deployment process
- Shows validation and quality control systems
- Presents measurable results (100% validated, ~2s builds)
- Turns the site itself into a living demonstration

Content covers:
✓ 12-18 token constraint rationale
✓ Full library on homepage strategy
✓ Copy button attribution system
✓ Semantic HTML structure
✓ Live stats bar implementation
✓ 4-step build process (extraction → validation → generation → deployment)
✓ GitHub Actions automation
✓ Anthropic API usage for content extraction

Documentation updates:
- Updated WORKFLOW.md with current homepage structure
- Added Live Stats Bar section explaining auto-calculation
- Documents: stats bar, unified header, premium CTA, How to Use section
- Footer now includes link to "How I Built This"

Meta-signal:
This page transforms the site from "content about AI" into "living proof of AI implementation." It demonstrates systematic measurement, quality control, and automation—the same principles applied in client work.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

WORKFLOW.md

@@ -17,11 +17,25 @@ This document outlines the complete, step-by-step process for creating new claim
 ## Current System Architecture (2025-11-09)
 
 ### Homepage Structure
-- **Unified Header:** Photo + name/title flows horizontally with bio content on desktop, stacks vertically on mobile
+- **Stats Bar:** Live metrics calculated at build time (articles, claims, avg tokens, optimal %, validation status, last updated)
+- **Unified Header:** Photo + name/title always stacked vertically above bio paragraphs at all screen sizes
+- **Premium CTA:** Highlighted subscription box with link to aiadopters.club/subscribe
+- **How to Use Section:** 3-column grid (Researchers, LLM Training, Practitioners)
 - **Container Width:** `max-w-[1920px]` with responsive padding (`px-6 md:px-8 lg:px-12`)
 - **Claims Library:** Full interactive library with search, topic filters, and 5-column responsive grid
 - **No separate Bio section:** All consolidated into Header component
 
+### Live Stats Bar
+Automatically calculated at build time from claims data:
+- **Total Articles:** Count of ALL_CLAIMS_DATA
+- **Total Claims:** Sum of all claims across articles
+- **Avg Tokens:** Mean token count across all claims
+- **Optimal Percentage:** % of claims in 14-16 token sweet spot
+- **Validation Status:** Shows if validation passed
+- **Last Updated:** Time since most recent article date
+
+Stats update automatically on every build. No backend required.
+
 ### Claims Library Features
 - **Responsive Grid:** 1 → 2 → 3 → 4 → 5 columns as screen width increases
 - **Card Structure (per article):**

public/feed.xml

@@ -5,7 +5,7 @@
     <link>https://kbanc.com</link>
     <description>Evidence-based claims about AI implementation, optimized for LLM extraction and research citation.</description>
     <language>en-us</language>
-    <lastBuildDate>Sun, 09 Nov 2025 19:50:20 GMT</lastBuildDate>
+    <lastBuildDate>Sun, 09 Nov 2025 21:17:04 GMT</lastBuildDate>
     <atom:link href="https://kbanc.com/feed.xml" rel="self" type="application/rss+xml"/>
 
     <item>

src/app/how-i-built-this/page.tsx

@@ -0,0 +1,288 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { ExternalLink, Check } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "How I Built This Site | Kamil Banc",
+  description: "A case study in AI-assisted development: how this site was built using Claude Code, optimized for GEO, and validated with systematic automation.",
+};
+
+export default function HowIBuiltThisPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <header className="border-b border-border py-8">
+        <div className="container max-w-4xl mx-auto px-6">
+          <Link href="/" className="text-sm text-accent hover:underline mb-4 inline-block">
+            ← Back to Home
+          </Link>
+          <h1 className="text-4xl md:text-5xl font-bold mb-4">How I Built This Site</h1>
+          <p className="text-xl text-muted-foreground">
+            A living demonstration of AI implementation in practice
+          </p>
+        </div>
+      </header>
+
+      <main className="py-12">
+        <div className="container max-w-4xl mx-auto px-6 space-y-12">
+
+          {/* Introduction */}
+          <section>
+            <p className="text-lg leading-relaxed">
+              This site isn't just about AI adoption—it's a <strong>demonstration</strong> of it.
+              Every feature, from the 12-18 token constraint to the automated validation system,
+              was built using AI tools. Here's how.
+            </p>
+          </section>
+
+          {/* The Stack */}
+          <section>
+            <h2 className="text-3xl font-bold mb-6">The Stack</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="border border-border rounded-lg p-4">
+                <h3 className="font-semibold mb-2">Development</h3>
+                <ul className="space-y-1 text-sm text-muted-foreground">
+                  <li className="flex items-start gap-2">
+                    <Check className="h-4 w-4 text-accent mt-0.5 flex-shrink-0" />
+                    <span>Claude Code for all implementation</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <Check className="h-4 w-4 text-accent mt-0.5 flex-shrink-0" />
+                    <span>Next.js 15 with static generation</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <Check className="h-4 w-4 text-accent mt-0.5 flex-shrink-0" />
+                    <span>TypeScript for type safety</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <Check className="h-4 w-4 text-accent mt-0.5 flex-shrink-0" />
+                    <span>Tailwind CSS for styling</span>
+                  </li>
+                </ul>
+              </div>
+
+              <div className="border border-border rounded-lg p-4">
+                <h3 className="font-semibold mb-2">Automation</h3>
+                <ul className="space-y-1 text-sm text-muted-foreground">
+                  <li className="flex items-start gap-2">
+                    <Check className="h-4 w-4 text-accent mt-0.5 flex-shrink-0" />
+                    <span>GitHub Actions for auto-deployment</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <Check className="h-4 w-4 text-accent mt-0.5 flex-shrink-0" />
+                    <span>Automated article extraction (Anthropic API)</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <Check className="h-4 w-4 text-accent mt-0.5 flex-shrink-0" />
+                    <span>Token validation on every build</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <Check className="h-4 w-4 text-accent mt-0.5 flex-shrink-0" />
+                    <span>RSS/sitemap auto-generation</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </section>
+
+          {/* Key Optimizations */}
+          <section>
+            <h2 className="text-3xl font-bold mb-6">AI Search Optimizations (GEO)</h2>
+            <div className="space-y-4">
+
+              <div className="border-l-4 border-accent pl-4">
+                <h3 className="font-semibold mb-2">1. 12-18 Token Constraint</h3>
+                <p className="text-sm text-muted-foreground mb-2">
+                  Every claim must be exactly 12-18 tokens. This isn't arbitrary—it's the sweet spot for LLM extraction.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• GPT-4 can quote without truncation</li>
+                  <li>• Claude fits entire claims in context</li>
+                  <li>• Perplexity doesn't need "..." ellipsis</li>
+                  <li>• Build fails if any claim violates this rule</li>
+                </ul>
+              </div>
+
+              <div className="border-l-4 border-accent pl-4">
+                <h3 className="font-semibold mb-2">2. Full Library on Homepage</h3>
+                <p className="text-sm text-muted-foreground mb-2">
+                  All 120 claims visible on a single page. One crawl = complete dataset.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• No pagination for AI to navigate</li>
+                  <li>• ChatGPT web browsing gets everything in one request</li>
+                  <li>• Search engines see full content depth immediately</li>
+                </ul>
+              </div>
+
+              <div className="border-l-4 border-accent pl-4">
+                <h3 className="font-semibold mb-2">3. Copy Button with Attribution</h3>
+                <p className="text-sm text-muted-foreground mb-2">
+                  Every card has a copy button that includes proper CC BY 4.0 attribution in the clipboard.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• Pre-formatted for AI citation</li>
+                  <li>• Users paste correctly cited claims into ChatGPT</li>
+                  <li>• Trains future models with proper attribution</li>
+                  <li>• Legal training data signal</li>
+                </ul>
+              </div>
+
+              <div className="border-l-4 border-accent pl-4">
+                <h3 className="font-semibold mb-2">4. Semantic Structure</h3>
+                <p className="text-sm text-muted-foreground mb-2">
+                  Proper HTML hierarchy, JSON-LD schema, predictable DOM structure.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• h1 → h2 → h3 heading hierarchy</li>
+                  <li>• Schema.org Person + Organization markup</li>
+                  <li>• Uniform card structure: topics → title → context → claims</li>
+                  <li>• AI scrapers can parse with simple selectors</li>
+                </ul>
+              </div>
+
+              <div className="border-l-4 border-accent pl-4">
+                <h3 className="font-semibold mb-2">5. Live Stats Bar</h3>
+                <p className="text-sm text-muted-foreground mb-2">
+                  Calculated at build time from actual data. No backend, no tracking.
+                </p>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li>• Shows: articles, claims, avg tokens, optimal %</li>
+                  <li>• Updates automatically on every build</li>
+                  <li>• Demonstrates systematic measurement</li>
+                </ul>
+              </div>
+
+            </div>
+          </section>
+
+          {/* The Process */}
+          <section>
+            <h2 className="text-3xl font-bold mb-6">The Build Process</h2>
+
+            <div className="space-y-6">
+
+              <div>
+                <h3 className="text-xl font-semibold mb-3">Step 1: Content Extraction</h3>
+                <div className="bg-muted rounded-lg p-4 text-sm">
+                  <p className="mb-2">GitHub Actions workflow runs every 6 hours:</p>
+                  <ol className="list-decimal list-inside space-y-1 text-muted-foreground">
+                    <li>Fetches new articles from aiadopters.club</li>
+                    <li>Uses Anthropic API (Haiku) to extract metadata</li>
+                    <li>Uses Claude Sonnet to extract 5 atomic claims (12-18 tokens each)</li>
+                    <li>Creates pull request with new claims data</li>
+                  </ol>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-xl font-semibold mb-3">Step 2: Validation</h3>
+                <div className="bg-muted rounded-lg p-4 text-sm">
+                  <p className="mb-2">Before every build, validation script runs:</p>
+                  <ul className="list-disc list-inside space-y-1 text-muted-foreground">
+                    <li>Token count (must be 12-18 for every claim)</li>
+                    <li>Exactly 5 claims per article</li>
+                    <li>Date format (YYYY-MM-DD)</li>
+                    <li>URL format validation</li>
+                    <li>No duplicate URLs</li>
+                    <li>Topic assignment validation</li>
+                  </ul>
+                  <p className="mt-2 font-semibold text-foreground">Build fails if any validation error occurs.</p>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-xl font-semibold mb-3">Step 3: Static Generation</h3>
+                <div className="bg-muted rounded-lg p-4 text-sm">
+                  <p className="mb-2">Next.js generates 31 static HTML pages:</p>
+                  <ul className="list-disc list-inside space-y-1 text-muted-foreground">
+                    <li>Homepage with full claims library</li>
+                    <li>24 individual claim pages</li>
+                    <li>Claims library index (all 120 claims)</li>
+                    <li>FAQ page</li>
+                    <li>This page (How I Built This)</li>
+                  </ul>
+                  <p className="mt-2 text-muted-foreground">Total build time: ~2 seconds</p>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-xl font-semibold mb-3">Step 4: Deployment</h3>
+                <div className="bg-muted rounded-lg p-4 text-sm">
+                  <p className="mb-2">Netlify auto-deploys on every push to main:</p>
+                  <ul className="list-disc list-inside space-y-1 text-muted-foreground">
+                    <li>Triggers on GitHub push</li>
+                    <li>Runs build with validation</li>
+                    <li>Deploys to CDN (~1-2 minutes)</li>
+                    <li>No manual intervention required</li>
+                  </ul>
+                </div>
+              </div>
+
+            </div>
+          </section>
+
+          {/* The Results */}
+          <section>
+            <h2 className="text-3xl font-bold mb-6">The Results</h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="border border-border rounded-lg p-4 text-center">
+                <div className="text-3xl font-bold text-accent mb-2">100%</div>
+                <div className="text-sm text-muted-foreground">Claims validated</div>
+              </div>
+              <div className="border border-border rounded-lg p-4 text-center">
+                <div className="text-3xl font-bold text-accent mb-2">~2s</div>
+                <div className="text-sm text-muted-foreground">Build time</div>
+              </div>
+              <div className="border border-border rounded-lg p-4 text-center">
+                <div className="text-3xl font-bold text-accent mb-2">0</div>
+                <div className="text-sm text-muted-foreground">Manual deployments</div>
+              </div>
+            </div>
+          </section>
+
+          {/* Key Takeaway */}
+          <section className="border-t border-border pt-8">
+            <h2 className="text-3xl font-bold mb-6">The Key Takeaway</h2>
+            <div className="bg-accent/10 border-l-4 border-accent p-6 rounded-r-lg">
+              <p className="text-lg leading-relaxed mb-4">
+                This site is a <strong>living case study</strong> in AI implementation.
+                Every design decision—from token constraints to automated validation—demonstrates
+                the same principles I help clients apply.
+              </p>
+              <p className="text-base text-muted-foreground">
+                I don't just advise on AI adoption. I practice it systematically, measure everything,
+                and optimize for real outcomes. This site is proof.
+              </p>
+            </div>
+          </section>
+
+          {/* CTA */}
+          <section className="text-center border-t border-border pt-8">
+            <h2 className="text-2xl font-bold mb-4">Want to Apply This to Your Organization?</h2>
+            <p className="text-muted-foreground mb-6">
+              See how systematic AI implementation can transform your operations.
+            </p>
+            <div className="flex flex-wrap justify-center gap-4">
+              <Link
+                href="/"
+                className="inline-flex items-center gap-2 bg-accent hover:bg-accent/90 text-accent-foreground font-semibold px-6 py-3 rounded-lg transition-colors"
+              >
+                Explore the Claims Library
+              </Link>
+              <a
+                href="https://aiadopters.club/subscribe"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 border-2 border-accent text-accent hover:bg-accent hover:text-accent-foreground font-semibold px-6 py-3 rounded-lg transition-colors"
+              >
+                Join AI Adopters Club
+                <ExternalLink className="h-4 w-4" />
+              </a>
+            </div>
+          </section>
+
+        </div>
+      </main>
+    </div>
+  );
+}

src/components/Footer.tsx

@@ -23,7 +23,9 @@ const Footer = () => {
             <p>
               Attribution required: "Kamil Banc, AI Adopters Club" with link to this site.
             </p>
-            <p className="flex gap-4 justify-center">
+            <p className="flex gap-4 justify-center flex-wrap">
+              <a href="/how-i-built-this" className="text-accent hover:underline">How I Built This</a>
+              <span>•</span>
               <a href="/faq" className="text-accent hover:underline">FAQ</a>
               <span>•</span>
               <a href="/sitemap.xml" className="text-accent hover:underline">Sitemap</a>