Homepage & Navigation Revamp
Premium UX redesign of homepage hero, navigation, Getting Started page, and global typography
Homepage & Navigation Revamp
Date: 2026-02-28
Branch: revamp/homepage-nav
Status: Preview deployment
Overview
Major redesign targeting professional audiences (employers, clients). The site’s navigation was confusing (15+ links), the homepage lacked a clear identity statement, and visual quality didn’t match the engineering sophistication of the underlying infrastructure.
Goals:
- Clear elevator pitch in hero section
- Simplified navigation (15+ items → 6)
- Premium visual polish (Vercel/Linear/Stripe tier)
- Fact-checked infrastructure claims
- Guided onboarding via
/start
Navigation Changes
Before
| Item | Type |
|---|---|
| Blog | Direct link |
| Journal | Direct link |
| Projects | Direct link |
| Docs | Direct link |
| Infrastructure | Dropdown (6 items) |
| Playground | Direct link |
| Ask | Direct link |
| More | Dropdown (4 items) |
Total: 8 top-level, 15+ total links
After
| Item | Type | Contents |
|---|---|---|
| Explore | Dropdown | Blog, Journal, Projects, Docs |
| Infrastructure | Dropdown | Architecture, Build Swarm, Command Center, System Status |
| Labs | Direct link → /playground | |
| Ask | Direct link → /ask | |
| About | Direct link → /about | |
| Get Started | CTA button → /start | Outlined button with cyan border |
Total: 6 top-level items, clean hierarchy
Additional Nav Changes
- Tagline:
AI + Infrastructure + Labs→Homelab Engineering Platform - Logo hover: spin animation → subtle scale(1.05) with glow
- “Get Started” visually distinct as a call-to-action button
Homepage Redesign
Hero Section
Removed:
- 4 audience cards (moved to
/startpage) glitch-textCSS class- Terminal 3D tilt (
rotateY(-5deg)) and float animation - Overly dramatic visual effects
New Content:
[Status Badge — "All Systems Nominal"]
Production-grade homelab.
Open infrastructure.
A multi-site infrastructure platform running 66 build cores,
AI pipelines, and a custom Gentoo distribution — documented
from bare metal to deployment.
[Get Started] [Try the Playground]
66 Build Cores | 13 Systems | 252TB+ Storage | 2 SitesSections
| # | Before | After | Change |
|---|---|---|---|
| 1 | Hero with audience cards | Hero with elevator pitch | Rewritten |
| 2 | ”See It In Action" | "Live Infrastructure” | Renamed, italic removed |
| 3 | ”Latest Transmission" | "Latest Articles” | Renamed |
| 4 | ”Start Here” blueprints | (removed) | Redundant with /start |
| 5 | ”Explore & Learn” (5 cards) | “Deep Dives” (4 cards) | Merged Obsidian → AI |
| 6 | (none) | Closing CTA section | New glass card funnel |
Visual Polish
- All hover lifts:
translateY(-4px/-5px)→translateY(-2px) - Box shadows reduced from aggressive to subtle
- Section headings get
::aftergradient underline (48px, cyan→purple) - Hub cards: left-border accent → top-border accent
- Hero title: weight 800 → 700, added
letter-spacing: -0.025em
Getting Started Page (/start)
New guided entry point for first-time visitors.
Structure
- Hero: “Find Your Path” + elevator pitch
- Stats bar: 66 cores, 13 systems, 252TB+, 2 sites
- Four path cards (2x2 grid):
| Path | Accent Color | Links |
|---|---|---|
| Infrastructure Engineers | Cyan | Architecture, Command Center, System Status |
| AI & Automation | Blue | Ask Arcturus-Prime, Documentation, Blog |
| Linux & DevOps | Purple | Argo OS, Build Swarm, Journal |
| Learners & Explorers | Green | Interactive Playground, Docs, All Projects |
Footer Updates
Link Columns
| Before | After |
|---|---|
| Explore (Blog, Projects, Resources, Playground, Journal) | Explore (Blog, Journal, Projects, Docs, Labs) |
| Infrastructure (Architecture, Build Swarm, Command Center, HomeLab, Workflows) | Infrastructure (Architecture, Build Swarm, Command Center, System Status) |
| Resources (Tutorials, Docker Compose, Kubernetes, Config Files, Cheatsheets) | More (Get Started, About, Ask Arcturus-Prime, RSS Feed) |
Other Footer Changes
- Tagline rewritten to match professional tone
- Labs column: “Ask Argonaut” → “Ask Arcturus-Prime”
Global Typography & Spacing
Typography (BaseLayout.astro)
- All headings (h1-h6):
font-family: 'Space Grotesk', var(--font-sans) - h1, h2:
letter-spacing: -0.025em(biggest “premium” signal)
Spacing Variables (theme.css)
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-section: 5rem;
--font-heading: 'Space Grotesk', var(--font-sans);Fact-Check Verification
All infrastructure claims verified against RAG database and ai-context vault:
| Claim | Breakdown | Status |
|---|---|---|
| 66 Build Cores | Izar(16) + Tau(8) + Capella(8) + Tarn(14) + Meridian(20) | Verified |
| 13 Systems | 2 hypervisors, 4 NAS, 2 workstations, 1 VPS, 2 service hosts, 2 network | Verified |
| 252TB+ Storage | Meridian-Host ~100TB + Cassiel-Silo 120TB + Mobius-Silo 22TB + Izar ~10TB | Verified |
| 2 Sites | Milky Way (local) + Andromeda (remote) | Verified |
| 5 Build Drones | Izar, Tau, Capella, Tarn, Meridian | Verified |
Bug fixed: Drone tooltip previously listed only 4 drones, missing sweeper-Capella (8c).
Files Modified
| File | Purpose |
|---|---|
src/components/Header.astro | Navigation restructure, tagline, logo hover, CTA |
src/pages/index.astro | Hero rewrite, section renames, blueprints removal, CTA addition |
src/pages/start.astro | New Getting Started page |
src/components/Footer.astro | Link columns, tagline |
src/layouts/BaseLayout.astro | Heading typography |
src/styles/theme.css | Spacing variables, heading font variable |
v2 Update (2026-03-01) — Engineering Soul
User feedback on v1: “too simple and not geeky enough for engineers.” v2 restores engineering personality while keeping all structural wins from v1.
Changes
| # | Change | Detail |
|---|---|---|
| 1 | Glitch text on hero subtitle | glitch-text class on “Open infrastructure.” — hover-only cyberpunk effect |
| 2 | Hero description copy | ”Built by an daniel who can’t stop tinkering.” |
| 3 | CTA rename | ”Get Started” → “Explore the Lab” (hero + closing CTA) |
| 4 | HUD scan + data stream on stats | hud-scan on stats container, data-stream on each stat item |
| 5 | Terminal 3D tilt + float | rotateY(-2deg) rotateX(1deg), 8s float animation (-8px), reduced-motion override |
| 6 | Section names restored | ”See It In Action”, “Latest Transmissions”, “Explore & Learn” |
| 7 | 5th hub card | ”Digital Gardens & Obsidian” — Obsidian, Zettelkasten, PKM. Green accent, centered bottom row |
| 8 | Deeper hover effects | Showcase -3px, hub -4px, stronger shadows, accent bars visible at rest (0.3 opacity) |
| 9 | CTA copy polish | ”dig through the documentation, or find your own path through the lab” |
Commit
0c16c4d—feat(homepage): v2 revamp — restore engineering personality to premium structure
v3 Update (2026-03-01) — Conversion Funnel
The closing CTA section was replaced with a conversion funnel directing visitors to the new /services and /community pages.
Closing CTA Changes
| Before (v2) | After (v3) |
|---|---|
| “Ready to explore?" | "What brings you here?" |
| "Explore the Lab” → /homelab | ”Need infrastructure?” → /services |
| ”Try the Playground” → /playground | ”Want to learn?” → /community |
| (none) | “Looking to hire?” → /services#hire |
| (none) | “$432/yr — See How” → /cost |
Three funnel cards with colored icon accents (cyan/green/purple) in a 3-column grid, stacking to 1-column on mobile.
Cross-Site CTA Updates
| Page | Change |
|---|---|
/cost | ”Let’s Talk” → “View Services” (/services), secondary links to /community |
/about | New “Work With Me” section with 3 glass cards → /services, /community, /cost |
/homelab | New services nudge card: “Want this for your company?” → /services |
| Header | Services + Community added to “More” dropdown |
| Footer | Services + Community in Explore column + meta-links bar |
Funnel Architecture
Homepage hooks → /services converts → /cost proves → /community retainsThree audiences served equally:
- Businesses/startups → /services#build (cyan)
- Employers → /services#hire (purple)
- Community/homelabbers → /community (green)
Commit
1883dbc—feat(funnel): add /services and /community pages with cross-site CTAs
v4 Update (2026-03-01) — Mission Control Dashboard
The homepage was replaced with an interactive “Mission Control” dashboard showcasing the full infrastructure topology with orbiting services, typed traffic flows, and clickable info panels.
Full Solar Systems (45 Orbiters)
Eight host nodes from the Galactic Identity System, each surrounded by 5-8 orbiting service dots representing real infrastructure:
| Node | Orbiters | Key Services |
|---|---|---|
| Altair-Link | 8 | Gitea, Traefik, Grafana, OpenWebUI, Prometheus, Vaultwarden, Command Center, File Browser |
| Izar-Host | 5 | drone-Izar, orch-Izar, ZFS Pool, Proxmox VE, Tailscale |
| Tarn-Host | 5 | drone-Tarn, orch-Tarn, Polaris-Media, Proxmox VE, Tailscale |
| Meridian-Host | 7 | drone-Meridian, Plex, Jellyfin, Sonarr, Radarr, Prowlarr, Tailscale |
| Capella-Outpost | 5 | sweeper-Capella, Claude Code, KDE Plasma 6, Tailscale, Hyprland |
| Tau-Host | 5 | drone-Tau, Portage, distccd, Tailscale, OpenRC |
| Cassiel-Silo | 5 | Hyper Backup, NFS, Rsync, RAID Array, DSM |
| Mobius-Silo | 5 | Backup Target, NFS, RAID Array, Rsync, DSM |
Dual orbit rings for visual depth:
- Inner ring (
node.size + 12): Primary services, larger dots, faster orbit (12-16s) - Outer ring (
node.size + 24): Support services, smaller dots, dimmer (0.65 opacity), slower orbit (18-22s)
Clickable Info Panels
Click any orbiter dot to see a pinned info card showing:
- Service name (bold)
- Type badge (K3s / LXC / Docker / VM / DSM / Service)
- One-line description (e.g., “Git server — git.Arcturus-Prime.com”)
- Close button (×) or click-outside to dismiss
Typed Traffic Flows (11 connections)
Replaced generic data packets with labeled, meaningful traffic patterns:
| Type | Color | Packet Size | Speed | Line Style | Examples |
|---|---|---|---|---|---|
build | Purple #a78bfa | 3px | 4s | Dashed | Build Jobs, Swarm Sync, Compile Dist |
storage | Orange #f97316 | 2.5px | 6s | Dotted | Storage I/O, Backup Data/Sync, Archive |
admin | Cyan #06b6d4 | 2px | 3s | Solid thin | Dev Traffic |
api | Blue #38bdf8 | 2px | 3s | Solid thin | API Traffic |
Each connection line has invisible hover targets showing the label (e.g., “Build Jobs”, “Backup Sync”).
Build Fix
TypeScript generics (Record<string, number>) in Astro template JSX get parsed as HTML by esbuild. Solution: Moved type definitions to frontmatter, removed inline type annotations. This affected linkSpeeds and linkSizes lookup objects.
Commit: 888baaf — build fix
Files
- Page file:
src/pages/index.astro(~1320 lines, all HTML/CSS/JS in one file) - Layout:
CosmicLayout.astro(cosmic background + ViewTransitions) - Branch:
revamp/homepage-nav - Preview:
revamp-homepage-nav.Arcturus-Prime.pages.dev
Note: Accidental Merge & Revert
Commit 7223e26 accidentally merged revamp/homepage-nav into main, pushing v3 to production before it was ready. Fixed with git revert -m 1 7223e26 → commit 8f85ee5. Caveat: Future merge of the feature branch requires git revert 8f85ee5 first to undo the revert.
Deployment
- v1-v3: On branch
revamp/homepage-nav(preview atrevamp-homepage-nav.Arcturus-Prime.pages.dev) - Current production: v2 homepage on
main - Status: Feature complete, ready to merge (pending DEMO_MODE fix — see troubleshooting)
- Merge path:
git revert 8f85ee5 && git merge revamp/homepage-nav && git push
Critical Blocker
DEMO_MODE=true in CF Pages production env breaks /admin/. See Troubleshooting: Admin Area Returns Plain “Not Found” for diagnostic and fix.