Ce portfolio
Sous le capot
Architecture & infrastructure
Comment ce portfolio a été construit
Ce portfolio est aussi une démonstration technique. Voici les choix d'architecture, de sécurité et d'infrastructure qui le font tourner.
Sommaire
7 domaines techniques
Chaque section détaille un aspect précis de la construction et du déploiement du site.
Fondations
Architecture applicative
Nuxt 4 avec SSR, structure app/ et composants réutilisables.
Nuxt 4 + SSR
Rendu côté serveur pour des performances et un SEO optimaux. Structure app/ pour une séparation claire des couches.
Composants réutilisables
Bibliothèque de composants base/ (Button, Card, Badge...) et main/ (Header, Footer) tous typés TypeScript.
i18n FR + EN
Internationalisation complète avec @nuxtjs/i18n v10, stratégie prefix, hreflang automatiques et traductions lazy-loaded.
Données structurées
Schema.org JSON-LD sur toutes les pages : Person, WebSite, BreadcrumbList, SoftwareApplication.
Protection
Sécurité
Protection appliquée sur toutes les couches : headers, formulaires, rate limiting.
Headers de sécurité
CSP, HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy configurés via middleware Nitro.
Rate limiting
Limitation des requêtes sur l'API contact pour éviter les abus et le spam.
Cloudflare Turnstile
Protection du formulaire de contact avec Turnstile (alternative respectueuse à reCAPTCHA).
Validation serveur
Validation et sanitisation de toutes les entrées côté serveur avec Yup.
Déploiement
Infrastructure
Déployé sur Docker avec CI/CD automatisé.
Docker
Application containerisée avec Dockerfile optimisé et docker-compose pour le déploiement.
CI/CD automatisé
GitHub Actions avec runner auto-hébergé pour déployer automatiquement à chaque push sur main.
Traefik + Cloudflare
Reverse proxy Traefik pour le routing HTTPS, Cloudflare pour le DNS et la protection DDoS.
Mode maintenance
Mode maintenance configurable via variable d'environnement, sans redéploiement.
Monitoring
Observabilité
Logs structurés et monitoring intégrés dès le départ.
Logs structurés
Chaque requête est loggée avec un request ID unique, l'IP, le statut et la durée.
Health check
Endpoint /api/health exposant le statut, la version et les informations de l'environnement.
Grafana + Loki
Logs envoyés dans Loki et visualisés dans Grafana avec des dashboards dédiés.
Error tracking
Gestion centralisée des erreurs serveur avec contexte complet pour faciliter le débogage.
Référencement
SEO technique
SEO technique avancé : données structurées, hreflang et sitemap dynamique.
SSR pour le SEO
Le rendu serveur garantit que les crawlers reçoivent le contenu complet dès la première requête.
hreflang
Balises hreflang sur toutes les pages pour indiquer aux moteurs la version linguistique appropriée.
Sitemap dynamique
Sitemap généré automatiquement avec toutes les URLs FR/EN, priorités et alternatives hreflang.
Schema.org JSON-LD
Markup sémantique sur toutes les pages : Person, WebSite, BreadcrumbList pour les rich snippets.
Mesure
Analytics & vie privée
Métriques de visite sans sacrifier la vie privée.
Rybbit
Analytics léger et RGPD-friendly auto-hébergé. Pas de cookies, pas de pistage cross-site.
Respect de la vie privée
Aucun cookie de tracking, aucune donnée vendue. L'analytics reste à usage interne uniquement.
Données propriétaires
Les données restent sur mon infrastructure. Contrôle total sur ce qui est collecté.
Métriques utiles
Pages vues, sources de trafic, pays et appareils. L'essentiel, sans le superflu.
Ops
Automatisation
Aucune action manuelle pour déployer ou monitorer.
Déploiement continu
Chaque push sur main déclenche automatiquement build, tests et déploiement via GitHub Actions.
Alerting
Alertes automatiques en cas d'erreur critique ou d'indisponibilité détectée par le monitoring.
Versioning
Numéro de version injecté automatiquement dans le build, visible sur le health check.
Infra as config
Toute l'infrastructure est définie via docker-compose.yml et variables d'environnement.
Technologies
Stack complète
Envie d'en discuter ?
Une question sur l'architecture ?
Je serais ravi d'échanger sur les choix techniques de ce portfolio ou de tout autre projet.