This Website: Autonomous Systems Architecture

Building a portfolio for an Systems Architect presents a unique paradox: How do you prove your AI architecture capabilities if you don't use AI architecture to build the proof?

Requirements

The Traditional Approach (What We Avoided)

• Manual Content Creation: Write HTML pages by hand, copy project details from notes
• Template Filling: Use static site generator, manually populate frontmatter
• AI Assistance: Use AI to help write copy, but human still drives all content creation
• Content Management System: WordPress or similar, manual content entry

Problem with traditional approaches: They don't demonstrate autonomous capability. AI is helper, not architect.

The Opportunity

If AI can autonomously build a complete portfolio by reading my project documentation, that proves the same architecture can:

• Generate resale certificates by reading Buildium API data
• Build product descriptions by reading supplier catalogs
• Create financial reports by reading accounting system data
• Generate any document from any structured data source

This website IS the proof of concept.

Two-Agent Architecture

Content Sourcing via Obsidian MCP

Key Architecture Decisions

• No Build Step: Pure HTML/CSS/JS with Tailwind CDN - deploy to any static host instantly
• Shared Component System: Header/Footer in shared.js - consistency across all pages
• Semantic HTML: Proper structure for accessibility and SEO
• Mobile-First: Responsive design using Tailwind breakpoints
• Dark Mode Support: Tailwind dark: classes throughout
• Meta Tags: Full SEO and Open Graph tags on every page
• Professional Tone: Technical depth without jargon, evidence-based claims

Site Structure

/Users/demo/dev/website/ai-architect-website/src/
├── index.html                    # Homepage (Agent 1)
├── about.html                    # About page (Agent 1)
├── contact.html                  # Contact page (Agent 1)
├── components/
│   └── shared.js                 # Header, Footer, shared JS (Agent 1)
├── projects/
│   ├── index.html                # Projects listing (Agent 1)
│   ├── youtube-mcp.html          # Case study (Agent 2) ✅
│   ├── golf-cart-ecommerce.html  # Case study (Agent 2) ✅
│   ├── obsidian-mcp.html         # Case study (Agent 2) ✅
│   ├── hoa-saas.html             # Case study (Agent 2) ✅
│   ├── property-automation.html  # Case study (Agent 2) ✅
│   └── this-website.html         # Meta case study (Agent 2) ✅
├── mcp-servers/
│   └── index.html                # MCP servers page (Agent 1)
├── blog/
│   └── index.html                # Blog page (Agent 1)
└── assets/
    └── images/
        └── projects/
            └── [project-name]-hero.png  # Placeholder images

Agent 2 Workflow (Building Case Studies)

// List root directories
mcp__obsidian-personal__obsidian_list_files_in_vault()

// Navigate to project folders
mcp__obsidian-personal__obsidian_list_files_in_dir("Projects")
mcp__obsidian-personal__obsidian_list_files_in_dir("Business")
mcp__obsidian-personal__obsidian_list_files_in_dir("Projects")

// Read project documentation files
mcp__obsidian-personal__obsidian_get_file_contents(
  "Projects/YouTube MCP v0.3.6.md"
)

// Extract real metrics from business analysis
mcp__obsidian-personal__obsidian_get_file_contents(
  "Business/Pricing Analysis - Complete.md"
)

// Get timeline from project files
mcp__obsidian-personal__obsidian_get_file_contents(
  "Projects/Launch e-commerce Site.md"
)

Technologies Used

Proof of Concept Validated

• Autonomous Agents Work: Agent 2 built 6 production-quality pages without constant human intervention
• MCP Content Sourcing Works: Zero manual documentation duplication - vault is single source of truth
• Multi-Agent Orchestration Works: Agent 1 and Agent 2 worked on different aspects in parallel successfully
• Zero Hallucination Possible: Every metric verifiable against vault files
• Self-Referential Capability: This page proves the exact capability it describes

Transferable Architecture

If agents can build this site by reading Obsidian vault files, the same architecture can:

• Generate Resale Certificates: Read Buildium API data → fill PDF templates
• Build Product Descriptions: Read supplier catalogs → generate SEO copy
• Create Financial Reports: Read accounting data → generate board reports
• Automate Any Documentation: Read structured data → generate formatted documents

Competitive Advantage Demonstrated

• I Design, AI Builds: Tagline proven through actual site construction
• Autonomous Capability: Not just "AI-assisted" - genuinely autonomous agent work
• Vault-Powered Content: Single source of truth pattern scalable to any domain
• Production Quality: Not a demo - this is a real portfolio site built by agents

Meta-Demonstration Value

• Portfolio proves capability through its own existence
• Every project showcases the architecture that built it
• Obsidian MCP case study built via Obsidian MCP - self-referential
• Can point to this site as working example of autonomous agent orchestration

What Worked Exceptionally Well

• Vault as Single Source: Obsidian MCP content sourcing eliminated all manual documentation duplication
• Agent Specialization: Agent 1 (architecture) + Agent 2 (content) worked better than single agent doing everything
• Structured Prompts: Clear directives with specific deliverables led to autonomous success
• Real Data Only: Constraint of "no hallucination" actually made content better - agents read files thoroughly
• Shared Component System: Agent 1's shared.js made Agent 2's pages consistent automatically

Challenges Encountered

• Content Discovery: Agent 2 needed to explore vault structure to find relevant files - required multiple MCP queries
• Context Size Management: Some vault files were long - agents needed to extract key sections efficiently
• Cross-Referencing: Gathering related data from multiple files (e.g., timeline from one file, metrics from another)
• Technical Depth Balance: Finding right level of detail without overwhelming or oversimplifying

Key Insights

• Vaults > Databases for Knowledge: Markdown files with MCP access is perfect for AI consumption - structured enough for queries, flexible enough for rich content
• Agents Need Clear Goals: "Build 6 case study pages using vault data" worked. Vague "make a portfolio" wouldn't.
• Validation Over Trust: Human reviews agent output not because agents fail, but because precision matters for portfolios
• Meta-Demonstration is Powerful: This site is both portfolio AND proof of capability
• 99% AI is Optimal: Human provides direction and validation. AI does all execution. Perfect division of labor.

If I Built This Again

• Would create vault file index/map first - helps agents navigate faster
• Might add intermediate "content planning" step - agents outline before building
• Could use Agent 3 for image generation - currently placeholders
• Would document agent conversations more thoroughly for future reference

How Agent 2 built authentic case studies:

// Step 1: Explore vault for YouTube MCP project
vault.list_files("Projects")
// Returns: ["YouTube MCP v0.3.6.md", "e-commerce Knowledge Pipeline.md"]

// Step 2: Read project documentation
youtube_mcp_doc = vault.get_file_contents(
  "Projects/YouTube MCP v0.3.6.md"
)

// Step 3: Extract real metrics
metrics = {
  tools: 26,                    // From "**Tools**: 26" in doc
  tests: 356,                   // From "**Tests**: 356 (100% passing)"
  status: "Production-Ready",   // From status badge
  release_date: "2025-10-26"    // From "Last Updated" field
}

// Step 4: Build HTML page
page = build_case_study({
  project: "YouTube MCP Server",
  hero_gradient: "from-red-600 to-purple-600",
  metrics: metrics,
  challenge: extract_section(youtube_mcp_doc, "Challenge"),
  solution: extract_section(youtube_mcp_doc, "Solution"),
  architecture: extract_section(youtube_mcp_doc, "All 26 Tools"),
  // ... more sections
})

// Step 5: Write to filesystem
write_file("/work/youtube-mcp.html", page)

// Result: 100% authentic content, zero hallucination