Skip to content
alan.salmon
All projects
Online · 2026

This portfolio

The site you are reading: designed, tested, deployed and monitored like a real infrastructure project.

Year
2026
Context
Personal project
  • React
  • TypeScript
  • GitHub Actions
  • Docker
  • Prometheus
  • Grafana
Project poster: a browser window with a deployment arrow, on a pipeline pattern

01 · Context

The challenge

My old site, built in 2024 at university from a template, no longer felt like mine. I rebuilt it from scratch to be both my showcase and a real infrastructure project: designed, tested, automatically deployed and monitored from my homelab.

02 · Architecture

How it's built

Diagram in three zones: on GitHub, the push, the CI checks and the SFTP upload; at OVH, staging and production; in the homelab, the Blackbox and json_exporter probes, Prometheus, Alertmanager alerting the phone through ntfy, Grafana over Tailscale and the heartbeat to healthchecks.io
From push to monitoring: GitHub, the OVH hosting and my homelab

Key points

  • Fully prerendered React and TypeScript site: static, fast pages that remain readable without JavaScript
  • Bilingual content in YAML, validated on every build (schemas, FR/EN parity, images)
  • Continuous integration: lint, types, tests, a containerised Apache test of the .htaccess, link checks and Lighthouse with blocking thresholds
  • Automatic SFTP deployment to OVH: pinned host key, protected staging, uninterrupted uploads and a smoke test after every release
  • Strict Content Security Policy, generated page by page
  • Monitoring from my NAS: Blackbox probes, Prometheus, Grafana, alerts on my phone through ntfy, and a heartbeat in case the monitoring itself goes down

03 · In pictures

Gallery

  • On the left, the old site: an abstract background and the title "Développeur"; on the right, the new site on desktop and phone, with the topology and key figures
    From the old template to the current site
  • Successful GitHub Actions run: the checks job in 2 min 28 with the duration of each step, the staging deployment, production restricted to the main branch
    Every change goes through these checks before going live
  • Lighthouse scores: 98, 100, 100 and 100 on mobile, 100 across the board on desktop, and 161 KB of JavaScript on the home page against a 200 KB budget
    Performance, accessibility, best practices and SEO, checked on every build
  • Grafana dashboard: overall status online, availability, response time, certificate, last deployment, status of each target, redirects, response-time charts and live version
    Monitoring from the homelab (illustration)
  • Timeline of an outage next to a phone showing two ntfy notifications: the high-priority SiteDown alert, then its resolution
    An outage detected, notified, then resolved (illustration)

Click an image to open it full screen and browse through the screenshots.

04 · Takeaways

What I took away from it

Updating my site used to mean uploading files by hand to the host. Now a single push is enough: the CI checks everything, the site goes to staging and then to production, and a smoke test confirms it responds. Automating the deployment made every update quick, safe and far more enjoyable than before.