Engineering Design Process

This website is a showcase of AI-assisted development using a structured Engineering Design Process (EDP). Every component was pair-programmed with Claude Code.

~2hrs

build time

tasks defined

phases

100%

AI paired

What is EDP?

The Engineering Design Process is a structured approach to building software with AI assistance. Instead of ad-hoc prompting, we define clear tasks, acceptance criteria, and dependencies upfront.

1. Plan

Define tasks & scope

2. Build

Implement with AI

3. Validate

Test & iterate

Task Structure

Before writing any code, we defined all 15 tasks in a structured markdown file. Each task has clear acceptance criteria and dependencies.

# docs/tasks/resume-website-tasks.md

## Overview
| Metric          | Count |
|-----------------|-------|
| Total Tasks     | 15    |
| Setup/Foundation| 3     |
| Design System   | 2     |
| Content/Data    | 2     |
| UI/Components   | 5     |
| Polish/Deploy   | 3     |

## Phase 1: Foundation (RESUME-001 → 003)
Project setup with Astro + Tailwind.

## Phase 2: Design System (RESUME-004 → 005)
Dark theme, colors, typography, components.

## Phase 3: Content (RESUME-006 → 007)
TypeScript types and resume data.

## Phase 4: UI Components (RESUME-008 → 012)
Build all page sections.

## Phase 5: Polish (RESUME-013 → 015)
Print styles, SEO, deployment.

Task Definition

Each task follows a consistent format with size, layer, dependencies, and acceptance criteria:

### RESUME-008 Build Hero Section
**Size**: M | **Layer**: Frontend | **Depends On**: RESUME-007

**Description**:
Create the hero section with terminal-style intro.

**Acceptance Criteria**:
- [x] Large name with cyan accent
- [x] Title and brief summary
- [x] Terminal-style code block ($ whoami)
- [x] CTA buttons (Get in Touch, View Work)
- [x] Stats cards on right side (desktop)

**Files Likely Affected**:
- src/components/Hero.astro
- src/pages/index.astro

Dependency Graph

Tasks are organized with explicit dependencies, enabling parallel work where possible:

RESUME-001 (Init Astro)
    │
    v
RESUME-002 (Configure)
    │
    v
RESUME-003 (Base Layout)
    │
    v
RESUME-004 (Tailwind) ──► RESUME-005 (Components)
                                │
                                v
                         RESUME-006 (Types) ──► RESUME-007 (Data)
                                                     │
    ┌────────────────────────────────────────────────┘
    v
┌─────────────────────────────────────────────────────────────┐
│  RESUME-008   RESUME-009   RESUME-010   RESUME-011   012   │
│   (Hero)    (Experience)   (Skills)    (Robotics)  (Edu)   │
└─────────────────────────────────────────────────────────────┘
    │
    v
RESUME-013 (Print) ──► RESUME-014 (SEO) ──► RESUME-015 (Deploy)

MCP Integration

Claude Code uses MCP (Model Context Protocol) servers to access external tools and documentation:

Context7

Real-time documentation lookup for Astro, Tailwind, TypeScript

Pencil MCP

Design mockup generation and .pen file editing

EDP-6 Tools

do_pla, do_bld, do_val, do_tst for structured workflow

File System

Read, Write, Edit, Glob, Grep for codebase operations

Human in the Loop

AI doesn't work alone. Every major decision goes through a human checkpoint. Here's the actual conversation flow from building this site:

USER Phase 1 kickoff

/implement phase 1

CLAUDE Decision point

I see RESUME-001 through RESUME-003. Before implementing, I have a question:

Tailwind CSS v4 Configuration

○ Option A: CSS-first (@theme in global.css)

○ Option B: Traditional JS config

USER

Option A

... Phase 1-4 completed ...

USER Tone adjustment

Emphasize hands-on technical background with strong people skills. Make it more AI-driven, focused on productivity.

CLAUDE

Updated the tone. Changes made:

• Title: "DevOps Consultant" → "AI-Driven Technical Leader"
• Summary: Added "still writes code every day", "10x productivity"
• Stats: Reordered to lead with "10x productivity.with.ai"

USER Context discovery

Explore my repositories to understand my actual AI skills and projects.

CLAUDE

Exploring your repositories...

Found: LMS/, SuperClaude/, Claudia/, RobotEvents/

→ ct-learn: React + Supabase + Clerk

→ judge-flow: Next.js + dnd-kit

→ Multiple projects using Claude Code

Added skills: Claude Code, MCP Servers, AI Agents, Supabase

Decision Points

AI pauses at architectural choices. Human decides direction.

Quick Iteration

Natural language feedback. AI adapts in seconds.

Context Aware

AI explores real codebase. Output reflects actual work.

Tech Stack

Framework

• Astro 5 (Static Site Generator)
• TypeScript (Strict Mode)
• Tailwind CSS v4 (CSS-first)

Features

• JSON-LD Structured Data
• Auto-generated Sitemap
• Print-optimized Styles

CI/CD Pipeline

The site deploys automatically via GitLab CI/CD with branch-based environments.

# .gitlab-ci.yml

image: node:22

stages:
  - deploy

cache:
  key: ${CI_COMMIT_REF_SLUG}        # Predefined GitLab var: branch name, slugified
  paths:
    - node_modules/
    - .astro/

deploy-production:
  stage: deploy
  before_script:
    # Install Chromium for Puppeteer PDF generation
    - apt-get update && apt-get install -y chromium fonts-liberation \
        libappindicator3-1 libasound2 libatk-bridge2.0-0 ... --no-install-recommends
    - export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
    - export PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
  script:
    - npm ci
    - npm install -g vercel
    - vercel pull --yes --environment=production --token="$VERCEL_TOKEN_PROD"
    - vercel build --prod --token="$VERCEL_TOKEN_PROD"
    - vercel deploy --prebuilt --prod --archive=tgz --token="$VERCEL_TOKEN_PROD"
  environment:
    name: production
    url: https://resume.yuzhao.net
  rules:
    - if: $CI_COMMIT_BRANCH == "release" || $CI_COMMIT_BRANCH == "main"

deploy-development:
  # Same structure, different token and branch rules
  environment:
    name: development
    url: https://resume-dev.yuzhao.net
  rules:
    - if: $CI_COMMIT_BRANCH == "develop"

Headless PDF Generation

Puppeteer with system Chromium (/usr/bin/chromium). Skip bundled download via PUPPETEER_SKIP_CHROMIUM_DOWNLOAD. Requires 12+ system libs for headless rendering.

Branch-Based Environments

Separate Vercel tokens per environment ($VERCEL_TOKEN_PROD, $VERCEL_TOKEN_DEV). GitLab CI variables keep secrets out of repo.

Caching Strategy

Cache keyed by CI_COMMIT_REF_SLUG (predefined GitLab var: branch name, slugified). node_modules/ and .astro/ persist across runs.

Vercel Build Flow

vercel pull → vercel build --prod → vercel deploy --prebuilt. Native Vercel build with --archive=tgz for faster uploads.

Key Takeaways

Structure > Prompting

Pre-defined tasks with acceptance criteria beat ad-hoc prompts. The AI knows exactly what "done" looks like.

Dependencies Matter

Explicit task dependencies prevent rework. Phase 4 components can't start until Phase 3 data is ready.

Iterate Fast

Short feedback loops: "change the tone", "add AI skills". The AI adapts instantly to new requirements.

Context is King

Claude explored real projects in D:\Repo to understand skills. The resume reflects actual work, not generic content.

Built with Claude Code + EDP + Astro + Tailwind

This page itself was generated through the same process.