Building the Command Center: Site Overhaul & Server Stats
It has been a busy Sunday and Monday in the lab. Today wasn’t just about tweaking colors; it was about turning the LetsGeek site from a standard template into a proper “Command Center” for my projects.
We tackled three main areas: a complete visual overhaul, fixing a broken server monitoring script, and building a “Single Source of Truth” for the project roadmap.
1. The Shift to Neon Purple
For a long time, the site relied on the default “Cyan/Blue” color scheme that comes with many tech templates. It was clean, but it didn’t feel like me.
I wanted something that screamed “Synthwave meets Server Room.” We moved the entire Tailwind configuration to focus on Fuchsia and Neon Pink.
The biggest challenge was the Global Link Logic. Browsers love to override link colors with that standard ugly blue. We fixed this by nuking the defaults in global.css:
/* No more browser blue! */
a {
color: #e879f9; /* Fuchsia-400 */
transition: all 0.2s ease;
}
a:hover {
color: #ec4899; /* Pink-500 */
text-shadow: 0 0 8px rgba(236, 72, 153, 0.5); /* The Neon Glow */
}
- The Proxmox “Ghost” Container
I have a status page that pulls live stats from my Proxmox cluster (Starfleet-01). However, I noticed the “Active VMs” count was always wrong. It said 3, but I knew I had 4 things running. The Bug
I was using qm list to count my machines. The script looked like this:
# OLD BROKEN WAY
VMS=$(qm list | grep -c "running")
The Realization
qm only lists Virtual Machines (VMs). It completely ignores LXC Containers (CTs). My Docker host is running inside an LXC container, so it was invisible to the script. The Fix
We updated the bash script to query both the QEMU manager (qm) and the Proxmox Container Toolkit (pct), then sum them up.
# NEW FIXED WAY
# 1. Count VMs
RUNNING_VMS=$(/usr/sbin/qm list 2>/dev/null | grep "running" | wc -l)
# 2. Count Containers (CTs)
RUNNING_CTS=$(/usr/sbin/pct list 2>/dev/null | grep "running" | wc -l)
# 3. Math!
TOTAL_NODES=$((RUNNING_VMS + RUNNING_CTS))
Now, the dashboard correctly reports 4 Active Nodes. 3. The “Single Source of Truth” Roadmap
I wanted to show the Hobby Match roadmap in two places:
A quick "Latest Updates" widget on the Home Page.
A detailed history on the dedicated Roadmap Page.
Updating two different files every time I pushed code sounded like a maintenance nightmare. The Solution
We created a shared data file src/data/roadmap.ts that exports a simple array of update objects.
export const roadmapData = [
{
phase: "Beta Phase",
date: "2026-01-12",
title: "Monetization & IAP",
version: "v1.1.0",
description: "Integrated RevenueCat...",
isLatest: true
},
// ... more items
];
The Home Page imports this file and slices the top 3 items:
const recentUpdates = roadmapData.slice(0, 3);
The Roadmap Page imports the whole file and maps through everything. Now, I edit one file, and the whole site updates instantly. What’s Next?
With the site infrastructure stable and the status page live, focus shifts back to Hobby Match. The next big milestone is the Group Finder logic to help D&D parties find their missing Cleric.
Stay tuned.