Clement Yuen
Back to case study

Architecture explorer

Personal Website

Interactive system map for this project. Select a node to inspect technology, role, integration, and responsibilities.

Composition root: Angular host + SSR owns the brand; federation and external links attach project surfaces.

Node types

  • Frontend
  • Infrastructure
  • Micro-frontend
  • External service

Architecture decisions

Decision · reason · alternative · trade-off for each major fork in the road.

Decision

Host/remote split for demos

Reason
Protect the resume product’s release train from experimental UI churn.
Alternative
All demos as feature modules inside one Angular app
Trade-off
Operational complexity around manifests, remote URLs, and local multi-port development.

Decision

Typed content constants for resume data

Reason
Updates stay in one place; templates stay declarative.
Alternative
CMS or Markdown for every resume field
Trade-off
Non-developers cannot edit content without a PR; acceptable for a personal site.

Decision

Case-study pages in the host (not only live demos)

Reason
Hiring readers need engineering decisions, trade-offs, and lessons—not only a running widget.
Alternative
Demo-only projects dropdown with no write-up
Trade-off
More content to maintain; mitigated by a single reusable page shell.