This portfolio
Under the hood
Architecture & infrastructure
How this portfolio was built
This portfolio is also a technical demo. Here are the architecture, security and infrastructure choices that make it tick.
Overview
7 technical domains
Each section details a specific aspect of how this site was built and deployed.
Foundations
Application architecture
Nuxt 4 with SSR, app/ structure and reusable components.
Nuxt 4 + SSR
Server-side rendering for optimal performance and SEO. App/ structure for clear layer separation.
Reusable components
Component library: base/ (Button, Card, Badge...) and main/ (Header, Footer), all TypeScript typed.
i18n FR + EN
Full internationalization with @nuxtjs/i18n v10, prefix strategy, automatic hreflang and lazy-loaded translations.
Structured data
Schema.org JSON-LD on all pages: Person, WebSite, BreadcrumbList, SoftwareApplication.
Protection
Security
Protection applied at every layer: headers, forms, rate limiting.
Security headers
CSP, HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy configured via Nitro middleware.
Rate limiting
Request limiting on the contact API to prevent abuse and spam.
Cloudflare Turnstile
Contact form protection with Turnstile (privacy-respecting alternative to reCAPTCHA).
Server validation
Validation and sanitization of all inputs server-side with Yup.
Deployment
Infrastructure
Deployed on Docker with automated CI/CD.
Docker
Containerized application with optimized Dockerfile and docker-compose for deployment.
Automated CI/CD
GitHub Actions with self-hosted runner to automatically deploy on every push to main.
Traefik + Cloudflare
Traefik reverse proxy for HTTPS routing, Cloudflare for DNS and DDoS protection.
Maintenance mode
Maintenance mode configurable via environment variable, no redeployment needed.
Monitoring
Observability
Structured logs and monitoring built in from the start.
Structured logs
Every request is logged with a unique request ID, IP, status and duration.
Health check
Endpoint /api/health exposing status, version and environment information.
Grafana + Loki
Logs sent to Loki and visualized in Grafana with dedicated dashboards.
Error tracking
Centralized server error handling with full context for easy debugging.
Search
Technical SEO
Advanced technical SEO: structured data, hreflang and dynamic sitemap.
SSR for SEO
Server rendering ensures crawlers receive complete content on the very first request.
hreflang
hreflang tags on all pages to signal the appropriate language version to search engines.
Dynamic sitemap
Automatically generated sitemap with all FR/EN URLs, priorities and hreflang alternatives.
Schema.org JSON-LD
Semantic markup on all pages: Person, WebSite, BreadcrumbList for rich snippets.
Metrics
Analytics & privacy
Visit metrics without sacrificing privacy.
Rybbit
Lightweight, GDPR-friendly, self-hosted analytics. No cookies, no cross-site tracking.
Privacy first
No tracking cookies, no data sold. Analytics stays for internal use only.
First-party data
Data stays on my infrastructure. Full control over what is collected.
Useful metrics
Page views, traffic sources, countries and devices. The essentials, without the noise.
Ops
Automation
No manual action needed to deploy or monitor.
Continuous deployment
Every push to main automatically triggers build, tests and deployment via GitHub Actions.
Alerting
Automatic alerts on critical errors or downtime detected by monitoring.
Versioning
Version number automatically injected into the build, visible on the health check.
Infra as config
All infrastructure defined via docker-compose.yml and environment variables.
Technologies
Full stack
Want to discuss it?
Questions about the architecture?
Happy to talk about the technical choices behind this portfolio or any other project.