Aller au contenu
alan.salmon
Tous les projets
En ligne · 2026

Ce portfolio

Le site que vous lisez : conçu, testé, déployé et supervisé comme un vrai projet d'infrastructure.

Année
2026
Cadre
Projet personnel
  • React
  • TypeScript
  • GitHub Actions
  • Docker
  • Prometheus
  • Grafana
Affiche du projet : une fenêtre de navigateur avec une flèche de déploiement, sur un motif de pipelines

01 · Contexte

Le défi

Mon ancien site, fait en 2024 à l'IUT à partir d'un template, ne me ressemblait plus. Je l'ai entièrement refait pour qu'il soit à la fois ma vitrine et un vrai projet d'infrastructure : conçu, testé, déployé automatiquement et supervisé depuis mon homelab.

02 · Architecture

Comment c'est construit

Schéma en trois zones : sur GitHub, le push et les contrôles de la CI puis l'envoi SFTP ; chez OVH, le staging et la production ; dans le homelab, les sondes Blackbox et json_exporter, Prometheus, Alertmanager qui alerte sur le téléphone via ntfy, Grafana via Tailscale et le signal de vie vers healthchecks.io
Du push à la supervision : GitHub, l'hébergement OVH et mon homelab

Les points clés

  • Site React et TypeScript entièrement prérendu : des pages statiques, rapides et lisibles même sans JavaScript
  • Contenu bilingue en YAML, validé à chaque build (schémas, parité FR/EN, images)
  • Intégration continue : lint, types, tests, test du .htaccess dans un Apache conteneurisé, liens et Lighthouse avec des seuils bloquants
  • Déploiement automatique en SFTP chez OVH : clé du serveur épinglée, staging protégé, envoi sans coupure et test de fumée après chaque mise en ligne
  • Politique de sécurité (CSP) stricte, générée page par page
  • Supervision depuis mon NAS : sondes Blackbox, Prometheus, Grafana, alertes sur mon téléphone via ntfy et signal de vie si la supervision elle-même tombe

03 · En images

Galerie

  • À gauche, l'ancien site : un fond abstrait et le titre « Développeur » ; à droite, le nouveau site sur ordinateur et sur téléphone, avec la topologie et les chiffres clés
    De l'ancien template au site actuel
  • Exécution GitHub Actions réussie : le job de contrôles en 2 min 28 avec la durée de chaque étape, le déploiement du staging, la production réservée à la branche main
    Chaque modification passe ces contrôles avant d'être mise en ligne
  • Scores Lighthouse : 98, 100, 100 et 100 sur mobile, 100 partout sur ordinateur, et le JavaScript de l'accueil à 161 Ko pour un budget de 200 Ko
    Performance, accessibilité, bonnes pratiques et référencement, vérifiés à chaque build
  • Tableau de bord Grafana : état global en ligne, disponibilité, temps de réponse, certificat, dernier déploiement, état de chaque cible, redirections, courbes de temps de réponse et version en ligne
    La supervision depuis le homelab (illustration)
  • Chronologie d'une panne à côté d'un téléphone affichant deux notifications ntfy : l'alerte SiteDown en priorité haute, puis sa résolution
    Une panne détectée, notifiée puis résolue (illustration)

Cliquer sur une image l'ouvre en plein écran, avec navigation entre les captures.

04 · Bilan

Ce que j'en retire

Avant, mettre mon site à jour voulait dire envoyer les fichiers à la main sur l'hébergement. Aujourd'hui, un simple push suffit : la CI vérifie tout, le site part d'abord sur le staging puis en production, et un test de fumée confirme qu'il répond. Automatiser le déploiement a rendu chaque mise à jour rapide, sûre, et bien plus plaisante qu'avant.