Problem

A normal portfolio can claim production and platform experience while providing no evidence beyond screenshots. I wanted the site itself to expose how it was built and released, without turning it into an oversized demonstration cluster.

System design

The Vue frontend is built as a static application and served by nginx. A small Fastify control-plane API exposes health, version, deployment history, traffic, and metrics endpoints. Caddy terminates TLS and routes public traffic. Prometheus collects application and host signals; Grafana provides visualization; Loki and Promtail keep container logs queryable.

client → Caddy → nginx / Vue
               └→ Fastify control-plane API

Prometheus → API metrics + node exporter
Promtail   → Loki → operational log queries

The architecture is deliberately boring. Each component has one clear job, and the site remains useful if the live telemetry path is unavailable.

Delivery path

A push to main starts CI and a release workflow. The frontend and backend are linted, tested, and built. Container images are created and scanned with Trivy before publication to GitHub Container Registry. The deployment job updates the VPS services and runs public smoke checks against both the site and API.

The API embeds the Git SHA and release timestamp. After deployment, /api/version shows which source revision is live, while deployment history records the release result. This closes a common verification gap: a green remote command does not by itself prove that the public endpoint serves the expected artifact.

Security and failure boundaries

  • Dependencies and images are checked during delivery.
  • The API applies security headers, request limits, and strict input validation.
  • Runtime data is separated from container images and mounted explicitly.
  • The frontend treats live metrics as optional enhancement rather than required page content.
  • Post-deployment checks validate the public route through TLS, not only the container network.

Result

The project provides verifiable examples of frontend delivery, API design, containerization, CI/CD, security scanning, observability, and release verification in one bounded system. It also catches real operational problems: dependency advisories, failed images, unhealthy API responses, and mismatches between the intended and deployed commit.

The full implementation is available on GitHub. The useful lesson is not that every personal site needs Prometheus. It is that a technical portfolio becomes stronger when its claims are inspectable and its deployment behaves like the systems it says the author can operate.