title: 'Building a Personal Site with AI Orchestration' date: '2026-08-11' description: 'How I used 20 AI agents to build, deploy, and document a personal website in one session.' tags: ['ai', 'next.js', 'orchestration']
As software engineers, we often spend days setting up boilerplate, tweaking styling configurations, creating build scripts, and organizing site architecture. When I decided to redesign my personal site at diap.dev, I set an ambitious constraint: build, deploy, verify, and document the entire site in a single session—without writing manual boilerplate or incurring API token costs.
To achieve this, I turned to multi-agent AI orchestration using free compute pools across 20 distinct accounts, guided by strict quality supervision protocols. Here is how the system was built, how the orchestration workflow operates, and what this model reveals about the future of software engineering.
The Concept: AI Orchestration & Parallel Subagents
Single-prompt AI coders often struggle when building complex applications. As context windows grow, latency spikes, focus degrades, and agents lose track of subtle architectural contracts.
Instead of asking one monolithic model to build everything in a single conversation, AI orchestration separates planning from execution:
- The Orchestrator: Maintains high-level architectural state, breaks down complex deliverables into atomic tasks, and supervises outputs.
- Subagents: Isolated, single-task execution workers spawned in parallel, each operating with minimal required context and a single clear objective.
By distributing work across specialized subagents, execution speed multiplies, context pollution is eliminated, and each component is built with single-minded focus.
Tech Stack & Architecture Choices
When selecting the foundational stack for diap.dev, the priority was speed, developer ergonomics, fast build times, and zero unnecessary runtime overhead:
- Next.js 16 (App Router): Provides server-first component architecture, automated static optimization (
generateStaticParams), and seamless MDX integration. - Tailwind CSS v4: Ultra-fast CSS compilation engine using first-class CSS variables (
@theme) and zero-config CSS plugins like@tailwindcss/typography. - TypeScript: Strict type checking across components, blog frontmatter, and utility functions to prevent runtime regressions.
- Framer Motion: Micro-animations and entrance transitions that make dark-themed interfaces feel fluid and alive.
- Vercel: Edge deployment with automated GitHub CI/CD integration, analytics, and speed insights.
The Orchestration Workflow
The entire site build followed a strict two-phase execution protocol:
1. Task Decomposition & Master Plan
Before launching code generators, the master task list was decomposed into atomic units: scaffold foundation, build responsive UI components (Hero, About, Skills, Experience, Philosophy), setup SEO metadata, build MDX blog engine, and write comprehensive technical guides.
2. Parallel Execution & Quality Scoring
Each atomic task was assigned to an independent subagent powered by Google's Gemini Flash models. Accounts were assigned in parallel (e.g., acct01, acct03, acct05) to prevent rate-limit bottlenecks.
After each subagent completed its task, an automated quality rubric scored the output across 10 evaluation dimensions:
- Completeness and correctness
- Code style and TypeScript safety
- Visual design and typography alignment
- Empirical verification (build status)
If any dimension scored below 8.0, the output was automatically re-iterated before merging into the main branch.
Key Performance Stats
- Total Execution Time: ~1 session
- Parallel AI Accounts Used: 20 free accounts
- Total Compute Cost: $0.00
- Lighthouse Performance Score: 100/100
- Build Verification: 0 compilation errors across TypeScript & MDX routes
Personal Reflection: Quality in the Age of AI
As a QA Automation and Performance Engineer, my core philosophy is building systems that make quality inevitable. AI coding tools can generate massive volumes of code fast, but without guardrails, speed rapidly leads to tech debt and silent failures.
Orchestration changes the dynamic. When AI agents are bound by strict linting rules, empirical build gates (npm run build), structural boundaries, and automated post-execution reviews, velocity and quality reinforce each other. The engineer shifts from typing syntax to system architecture, verification design, and strategic guidance.
Building diap.dev was a validation of this paradigm shift. The site you are reading right now was designed, implemented, compiled, and deployed by autonomous agents—proof that with the right orchestration framework, high quality and rapid execution go hand in hand.