Portfolio Documentation¶

Welcome to the technical documentation for Sven Relijveld's portfolio website.

Overview¶

This documentation covers the architecture, development, deployment, and maintenance of a professional portfolio website built with modern technologies and deployed on Azure Container Apps.

Key Features¶

Modern Stack: React 18, TypeScript, FastAPI, Docker
Cloud-Native: Azure Container Apps with auto-scaling
Infrastructure as Code: Bicep templates for reproducible deployments
CI/CD: Automated two-phase deployments via GitHub Actions
Cost-Optimized: ~$10-25/month Azure costs
Professional: Production-ready with monitoring and security

Deployment Pipeline¶

This project uses a two-phase deployment pipeline with a dedicated PR preview workflow for inner-loop testing.

Phase 1: Infrastructure¶

Deploys base infrastructure without containers (managed identities, ACR, Key Vault, Container Apps Environment, monitoring):

Triggers: PR to main → dev; push to main → prod; manual dispatch

Phase 2: Application¶

Builds Docker images, pushes to ACR, and deploys Container Apps with containers:

PR preview (deploy-pr-preview.yml): triggered by any PR to main, deploys to the shared dev environment
Production (deploy-application.yml): triggered automatically after Phase 1 lands on main, deploys to prod

Workflow Triggers¶

Trigger	Infrastructure	PR Preview (dev)	Application (prod)	Documentation
PR to `main`	✅ dev	✅ dev	❌	❌
Push to `main`	✅ prod	❌	✅ prod	✅
Documentation changes	❌	❌	❌	✅
Manual dispatch	✅	❌	✅	✅

Quick Links¶

Getting Started - Set up your development environment
Infrastructure - Azure resources and IaC
Workflow Execution Order - CI/CD pipeline and deployment guides
GitHub Actions Setup - OIDC authentication and workflow configuration

Technology Stack¶

Frontend¶

Framework: React 18 with TypeScript
Build Tool: Vite
Styling: Tailwind CSS + shadcn/ui
Routing: Wouter

Backend¶

Framework: FastAPI with Python 3.11
Server: Uvicorn (ASGI)
Email: Gmail SMTP

Infrastructure¶

Hosting: Azure Container Apps
Registry: Azure Container Registry
Secrets: Azure Key Vault
Monitoring: Application Insights
IaC: Bicep

Project Structure¶

portfolio/
├── client/              # React frontend
│   ├── src/
│   │   ├── components/  # UI components
│   │   ├── pages/       # Page components
│   │   └── assets/      # Static assets
│   └── public/          # Public files
├── api/                 # FastAPI backend
│   ├── main.py         # Application entry
│   └── requirements.txt
├── infra/              # Bicep IaC templates
│   ├── main.bicep
│   └── modules/
├── .github/            # CI/CD workflows
│   └── workflows/
└── docs/               # This documentation

Getting Help¶

Issues: GitHub Issues
Email: sven.relijveld@onedna.nl
Documentation: You're reading it!

License¶

This project is licensed under the MIT License.

Built with ❤️ by Sven Relijveld Data Engineer & Solution Architect at OneDNA