How it's built.
Before a single line of code was written, I designed a multi-agent system to build this portfolio. Three agents, three mandates, eighteen concrete artifacts, three human validation gates. Here's the architecture.
The build architecture.
Designed the full system, scoped each agent's mandate, defined sequential handoff rules, held every validation gate. Remained active between every phase — not just at the start.
Narrative & Content
Everything to do with the story.
- A1-1 — Thesis & Positioning
- A1-2 — Audience & Tone Map (3 personas)
- A1-3 — Narrative Arc: Visitor Journey (flowchart)
- A1-4 — Section-by-Section Content Plan (9 sections × 7 columns)
- A1-5 — AI Assistant Knowledge Base
- A1-6 — Handoff Brief → Agent 2
Design & Visual
Take Agent 1's output and produce two genuinely distinct visual concepts.
- A2-1 — Concept Overview (editorial serif vs. operational monospace)
- A2-2 — Design Token Tables (11 tokens per concept)
- A2-3 — Section-by-Section Layout Plan (9 sections)
- A2-4 — Wireframes / Layout Sketches (5 screens per concept)
- A2-5 — Component Upgrade List (8 components)
- A2-6 — Handoff Brief → Agent 3
Addons & Features
Floating scheduler, how-it's-built section, formation pins, supplementary features.
- A3-1 — Floating Scheduler Integration
- A3-2 — How It's Built page
- A3-3 — Formation Pins
- A3-4 — Supplementary feature implementations
Single source of truth. Every artifact lives here — not in the chat history. The board is the audit trail, not the session log.
Hover agent nodes to expand artifacts
Three mandates.
Narrative & Content
Everything to do with the story.
- A1-1 — Thesis & Positioning
- A1-2 — Audience & Tone Map (3 personas)
- A1-3 — Narrative Arc: Visitor Journey (flowchart)
- A1-4 — Section-by-Section Content Plan (9 sections × 7 columns)
- A1-5 — AI Assistant Knowledge Base
- A1-6 — Handoff Brief → Agent 2
Design & Visual
Take Agent 1's output and produce two genuinely distinct visual concepts.
- A2-1 — Concept Overview (editorial serif vs. operational monospace)
- A2-2 — Design Token Tables (11 tokens per concept)
- A2-3 — Section-by-Section Layout Plan (9 sections)
- A2-4 — Wireframes / Layout Sketches (5 screens per concept)
- A2-5 — Component Upgrade List (8 components)
- A2-6 — Handoff Brief → Agent 3
Addons & Features
Floating scheduler, how-it's-built section, formation pins, supplementary features.
- A3-1 — Floating Scheduler Integration
- A3-2 — How It's Built page
- A3-3 — Formation Pins
- A3-4 — Supplementary feature implementations
Why this structure.
Sequential, not parallel: each agent needed the previous phase's decisions as hard constraints — running them in parallel would have produced incoherent output across narrative, design, and implementation layers.
Artifacts on a board, not in chat history: chat history is ephemeral and agent-local. A shared board forced every decision into a persistent, reviewable form — and made my validation gate meaningful rather than ceremonial.
Explicit out-of-scope rules: without them, agents drift. Agent 1 would have made design decisions; Agent 2 would have rewritten the narrative. Scope boundaries preserved the separation of concerns.
This took longer than prompting a single model. The payoff: coherent output across all layers because each agent had full context of the previous phase's decisions — not a summary, the actual artifacts.
The runtime stack.
The runtime stack is simpler than the build process.
| Component | Technology | |
|---|---|---|
| LLM | Groq — llama-3.3-70b-versatile | Forced tool_choice for structured output; chapter routing per response |
| Framework | TanStack Start | SSR React with file-based routing |
| API | TanStack Start server routes | API key never exposed to client |
| Hosting | Cloudflare Workers | Edge runtime via @cloudflare/vite-plugin |