The public website and engineering portfolio of Dr. Derek Austin, built to present six live projects and the engineering behind them.
Latest successful automated Lighthouse scores for the canonical production website, measured with Lighthouse’s standard mobile emulation against doctorderek.com. The badges and linked HTML report come from the audit with the median performance score among five production runs.
This repository contains the full-stack Next.js source code for my public portfolio hub.
- Framework: Next.js 16, React 19
- Language: TypeScript 6 (Strict Mode)
- Styling: Tailwind CSS v4
- State: XState v5
- Motion and Rendering: Motion, Rive, HTML Canvas, and fullPage.js
- Quality: Vitest, React Testing Library, Playwright, and Codecov
- Deployment: Vercel and GitHub Actions
- Deterministic Global State: An XState parallel machine owns logo and background transitions outside the React render cycle (
machines/globalMachine.ts). - Motion-Aware Interaction: The browser’s
prefers-reduced-motionsignal controls fullPage.js effects, Motion transitions, Rive ambience, and particle rendering. - Server-Rendered Publishing Feed: Next.js fetches, cleans, and revalidates the live Medium RSS feed before handing posts to the client experience.
- AI-Assisted Engineering with Human Verification: Functional specifications and persistent project context guide implementation; strict TypeScript, automated tests, and manual QA verify the result.
Use fnm for Node version management and pnpm as the package manager. In PowerShell:
fnm env --use-on-cd | Out-String | Invoke-Expression
fnm use
corepack enable pnpm
pnpm install
pnpm devRun the complete local quality gate before submitting changes:
pnpm format
pnpm lint
pnpm exec tsc --noEmit
pnpm exec vitest run --coverage
pnpm build
pnpm test:e2e
pnpm audit --prod