Selected blueprint
Site Foundation
A static-first bilingual workshop with small interactive islands and explicit server boundaries.
Experience goal
Load the portfolio quickly, keep its content dependable, and add infrastructure only where the experience genuinely needs it.
How it works
- Localized route
Next.js builds dedicated English and Spanish pages from typed dictionaries.
- Server composition
Server Components assemble repository-owned content without a runtime CMS request.
- Interactive islands
Focused React clients own selection, games, theme, and navigation behavior.
- Trusted boundary
Fastify owns secrets, durable runs, AI calls, and private asset delivery.
Why these decisions
- Static by default
- Choice
- Build portfolio content into localized pages.
- Why
- Most content changes with a deployment, so runtime fetching would add latency without adding value.
- Tradeoff
- Content updates follow the repository workflow instead of an editor-facing CMS.
- Typed bilingual content
- Choice
- Give every feature its own English and Spanish dictionary contract.
- Why
- The compiler catches missing structure while each language can use natural copy.
- Tradeoff
- Every public content change must be maintained in both languages.
- Server only when justified
- Choice
- Keep static content local and reserve Fastify for trusted responsibilities.
- Why
- Secrets, persistence, private objects, and authoritative game rules need a server; biographies do not.
- Tradeoff
- The deployment has separate frontend, API, database, worker, and object-storage concerns.
Technology in context
- Next.js 16
- Static localized routes and server-side composition.
- React 19
- Small client-owned interaction boundaries.
- TypeScript
- Shared content and behavior contracts.
- CSS
- Responsive workshop layout, themes, and reduced motion.
- Fastify
- Trusted HTTP boundary for dynamic capabilities.
- PostgreSQL + S3
- Durable state and private raster assets.
How it is verified
- Both localized routes are statically generated in the production build.
- Responsive browser journeys cover desktop, tablet, and mobile layouts.
- Automated accessibility checks run in English and Spanish.