mail_kbanc_com
/
nice-gee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
kbanc85 2025-11-09 16:17:32 -05:00
parent e536fbea15
commit 0052ad1855
4 changed files with 307 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
WORKFLOW.md
View File

@ -17,11 +17,25 @@ This document outlines the complete, step-by-step process for creating new claim
## Current System Architecture (2025-11-09) ## Current System Architecture (2025-11-09)
### Homepage Structure ### 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`) - **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 - **Claims Library:** Full interactive library with search, topic filters, and 5-column responsive grid
- **No separate Bio section:** All consolidated into Header component - **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 ### Claims Library Features
- **Responsive Grid:** 1 → 2 → 3 → 4 → 5 columns as screen width increases - **Responsive Grid:** 1 → 2 → 3 → 4 → 5 columns as screen width increases
- **Card Structure (per article):** - **Card Structure (per article):**

2
public/feed.xml
View File

@ -5,7 +5,7 @@
<link>https://kbanc.com</link> <link>https://kbanc.com</link>
<description>Evidence-based claims about AI implementation, optimized for LLM extraction and research citation.</description> <description>Evidence-based claims about AI implementation, optimized for LLM extraction and research citation.</description>
<language>en-us</language> <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"/> <atom:link href="https://kbanc.com/feed.xml" rel="self" type="application/rss+xml"/>
<item> <item>

288
src/app/how-i-built-this/page.tsx Normal file
View File

@ -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>
);
}

4
src/components/Footer.tsx
View File

@ -23,7 +23,9 @@ const Footer = () => {
<p> <p>
Attribution required: "Kamil Banc, AI Adopters Club" with link to this site. Attribution required: "Kamil Banc, AI Adopters Club" with link to this site.
</p> </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> <a href="/faq" className="text-accent hover:underline">FAQ</a>
<span>•</span> <span>•</span>
<a href="/sitemap.xml" className="text-accent hover:underline">Sitemap</a> <a href="/sitemap.xml" className="text-accent hover:underline">Sitemap</a>