Architecture¶

The C4 Level 1 diagram shows the portfolio system in context: who uses it and what external systems it depends on.

Key actors:

• Visitors / Recruiters browse the portfolio, download CVs, and send messages via the contact form
• Developer (Sven) pushes code to GitHub, which triggers automated deployments
• External systems: GitHub (CI/CD), Gmail SMTP (email delivery), Microsoft Entra ID (authentication), Azure Cost Management (weekly cost reporting)

The C4 Level 2 diagram zooms into the portfolio system to show its containers (deployable units).

Containers:

Key components:

• Navigation — Wouter routing, anchor-scroll on home
• ContactForm — TanStack Query + useContactForm hook
• CVDownloadButton — EN/NL PDF download
• useProjects hook — TanStack Query with static initialData fallback
• API Client — openapi-fetch, type-safe from OpenAPI schema
• nginx Reverse Proxy — serves static, proxies /api/*

Key components:

• FastAPI App — ASGI entry, CORS, slowapi rate limiting
• ContactRouter — POST /api/contact
• CVRouter — GET /api/download-cv + feature-flagged CV generation
• ProjectsRouter — projects/experience/skills from PostgreSQL
• AdminRouter — POST /api/admin/*, bearer token
• Database Layer — SQLAlchemy async + asyncpg + Alembic
• Managed Identity Auth — AAD token for PostgreSQL

Key components:

• MkDocs Build Engine — Material theme, static HTML
• mkdocs-drawio plugin — renders .drawio files interactively in-browser (no CI export needed)
• Architecture Pages — Markdown + embedded interactive diagrams
• Cost Dashboard Page — auto-committed weekly by cost-report.yml
• SWA Auth Layer — EasyAuth on dev, public on prod

The UML deployment diagram shows how software artifacts are mapped to Azure infrastructure nodes.

Key deployment details:

• Container Apps Environment hosts both frontend and backend containers with auto-scaling (1–5 replicas, triggered at 100 concurrent requests)
• nginx runs inside the frontend container, serving static assets and reverse-proxying /api/* requests to the backend on port 8000
• Managed Identities provide passwordless access to Key Vault secrets (RBAC: Key Vault Secrets User)
• Azure DNS Zone manages custom domains with managed TLS certificates

The detailed Azure cloud diagram shows all Azure resources, their relationships, and configuration across both production and development environments.

Production environment (dna-prod-portfolio-westeurope-rg):

• Container Apps: frontend (www.sven-relijveld.com), backend, and UIGen (admin.sven-relijveld.com) with auto-scaling
• Supporting services: ACR, Key Vault, Log Analytics + App Insights, DNS Zone, PostgreSQL Flexible Server
• Static Web App: docs.sven-relijveld.com (MkDocs Material)
• Azure Cost Management (subscription scope): queried weekly by cost-report.yml to generate the cost dashboard

Dev environment (dna-dev-portfolio-westeurope-rg):

• Mirror of prod with EasyAuth protection (Entra SSO) on all services including UIGen (admin.dev.sven-relijveld.com)
• Scale-to-zero capable (min 0 replicas)
• PR preview deployments with image tags pr-<N>-<sha>

For the full architecture overview with data flows and CI/CD pipeline details, see the Architecture Overview.