Portfolio Website
The current site being browsed, an Astro project utilizing a modified/extended version of the Astrofy template.
Astro CSS Docker Forgejo Forgejo Runners Git Github Actions HTML JSON JavaScript Markdown NPM Nginx PostgreSQL TailwindCSS
Building a High-Performance, Self-Hosted Digital Portfolio
A technical deep dive into the architecture, configuration, and self-hosted deployment of my personal website.
Role: Infrastructure & Deployment Architect
The Objective
When deciding how to build my digital portfolio, my primary goal was to create a platform that served as a live demonstration of my skills in infrastructure management, containerization, developmnet, and self-hosting.
Rather than reinvent the wheel on the frontend, I selected, implemented, and optimized the template, Astrofy, credited to Manuel Ernesto. This allowed me to leverage a beautiful, responsive UI out of the box, freeing up my efforts to focus on building out a solid stack and adding content.
Architecture & Tech Stack
By pairing a modern static site generator with a rigorously configured backend, the site achieves a balance of developer velocity and production-grade performance.
- Frontend: Astro & Tailwind CSS (via the Astrofy template).
- Web Server: NGINX, configured as a highly efficient static file server and secure reverse proxy.
- Infrastructure: Fully containerized using Docker and Docker Compose, running in my self-hosted environment.
- Version Control: Managed and versioned via my self-hosted Forgejo instance (Eniari Forge)
- CI/CD: Built out runners and actions to automatically build and update the live site from Git pushes, demonstrating understanding of CI/CD pipelines and Agile development.
Engineering Highlights
1. Multi-Stage Containerized Build
This site is a production-ready containerized service. I designed a custom Dockerfile that utilizes a multi-stage build:
- Stage 1 (Build): Uses a Node image to compile the Astro project into static assets.
- Stage 2 (Production): Copies those static assets into a lightweight Alpine Linux NGINX image. This ensures the final container is exceptionally small, secure, and completely separated from the build-time dependencies.
2. Zero-JS Performance by Default
By selecting Astro, the site achieves perfect 100s across Google Lighthouse metrics (Performance, Accessibility, Best Practices, SEO). The framework compiles the React/Tailwind components to pure HTML at build time, meaning the NGINX server only has to deliver highly compressed static files with zero render-blocking JavaScript footprint.
3. Resilient Self-Hosted Infrastructure
The deployment integrates seamlessly into my wider homelab ecosystem:
- Deployed via Docker Compose alongside other essential services (PostgreSQL, LetsEncrypt).
- TLS/SSL termination is handled cleanly at the edge proxy layer, ensuring all traffic is strictly routed over secure HTTPS.
- The codebase is securely backed up and managed entirely in-house via Forgejo, reducing reliance on external cloud providers.