AI Engineering / Software Engineering
AI-Assisted Portfolio Engineering
19 spec docs before code · strict TypeScript
Personal project · June – July 2026
- Next.js
- TypeScript
- Tailwind CSS
- AI-assisted workflow
Problem
AI coding agents produce plausible code fast — and unreviewed, unspecified output just as fast. The goal was to build a production-quality site while treating the agent the way a team treats a new engineer: no code without an approved spec, no merge without review. The site itself is the artifact; the workflow is the experiment.
Architecture
Next.js App Router with Server Components by default and client islands only where interactivity requires them. All copy and data live in one typed content layer (strict TypeScript, no placeholder content permitted by rule), consumed by reusable components. Design tokens drive theming (dark/light, reduced-motion and forced-colors fallbacks); SEO is handled with per-route metadata, JSON-LD structured data, and generated Open Graph images. The agent worked from 19 specification documents — PRD, information architecture, design system, performance budget, milestone plan — each gated by human approval before implementation.
Key Decisions
- Spec-first workflow: every feature required an approved objective, architecture, file list, and acceptance criteria before any code was written.
- A single typed content layer as the source of truth — components render data, they never own copy.
- Progressive enhancement: all content server-renders and remains fully readable with JavaScript disabled; animation is layered on top, never load-bearing.
- Accessibility as a constraint, not a pass: semantic HTML, keyboard navigation, visible focus states, and reduced-motion paths for every animation.
Results
The site you're reading: fully server-rendered content, a strict-TypeScript codebase with zero placeholder content, WCAG-conscious markup and motion, and a documented spec trail from requirement to implementation for every feature.