Portfolio Website

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
Site Status Build Status

Note!

My site and contents are being actively created currently. Not all projects, information, or details have been added yet!

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.