Project Details

Self-Hosted Infrastructure

Designed and operate a self-hosted environment that powers my portfolio project and supporting services. What began as a website evolved into a broader infrastructure exercise focused on deployment, routing, visibility, and operational thinking.

← Back to projects

Overview

This project started as a way to host my own portfolio, but it expanded into a practical self-hosted system that ties together frontend presentation, backend services, monitoring, and service routing.

Instead of treating the site as a static frontend, I built it as the visible layer of a larger environment. That environment includes containerized services, reverse proxying, health reporting, and observability components that make the system easier to understand and operate.

What I Built

Containerized Service Environment

I used Docker to run and isolate the services behind the project, giving the site a more realistic deployment model than a single local app.

Reverse Proxy and Traffic Routing

Nginx handles routing between the frontend and backend, creating a cleaner access layer and a more organized service boundary.

API-Driven System Visibility

The backend exposes health and metrics endpoints so the frontend can present live status information instead of static placeholders.

Monitoring and Operational Visibility

Monitoring tools provide uptime and health context, helping turn the portfolio into something closer to a live system dashboard.

Why This Project Matters

This project demonstrates more than site design. It shows how I think about systems as connected parts: how services are deployed, how traffic moves between them, how health is measured, and how infrastructure decisions affect the user-facing experience.

It also reflects the direction I want to keep growing in: backend development, systems engineering, self-hosting, and observability.

Architecture

User requests are served through Nginx, which routes traffic to the frontend and backend services. The backend gathers health and system information, exposes it through API endpoints, and the frontend renders that data into status indicators and project views. Monitoring tools collect metrics in parallel to provide deeper visibility into uptime and service behavior.

Draw.io Network / Service Diagram

Grafana Screenshot

System Flow

1. User Request A visitor requests a page or system data.

2. Nginx Routing Traffic is routed to the correct frontend or backend target.

3. Backend Processing Health, uptime, or service information is gathered and returned.

4. Monitoring Context Metrics are collected to provide visibility beyond a simple up/down result.

5. Frontend Display The site renders operational information in a clearer user-facing format.

Technical Focus Areas

Infrastructure

Docker, service organization, container-based deployment, and exposure control.

Backend

Health endpoints, metrics exposure, JSON responses, and status logic.

Monitoring

Grafana, Prometheus, uptime visibility, and observability-minded design.

Frontend Integration

Rendering live backend data into a portfolio that communicates technical work clearly.

What I Learned

This project strengthened my understanding of how infrastructure, applications, and monitoring fit together in a practical environment. Working through routing, health checks, service communication, and frontend presentation gave me a better grasp of how production-minded systems are assembled.

It also reinforced the importance of making technical systems understandable, not just functional.

Next Improvements

Replace placeholders with a real Draw.io system map and Grafana screenshot
Expand security hardening around exposed services
Add deeper service-specific breakdowns for monitoring and backend work
Surface more live operational data directly into the frontend