markmetcalfe.com

The source code for my personal portfolio site at markmetcalfe.com.

What it contains

The site is a portfolio and creative playground, including:

• Home page — landing page with an interactive 3D visuals background
• Resume — dynamically fetched from the @markmetcalfe/resume package
• Visuals — interactive generative graphics using Three.js
• Doodle — a multiplayer drawing and guessing game
• Country Guesser — a singleplayer and multiplayer country name guessing game
• Sequencer — a browser-based music sequencer built with Tone.js

Architecture

The repo is split into two sub-projects:

web/

The frontend, built with:

• Nuxt.js (Vue 3 framework)
• Vue 3 with TypeScript
• Vite (via Nuxt)
• Pinia for state management
• Three.js and Tone.js for creative features

Features are organised as Nuxt modules under web/modules/.

api/

A set of Cloudflare Workers managed with Wrangler. Each worker lives in its own subdirectory (doodle/, network-status/, resume/) and has its own wrangler.jsonc config.

Development

1. Install dependencies in both sub-projects:

cd web && npm install
cd ../api && npm install

2. Start the development server (from the web/ directory). This also starts the API workers locally:

npm run dev:api

Testing

Playwright is used for end-to-end testing. Tests live in web/tests/e2e/.

Install Playwright browsers if you haven't already:

npx playwright install

Run the tests (from the web/ directory):

npm run test

Deployment

The main branch is automatically deployed by Cloudflare Pages (frontend) and Cloudflare Workers (API).