Stack & Automation

This portfolio demonstrates an end-to-end automated development workflow where Claude Code handles everything from issue specification to pull request reviews, CI validation, and deployment. Below is the technical architecture and automation pipeline that powers this site.

Architecture

Frontend

Next.js 16
React 19
TypeScript
Tailwind CSS v4
Framer Motion

Server Components + Client boundaries

Backend

Convex
Real-time Database
Server Functions
Reactive Queries

Serverless backend with real-time updates

Infrastructure

WorkOS AuthKit
Vercel Hosting
GitHub Actions
Convex Deploy

Admin auth + automatic deployment

Result

Fast, type-safe, real-time portfolio with automated content management and zero-config deployment

Next.js 16 App Router: Server Components for optimal performance, React 19 for concurrent rendering, TypeScript strict mode for type safety.

Convex Backend: Real-time database with reactive queries, server functions for mutations, automatic schema validation.

WorkOS AuthKit: Email allowlist for admin-only access, secure session management, seamless integration.

Vercel + GitHub Actions: Automatic deployment on merge, preview deployments for PRs, integrated Convex deploy.

Automated Development Workflow

1. Issue

Create GitHub issue describing feature or bug

2. Claude Spec

/spec command generates mini spec with plan and acceptance criteria

3. Implementation

/implement command creates branch, writes code, opens PR

4. Claude Review

/review command performs structured code review, posts verdict

5. CI Checks

GitHub Actions run lint, typecheck, tests, build

6. Merge

If all checks pass, PR merges to main

7. Deploy

Vercel auto-deploys, Convex functions update

8. Changelog

Automated entry added to changelog via GitHub Actions

Result: From issue to production in minutes, not days. Claude handles specification, implementation, and review. Human only approves final merge decision.

Claude Code Integration: Slash commands (/spec, /implement, /review, /release-note) automate the entire development lifecycle. Claude acts as spec writer, implementer, and reviewer.

Required Checks: Claude review is a required check — PRs cannot merge without APPROVE verdict. This ensures code quality gates are enforced automatically.

Changelog Automation: On merge to main, GitHub Actions generates changelog entry with PR number, commit SHA, and summary. Loop prevention ensures bot commits don't trigger additional updates.

Why This Matters

Traditional development workflows require manual specification writing, code reviews, changelog updates, and deployment coordination. This creates bottlenecks and slows iteration speed.

This automated workflow eliminates those bottlenecks. Claude Code handles the repetitive work, allowing focus on product decisions and architecture. Features ship faster, code quality remains high, and documentation stays up-to-date automatically.

This portfolio is proof-of-concept. Every feature you see was built using this exact workflow. The automation you're reading about built the site you're reading it on.

Note: This page currently shows the planned workflow. Live evidence widgets (latest deployment, CI status, last Claude approval) will be added post-v1 once automation is fully implemented.