How I built this site

Posted · 5 min read

I wanted one place for my portfolio, my homelab guides, and some browser-based tools to practice IT skills. Maybe this will turn into a Community or just a self-contained place for my own documentation. Most websites that I use are filled with ads and I hate having to switch between different tabs constantly. Whether that’s a one-off Base64 decode, Learning for my Certifications or documentation that I need to reference back to for a project - which I use Obsidian Notes for currently. I also wanted it to cost nothing to run, load fast, and look like nothing else on a recruiter’s screen. This post covers how it’s put together.

The stack

  • Astro builds the site into plain HTML, CSS, and a little JavaScript. There’s no server running code for each visitor, which keeps it fast, cheap, and hard to break.
  • Plain CSS with all colors and fonts in one file of design tokens. The palette is the classic 16-color VGA terminal set on black.
  • Azure Static Web Apps (Free plan) hosts it, with free HTTPS and a global CDN.
  • Cloudflare handles the domain’s DNS and forwards email to my inbox.

Project cost so far: $10.82

The workflow

Everything starts on an Ubuntu VM running on my Unraid server:

  1. I write code on the VM and preview it from any device on my home network, using the local IP 192.168.8.130.
  2. Changes go to a branch on GitHub and I open a pull request.
  3. GitHub Actions runs the checks: linting, formatting, unit tests, a type check, and a full build. A red X means something’s wrong before it ever goes live.
  4. Azure builds a preview copy of the site for every pull request, with its own URL, so I can click around the real thing on my phone first.
  5. Merging to main deploys to localhostmonkey.com in about a minute.

Security

Even a static site gets some hardening:

  • Security headers on every response, including a strict Content-Security-Policy that only allows scripts from this domain. One gotcha: Astro inlines small scripts into the HTML by default, which that policy blocks, so the build is configured to always put scripts in their own files.
  • No secrets in the repo. The deploy key lives in GitHub’s encrypted secrets.
  • A budget alert in Azure, so any surprise charge emails me long before it matters. I’d hate to wake up one morning and see an unexpected charge for my static website. I absolutely needed this part

The look

The design mixes an early-2000s forum with 8-bit games: panels with title bars, a game-menu “Press Start” on the home page, a joke visitor counter, and 88x31 badges in the footer. The About page is a set of terminal windows that type out whoami --experience.

Underneath, it’s modern: it works on phones, works without JavaScript, supports keyboard navigation, meets color-contrast guidelines, and turns off animation for anyone who asks their device to reduce motion.

I always enjoyed seeing the retro type of forum boards. I would come across posts from 15-20 years ago in my personal research and the theming always caught my eye. While I do like the look of modern websites like Microsoft.com, Apple.com and my college website, it’s missing personality and charm.

Building it with an AI pair programmer

I built this with Claude Code as a pair programmer and tutor. It handled a lot of the scaffolding and explained each piece afterward, while I made the decisions, wrote content, and set up the accounts, DNS, and Azure resources myself. Every phase ends with a written summary of what was built and why, which has been a great way to learn the parts I hadn’t touched before.

There are a lot of programming languages that I don’t currently know and while Claude Code wrote some of these sections, it was all with direction and my stylistic choices. I never liked when others in our field use Claude Code for the purpose of “make me a website” and then sit back for 3-4 hours until it’s done, briefly review it then stick it on their resume. There’s no fun in that, no charm, no pride in actually creating something. I aimed for a perfect balance of handling everything that I possibly could on my own and when I knew something would take me days or weeks to learn, I had Claude Code direct me and explain every step it made along the way.

What’s next

Guides from my homelab, browser tools like a subnet calculator, and eventually a terminal trainer for Linux, PowerShell, and Cisco IOS. Subscribe to the RSS feed to follow along. Community (Discord maybe?) YouTube channel to have a video to go along with these written out guides and a Learning track for Certifications.

Side Note

Please do not expect long - perfectly formatted blog posts like this one moving forward. I wanted to properly document this project since I believe it’ll be an interesting read to whoever comes across this site but the blog posts will be less structured moving forward. The Guides section will be properly formatted (the best that I can) but less-than-perfect formatting, brain dumps, and jokes will be the status quo and if I feel it’s a worthy topic: I will move it to the guides section with a link.