HCC STARTPAGE

Cyberpunk command-center browser homepage for a homelab.

5 tabs · 2×2 live-widget grid · Spotify + weather + AI + radar · neural-network particle field · hex data rain · HUD chrome · shadow-DOM components · zero build step · xbc4000.github.io

Gallery

_{01 · HOMELAB — the full view. 2×2 widget grid (NOW PLAYING / CONDITIONS / JARVIS / SERINA), link grid in the middle, feeds at the bottom, HUD bar pinned top-centre.}
_{Left column — NOW PLAYING (Spotify bridge) over JARVIS (radar + browser telemetry).}	_{Right column — CONDITIONS (Open-Meteo + geo) over SERINA (Ollama + GPU + watchdog).}
_{FEEDS — live Reddit (9 subreddits) + Hacker News Algolia, auto-refreshing across a multi-column grid.}
_{DEV — GitHub + AI tools + docs (MDN / Docker / Caddy) + distro resources.}	_{DAILY — mail, calendar, notes, todos, weather, finance.}
_{NEWS — tech / Linux aggregators, world news, subreddit deep links.}	_{CHILL — music, video, gaming, social, anime, shopping.}
_{Search — press s, pick an engine (p Perplexity / d DDG / g Google), type, go.}	_{HOMELAB tab — deep links to every service (router, Pi-hole, iDRAC, Grafana, Portainer, exporters).}

What it is

A personal browser new-tab / homepage built for navigating a homelab. Full HCC ("Homelab Command Center") cyberpunk aesthetic — cyan / magenta / amber accents, scanline overlay, neural-network particle field, hex data rain, HUD corner brackets, spinning reactor rings, and a top-centre status bar showing real browser + LAN telemetry.

Zero build step. No framework. Pure HTML/CSS/JS with shadow-DOM web components. Runs cold from python3 -m http.server or GitHub Pages.

The 5 Tabs

Tab	What's in it
HOMELAB	Infrastructure, Pi-hole admin, servers, iDRAC deep links, Grafana boards, monitoring exporters, network docs, repos
DEV	GitHub, AI tools (`chat.home`, Claude, etc.), docs (MDN, Docker, Caddy), Linux distro resources, dev tools, tech feeds
DAILY	Mail, calendar, notes, todos, weather, finance
NEWS	Tech, Linux aggregators, world news, subreddit deep links
CHILL	Music, video, gaming, social, anime, shopping

Each tab has its own GIF background banner (18 total, swappable via userconfig.js).

The Widgets

Pinned corners in a 2×2 layout (top-left / top-right / bottom-left / bottom-right), each an independent shadow-DOM component with its own polling cadence.

Widget	Source	What it shows
NOW PLAYING	`/bridge/status` (Caddy proxy → hcc-spotify-bridge)	Live Spotify track, album art, progress, device — same-origin fetch, no Spotify Web API
CONDITIONS	Open-Meteo + BigDataCloud	Temperature, condition, wind, UV, sunrise/sunset; keyless APIs, geolocation once on load
JARVIS	Browser APIs + LAN probes	Radar canvas with probe blips, viewport/connection/battery/memory/cores/latency grid
SERINA	`/ollama/status` + `/ollama/serina` (Caddy proxy → homelab-network/`ollama-exporter.py`)	Ollama health, GPU temp/VRAM/power/fan, models loaded, watchdog dots, last log line — magenta-themed to mark her as the AI in the stack

Plus three ambient pieces:

	What
HUD Status Bar	Pulse dot, UTC clock, LAN/NET pills, viewport, uptime — pinned top-centre
FEEDS	Bottom panel, live Reddit (9 subreddits) + HN Algolia, auto-refresh
Particle / Hex Rain	Background neural-network canvas (40–180 nodes with connections) + falling hex characters along panel edges

Effects

Full-viewport scanline + vignette overlay
Animated scan sweep (6s cycle)
Spinning reactor ring accents at panel corners
HUD corner brackets at viewport corners
Cut-corner clip-paths on panels, links, widgets
Hex rain along panel edges (left/right borders)
Neural particle field with inter-node connection lines

All effects are pointer-events: none overlays at low z-index — they never interfere with input.

Architecture

_{Regenerate with python3 scripts/generate-architecture.py.}

ASCII breakdown

Browser  (https://xbc4000.github.io  OR  https://startpage.home/)
|
+-- index.html  (loads components, runs effects, hydrates widgets)
|
+-- Shadow-DOM components  (no framework, no build)
|     tabs/           category + link grid, banner swapping
|     statusbar/      HUD pills (clock, viewport, uptime, net)
|     nowplaying/     fetches /bridge/status every 5s
|     conditions/     Open-Meteo + BigDataCloud (keyless)
|     jarvis/         radar canvas + browser telemetry grid
|     ollama/         Serina widget — /ollama/status + /ollama/serina
|     feeds/          Reddit JSON + HN Algolia
|     search/         overlay, 'p'/'d'/'g' engine switch
|     clock/          multi-timezone clock
|
+-- Effects engine  (src/common/effects.js)
|     particle field · hex rain · scan sweep · HUD chrome
|
+-- Local Caddy deployment (startpage.home vhost on RPi)
      /bridge/*  --> localhost:3081  (hcc-spotify-bridge)
      /ollama/*  --> 10.10.10.2:9401 (ollama-exporter / Serina)
      /          --> /var/www/startpage  (this repo, git-pulled)

GitHub Pages deployment (xbc4000.github.io)
      Widgets requiring a LAN proxy (NOW PLAYING, SERINA) show
      fallback states — they're LAN-only by design.

Configure

Everything user-facing lives in userconfig.js:

tabs: [
  { name: "HOMELAB", background_url: "src/img/banners/banner_03.gif",
    categories: [
      { name: "infrastructure", links: [
        { name: "router",    url: "http://router.home",   icon: "router",    icon_color: hcc.cyan },
        { name: "pi-hole",   url: "http://pi.hole/admin", icon: "shield-x",  icon_color: hcc.red },
        // ...
      ]},
    ]},
  // ...
]

Palette — HCC cyan / magenta / amber tokens at the top of the file
Tabs / categories / links — add, remove, reorder freely
Search engines — p Perplexity, d DuckDuckGo, g Google (press s to open)
Weather location — city name for Open-Meteo
Clock — format string, additional timezones via IANA names
Icons — Tabler Icons, class pattern ti ti-<name>

Run

GitHub Pages

Already deployed — hit xbc4000.github.io.

Locally

git clone git@github.com:xbc4000/xbc4000.github.io.git
cd xbc4000.github.io
python3 -m http.server 8000
# http://localhost:8000

LAN (startpage.home) — unlocks NOW PLAYING + SERINA widgets

# On your server (e.g., RPi)
git clone git@github.com:xbc4000/xbc4000.github.io.git /var/www/startpage

Caddy vhost:

startpage.home {
    handle_path /bridge/* {
        reverse_proxy localhost:3081           # hcc-spotify-bridge
    }
    handle_path /ollama/* {
        reverse_proxy 10.10.10.2:9401 {        # ollama-exporter (Serina)
            flush_interval -1
        }
    }
    handle {
        root * /var/www/startpage
        file_server
        header Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
    }
}

Refresh content: git pull in /var/www/startpage — no restart needed.

Project layout

index.html                   Entry — loads components in order
userconfig.js                Your config (tabs, palette, links)
userconfig.example.js        Schema reference
src/
  common/
    effects.js               Particles / rain / HUD / scan sweep
    component.js             Shadow-DOM base class
    config.js                Config proxy + localStorage persistence
    palette.js               Catppuccin palette (overridden by HCC)
    module.js                Component registration
  components/
    tabs/                    Tab switcher + link grid + banner
    statusbar/               HUD status bar
    nowplaying/              Spotify (bridge proxy)
    conditions/              Weather (Open-Meteo + BigDataCloud)
    jarvis/                  Radar + browser telemetry
    ollama/                  Serina widget (homelab AI)
    feeds/                   Reddit + HN feeds
    weather/                 Legacy weather (kept)
    clock/                   Multi-timezone clock
    search/                  Search overlay
  css/                       Stylesheets + tabler icons
  fonts/                     Bundled (no Google CDN)
  img/
    banners/                 18 tab background GIFs
    screenshot.png           Legacy screenshot
docs/
  screenshots/               Gallery (see that dir's README)
  CLOCK.md                   Clock config notes

Credits

Started as a fork of pivoshenko/catppuccin-startpage (based on b-coimbra/dawn). The original component pattern and file layout come from there.

Colour roots in Catppuccin — the palette still loads as a base in src/common/palette.js, though the HCC theme overrides everything with cyan / magenta / amber.

What's new in this fork

Full cyberpunk HCC visual overhaul
2×2 live-widget grid, including Serina (homelab AI status)
5 homelab-focused tabs with deep links to every service
Neural particle field + hex data rain effects engine
Local font bundling (zero external CDN hits)
Shadow-DOM components with synchronous render (no flash)
Same-origin Caddy proxy for widget API calls (LAN deployment)

_{HCC (Homelab Command Center) is a product of TechX Maestro.}

_{HCC repos · hcc-dashboard · hcc-spotify-bridge · homelab-network}

License & Legal

This repository is dual-licensed:

Upstream code (original catppuccin-startpage by Volodymyr Pivoshenko): MIT License — see LICENSE-UPSTREAM.
HCC Startpage modifications (widgets, branding, theming, assets, and additions by TechX Maestro): Proprietary — see LICENSE.

TechX modifications are published for reference, audit, and evaluation only. You may not copy, modify, redistribute, or re-use any HCC-specific portion in any product, service, or deployment — commercial or non-commercial — without prior written permission from TechX Maestro. The upstream MIT-licensed code remains under its original terms, with attribution preserved.

TechX Maestro, HCC, Home Control Center, Serina, Nigel, and TechX OS are trademarks of TechX Maestro.

Full license (proprietary, TechX additions): LICENSE
Upstream MIT license (catppuccin-startpage): LICENSE-UPSTREAM
Trademark / legal notice: NOTICE.md
Security issues: SECURITY.md
Contribution policy: CONTRIBUTING.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

HCC STARTPAGE

Gallery

What it is

The 5 Tabs

The Widgets

Effects

Architecture

ASCII breakdown

Configure

Run

GitHub Pages

Locally

LAN (startpage.home) — unlocks NOW PLAYING + SERINA widgets

Project layout

Credits

What's new in this fork

License & Legal

About

Licenses found

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 286 Commits
docs		docs
scripts		scripts
src		src
templates		templates
.editorconfig		.editorconfig
.gitignore		.gitignore
.nojekyll		.nojekyll
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
LICENSE-UPSTREAM		LICENSE-UPSTREAM
NOTICE.md		NOTICE.md
README.md		README.md
SECURITY.md		SECURITY.md
index.html		index.html
justfile		justfile
userconfig.example.js		userconfig.example.js
userconfig.js		userconfig.js

Folders and files

Latest commit

History

Repository files navigation

HCC STARTPAGE

Gallery

What it is

The 5 Tabs

The Widgets

Effects

Architecture

ASCII breakdown

Configure

Run

GitHub Pages

Locally

LAN (startpage.home) — unlocks NOW PLAYING + SERINA widgets

Project layout

Credits

What's new in this fork

License & Legal

About

Topics

Resources

License

Licenses found

Contributing

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages