System Design

Microservices Architecture Showcase

The site itself is a portfolio artifact: independently deployed services and support components coordinated in containers.

This portfolio site was built entirely by voice using Wispr Flow, GitHub Copilot, and OpenCode, including the site content, resume PDF, code, configuration, microservices, and infrastructure behind it. It was created from scratch rather than from a template, with most of the work done from an iPhone. GitHub Copilot reviewed the history of work I personally authored in more than 3,000 pull requests across 60 Git repositories over the past two years. It used that history to update the resume for my current role and improve how my skills and experience are described. The entire site was completed in a single day.

I am using these AI abilities in my day-to-day work to complete two weeks' worth of work in just a couple of days.

Architecture

Microservices Diagram of this site

Select a node to highlight component relationships and responsibilities.

externaledgebackenddataHTTPSHTTPHTTPHTTPHTTPSQLSQLSQLSQLreverse-proxygatewayweb-frontendprofile-apitimeline-apievent-apimigratepostgres

reverse-proxy

Upstream public reverse proxy that receives internet traffic and forwards only allowed paths into this stack.

Internet access is controlled by the upstream reverse-proxy; gateway/routes stay internal and migrate runs only during deployment/startup.

Request Flows

  • Page load: Browser -> reverse-proxy -> gateway -> web-frontend
  • Data fetch: web-frontend -> gateway -> profile/timeline APIs
  • Timeline scrub: Browser -> reverse-proxy -> gateway -> event-api -> postgres rollup
  • Deploy/startup: migrate -> postgres -> dependent app services start

Legend: HTTPS (external ingress), HTTP (internal request/response), SQL (persistent storage).

Service Inventory

Components

reverse-proxy

Stack: External reverse proxy

Public ingress in front of this app stack

web-frontend

Stack: Next.js

Portfolio UI, timeline, and architecture pages

gateway

Stack: Nginx

Internal gateway routing frontend and API traffic

profile-api

Stack: Fastify + PostgreSQL

Profile, competencies, and technology data

timeline-api

Stack: Fastify + PostgreSQL

Career timeline events and highlights

event-api

Stack: Fastify + PostgreSQL

Captures and aggregates page analytics

migrate

Stack: Flyway

Applies versioned schema migrations and managed site content before app services start

postgres

Stack: PostgreSQL 16

Persistent storage