From 1fa31d0617cd71e9d5f4ea8a758998f1de1fc975 Mon Sep 17 00:00:00 2001 From: Daniel LaForce Date: Wed, 30 Apr 2025 02:19:54 -0600 Subject: [PATCH] feat: Website enhancements and new placeholder pages - Remove knowledge graph from homepage (keep only on blog page) - Add placeholder page for Infrastructure as Code Templates under projects - Fix build errors in homelab.astro by implementing component-based architecture - Improve page navigation structure and consistency - Update styling for better mobile responsiveness --- src/components/homelab/HeroSection.astro | 230 +++++ src/components/homelab/ProjectsSection.astro | 119 +++ src/components/homelab/ServiceCategory.astro | 80 ++ src/components/homelab/ServicesSection.astro | 201 ++++ src/data/homelabData.ts | 40 + src/layouts/BaseLayout.astro | 6 +- src/pages/homelab.astro | 963 +----------------- src/pages/index.astro | 68 +- .../projects/infrastructure-templates.astro | 470 +++++++++ 9 files changed, 1170 insertions(+), 1007 deletions(-) create mode 100644 src/components/homelab/HeroSection.astro create mode 100644 src/components/homelab/ProjectsSection.astro create mode 100644 src/components/homelab/ServiceCategory.astro create mode 100644 src/components/homelab/ServicesSection.astro create mode 100644 src/data/homelabData.ts create mode 100644 src/pages/projects/infrastructure-templates.astro diff --git a/src/components/homelab/HeroSection.astro b/src/components/homelab/HeroSection.astro new file mode 100644 index 0000000..00eec9b --- /dev/null +++ b/src/components/homelab/HeroSection.astro @@ -0,0 +1,230 @@ +--- +// src/components/homelab/HeroSection.astro - Ultra minimal version +const { servicesCount } = Astro.props; +--- + +
+
+
+
+

+ Enterprise-Grade Home Lab Environment +

+

+ A production-ready infrastructure platform for DevOps experimentation, distributed systems, and automating everything with code. +

+ + +
+
+
Services:
+
{servicesCount}+
+
+
+
CPU Cores:
+
32+
+
+
+
Memory:
+
64GB
+
+
+
Storage:
+
12TB
+
+
+ +
+ + Try Ansible Sandbox + Offline + + + Explore Architecture + +
+
+ + +
+
+
System Status
+
+
+
+ Nodes: + 2 (Ready) +
+
+ Running Pods: + 32 +
+
+ Uptime: + 154 days +
+
+ Load: + 0.22, 0.18, 0.15 +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/src/components/homelab/ProjectsSection.astro b/src/components/homelab/ProjectsSection.astro new file mode 100644 index 0000000..9988d96 --- /dev/null +++ b/src/components/homelab/ProjectsSection.astro @@ -0,0 +1,119 @@ +--- +// src/components/homelab/ProjectsSection.astro +// Making sure we properly handle the projectsData prop +const { projectsData } = Astro.props; + +// If projectsData is undefined or not an array, provide a fallback +const projects = Array.isArray(projectsData) ? projectsData : []; + +// Debug logging +console.log("ProjectsSection received projectsData:", !!projectsData); +console.log("ProjectsSection projects count:", projects.length); +--- + +
+
+
+

Related Projects

+

+ Explore associated projects and repositories related to the ArgoBox lab. +

+
+ +
+ {projects.length > 0 ? ( + projects.map(project => ( + +
+
+

{project.title}

+
+

{project.description}

+
+ {project.tech && project.tech.map(tech => ( + {tech} + ))} +
+ + )) + ) : ( +
+

No projects available at this time.

+
+ )} +
+
+
+ + \ No newline at end of file diff --git a/src/components/homelab/ServiceCategory.astro b/src/components/homelab/ServiceCategory.astro new file mode 100644 index 0000000..b88aaac --- /dev/null +++ b/src/components/homelab/ServiceCategory.astro @@ -0,0 +1,80 @@ +// src/components/homelab/ServiceCategory.astro + +--- +const { category } = Astro.props; + +function getCategoryIcon(categoryKey) { + if (categoryKey === 'development') return 'fa-code'; + if (categoryKey === 'media') return 'fa-photo-video'; + if (categoryKey === 'utilities') return 'fa-tools'; + return 'fa-cogs'; // Default for infrastructure +} + +const categoryIcon = getCategoryIcon(category.key); +const categoryTitle = category.key.charAt(0).toUpperCase() + category.key.slice(1); +--- + +
+

+ + {categoryTitle} Tools +

+
+ {category.services.map(service => ( + +
+
+
{service.name}
+

{service.description}

+
+ + + {service.status.charAt(0).toUpperCase() + service.status.slice(1)} + + + ))} +
+
+ + \ No newline at end of file diff --git a/src/components/homelab/ServicesSection.astro b/src/components/homelab/ServicesSection.astro new file mode 100644 index 0000000..58f01da --- /dev/null +++ b/src/components/homelab/ServicesSection.astro @@ -0,0 +1,201 @@ +--- +// src/components/homelab/ServicesSection.astro +// Making sure servicesData is properly handled + +const { servicesData } = Astro.props; + +// Helper functions +function getCategoryIcon(category) { + if (category === 'development') return 'fa-code'; + if (category === 'media') return 'fa-photo-video'; + if (category === 'utilities') return 'fa-tools'; + return 'fa-cogs'; // Default for infrastructure +} + +function formatServiceName(name) { + return name.toLowerCase().replace(/\s+/g, '-'); +} + +// Create a safe version of the data in case it's undefined +const safeServicesData = servicesData || {}; + +// Prepare data for rendering to minimize template expressions +const categoryEntries = Object.entries(safeServicesData).map(([key, services]) => { + return { + key, + title: key.charAt(0).toUpperCase() + key.slice(1), + services: Array.isArray(services) ? services : [] + }; +}); + +// Debug logging +console.log("ServicesSection received servicesData:", !!servicesData); +console.log("ServicesSection categories count:", categoryEntries.length); +--- + +
+
+
+

Available Services

+

+ Explore the various services and applications hosted in the ArgoBox environment. +

+
+ +
+ +

Some services require authentication and are restricted. Available public services are highlighted and clickable.

+
+ +
+ {categoryEntries.length > 0 ? ( + categoryEntries.map(category => ( +
+

+ + {category.title} Tools +

+
+ {category.services.map(service => ( + +
+
+
{service.name}
+

{service.description}

+
+ + + {service.status.charAt(0).toUpperCase() + service.status.slice(1)} + + + ))} +
+
+ )) + ) : ( +
+

No services available at this time.

+
+ )} +
+
+
+ + \ No newline at end of file diff --git a/src/data/homelabData.ts b/src/data/homelabData.ts new file mode 100644 index 0000000..f7f963b --- /dev/null +++ b/src/data/homelabData.ts @@ -0,0 +1,40 @@ +export const servicesData = { + development: [ + { name: "Gitea", description: "Self-hosted Git service", url: "https://git.argobox.com", status: "live", icon: "fas fa-code-branch", available: true }, + { name: "VS Code Server", description: "Remote development environment", url: "https://code.argobox.com", status: "live", icon: "fas fa-terminal", available: true }, + { name: "Drone CI", description: "Continuous Integration server", url: "https://drone.argobox.com", status: "live", icon: "fas fa-cogs", available: true }, + ], + media: [ + { name: "Plex", description: "Media streaming server", url: "https://plex.argobox.com", status: "live", icon: "fas fa-play-circle", available: true }, + { name: "Jellyfin", description: "Open source media system", url: "https://jellyfin.argobox.com", status: "live", icon: "fas fa-film", available: true }, + { name: "Sonarr", description: "TV show management", url: "#", status: "restricted", icon: "fas fa-tv", available: false }, + { name: "Radarr", description: "Movie management", url: "#", status: "restricted", icon: "fas fa-video", available: false }, + { name: "Prowlarr", description: "Indexer management", url: "#", status: "restricted", icon: "fas fa-search", available: false }, + ], + utilities: [ + { name: "File Browser", description: "Web file manager", url: "https://files.argobox.com", status: "live", icon: "fas fa-folder-open", available: true }, + { name: "Vaultwarden", description: "Password manager", url: "#", status: "restricted", icon: "fas fa-key", available: false }, + { name: "Homepage", description: "Service dashboard", url: "https://dash.argobox.com", status: "live", icon: "fas fa-tachometer-alt", available: true }, + { name: "Uptime Kuma", description: "Status monitoring", url: "https://status.argobox.com", status: "live", icon: "fas fa-heartbeat", available: true }, + ], + infrastructure: [ + { name: "Proxmox VE", description: "Virtualization platform", url: "#", status: "restricted", icon: "fas fa-server", available: false }, + { name: "Kubernetes (K3s)", description: "Container orchestration", url: "#", status: "restricted", icon: "fas fa-dharmachakra", available: false }, + { name: "Traefik", description: "Ingress controller", url: "#", status: "restricted", icon: "fas fa-route", available: false }, + { name: "OPNsense", description: "Firewall/Router", url: "#", status: "restricted", icon: "fas fa-shield-alt", available: false }, + ] +}; + +export const projectsData = [ + { title: "Ansible Playbooks", description: "Collection of playbooks for automating system configuration and application deployment.", icon: "fab fa-ansible", tech: ["Ansible", "YAML", "Jinja2"], url: "/resources/iac" }, + { title: "Kubernetes Manifests", description: "YAML definitions for deploying various applications and services on Kubernetes.", icon: "fas fa-dharmachakra", tech: ["Kubernetes", "YAML", "Helm"], url: "/resources/kubernetes" }, + { title: "Monitoring Dashboards", description: "Grafana dashboards for visualizing infrastructure and application metrics.", icon: "fas fa-chart-line", tech: ["Grafana", "PromQL", "JSON"], url: "/resources/config-files" }, + { title: "Cloudflare Tunnel Setup", description: "Securely exposing home lab services to the internet using Cloudflare Tunnels.", icon: "fas fa-cloud", tech: ["Cloudflare", "Networking", "Security"], url: "/posts/cloudflare-tunnel-setup" } +]; + +export const dashboardsData = [ + { title: "Infrastructure Overview", description: "Key metrics for Proxmox hosts, network devices, and storage.", previewClass: "infrastructure", url: "https://dash.argobox.com/goto/...", icon: "fas fa-server" }, + { title: "Kubernetes Cluster", description: "Detailed view of K3s cluster resources, node status, and pod health.", previewClass: "kubernetes", url: "https://dash.argobox.com/goto/...", icon: "fas fa-dharmachakra" }, + { title: "Network Traffic", description: "Real-time and historical network usage, firewall logs, and connection tracking.", previewClass: "network", url: "https://dash.argobox.com/goto/...", icon: "fas fa-network-wired" }, + { title: "Service Performance", description: "Application-specific metrics, request latency, and error rates.", previewClass: "services", url: "https://dash.argobox.com/goto/...", icon: "fas fa-cogs" } +]; \ No newline at end of file diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index a7e26fb..061cca3 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -79,9 +79,9 @@ const { -<link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> - <link rel="manifest" href="/site.webmanifest" /> + + + diff --git a/src/pages/homelab.astro b/src/pages/homelab.astro index 8e63406..7a6c807 100644 --- a/src/pages/homelab.astro +++ b/src/pages/homelab.astro @@ -1,967 +1,56 @@ -align-items: center; - justify-content: center; - text-align: center; - position: relative; - overflow: hidden; - transition: all 0.3s ease; - } - - .diagram-node:hover { - transform: translateY(-5px); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); - z-index: 10; - border-color: var(--primary, #3b82f6); - } - - .diagram-node::before { - content: ''; - position: absolute; - width: 150%; - height: 150%; - background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%); - opacity: 0; - transition: opacity 0.3s ease; - } - - .diagram-node:hover::before { - opacity: 1; - } - - .diagram-node.gateway { - grid-column: 1 / 2; - grid-row: 1 / 2; - border-color: var(--warning, #f59e0b); - } - - .diagram-node.firewall { - grid-column: 2 / 3; - grid-row: 1 / 2; - border-color: var(--error, #ef4444); - } - - .diagram-node.proxmox { - grid-column: 3 / 5; - grid-row: 1 / 2; - border-color: var(--primary, #3b82f6); - } - - .diagram-node.kubernetes { - grid-column: 2 / 4; - grid-row: 2 / 3; - border-color: var(--accent, #6366f1); - } - - .diagram-node.storage { - grid-column: 1 / 2; - grid-row: 2 / 3; - border-color: var(--success, #10b981); - } - - .diagram-node.monitoring { - grid-column: 4 / 5; - grid-row: 2 / 3; - border-color: var(--primary, #3b82f6); - } - - .diagram-node.services { - grid-column: 1 / 5; - grid-row: 3 / 4; - display: flex; - flex-direction: row; - justify-content: space-around; - flex-wrap: wrap; - background-color: rgba(15, 23, 42, 0.3); - } - - .service-icon { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - width: 80px; - height: 80px; - margin: 0.5rem; - transition: all 0.3s ease; - } - - .service-icon:hover { - transform: scale(1.1); - } - - .service-icon i { - font-size: 1.75rem; - margin-bottom: 0.5rem; - } - - .service-icon span { - font-size: 0.75rem; - color: var(--text-secondary); - } - - /* Connection lines for architecture diagram */ - .connection-line { - position: absolute; - background-color: var(--border, rgba(148, 163, 184, 0.1)); - transition: all 0.3s ease; - z-index: 5; - } - - .connection-line.horizontal { - height: 2px; - } - - .connection-line.vertical { - width: 2px; - } - - .connection-line.active { - background-color: var(--accent, #6366f1); - box-shadow: 0 0 10px var(--accent, #6366f1); - } - - /* Enhanced Service Items */ - .service-item { - position: relative; - overflow: hidden; - } - - .service-item::before { - content: ''; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 0; - background: linear-gradient(90deg, var(--accent, #6366f1) 0%, transparent 100%); - opacity: 0.1; - transition: width 0.3s ease; - } - - .service-item.available:hover::before { - width: 100%; - } - - /* Enhanced Card Hover Effects */ - .tech-card { - position: relative; - overflow: hidden; - } - - .tech-card::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 3px; - background: linear-gradient(90deg, var(--primary, #3b82f6), var(--accent, #6366f1)); - transform: scaleX(0); - transform-origin: right; - transition: transform 0.5s ease; - } - - .tech-card:hover::after { - transform: scaleX(1); - transform-origin: left; - } - - /* Enhanced Project Cards */ - .project-card { - position: relative; - overflow: hidden; - } - - .project-card::before { - content: ''; - position: absolute; - top: -50px; - right: -50px; - width: 100px; - height: 100px; - background: linear-gradient(45deg, var(--primary, #3b82f6), var(--accent, #6366f1)); - transform: rotate(45deg); - opacity: 0; - transition: all 0.5s ease; - } - - .project-card:hover::before { - opacity: 0.15; - } - - /* Enhanced Dashboard Cards */ - .dashboard-preview.infrastructure { - background-image: linear-gradient(45deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7)), url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIj48cmVjdCB4PSIxMCIgeT0iMTAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiMyNTYzZWIiIGZpbGwtb3BhY2l0eT0iMC4yIiByeD0iNSIvPjxyZWN0IHg9IjgwIiB5PSIxMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzI1NjNlYiIgZmlsbC1vcGFjaXR5PSIwLjMiIHJ4PSI1Ii8+PHJlY3QgeD0iMTUwIiB5PSIxMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzI1NjNlYiIgZmlsbC1vcGFjaXR5PSIwLjQiIHJ4PSI1Ii8+PC9zdmc+'); - } - - .dashboard-preview.kubernetes { - background-image: linear-gradient(45deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7)), url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIj48Y2lyY2xlIGN4PSIxMjAiIGN5PSI2MCIgcj0iNDAiIGZpbGw9IiM2MzY2ZjEiIGZpbGwtb3BhY2l0eT0iMC4yIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI0MCIgcj0iMjAiIGZpbGw9IiM2MzY2ZjEiIGZpbGwtb3BhY2l0eT0iMC4zIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI5MCIgcj0iMjAiIGZpbGw9IiM2MzY2ZjEiIGZpbGwtb3BhY2l0eT0iMC4zIi8+PGNpcmNsZSBjeD0iMTkwIiBjeT0iNDAiIHI9IjIwIiBmaWxsPSIjNjM2NmYxIiBmaWxsLW9wYWNpdHk9IjAuMyIvPjxjaXJjbGUgY3g9IjE5MCIgY3k9IjkwIiByPSIyMCIgZmlsbD0iIzYzNjZmMSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48bGluZSB4MT0iNTAiIHkxPSI0MCIgeDI9IjEyMCIgeTI9IjYwIiBzdHJva2U9IiM2MzY2ZjEiIHN0cm9rZS1vcGFjaXR5PSIwLjQiIHN0cm9rZS13aWR0aD0iMiIvPjxsaW5lIHgxPSI1MCIgeTE9IjkwIiB4Mj0iMTIwIiB5Mj0iNjAiIHN0cm9rZT0iIzYzNjZmMSIgc3Ryb2tlLW9wYWNpdHk9IjAuNCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGxpbmUgeDE9IjE5MCIgeTE9IjQwIiB4Mj0iMTIwIiB5Mj0iNjAiIHN0cm9rZT0iIzYzNjZmMSIgc3Ryb2tlLW9wYWNpdHk9IjAuNCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGxpbmUgeDE9IjE5MCIgeTE9IjkwIiB4Mj0iMTIwIiB5Mj0iNjAiIHN0cm9rZT0iIzYzNjZmMSIgc3Ryb2tlLW9wYWNpdHk9IjAuNCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+'); - } - - .dashboard-preview.network { - background-image: linear-gradient(45deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7)), url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIj48cGF0aCBkPSJNMTAgMTAgQzIzMCAxMCAyMzAgNTAgMTAgNTAgQzIzMCA1MCAyMzAgOTAgMTAgOTAgQzIzMCA5MCAyMzAgMTMwIDEwIDEzMCIgc3Ryb2tlPSIjMTBiOTgxIiBzdHJva2Utb3BhY2l0eT0iMC40IiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiLz48L3N2Zz4='); - } - - .dashboard-preview.services { - background-image: linear-gradient(45deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7)), url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIj48cmVjdCB4PSIxMCIgeT0iMTAiIHdpZHRoPSI0MCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2VmNDQ0NCIgZmlsbC1vcGFjaXR5PSIwLjIiIHJ4PSI1Ii8+PHJlY3QgeD0iMTAiIHk9IjQwIiB3aWR0aD0iNzAiIGhlaWdodD0iMjAiIGZpbGw9IiNlZjQ0NDQiIGZpbGwtb3BhY2l0eT0iMC4zIiByeD0iNSIvPjxyZWN0IHg9IjEwIiB5PSI3MCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjIwIiBmaWxsPSIjZWY0NDQ0IiBmaWxsLW9wYWNpdHk9IjAuNCIgcng9IjUiLz48cmVjdCB4PSIxMDAiIHk9IjEwIiB3aWR0aD0iODAiIGhlaWdodD0iMjAiIGZpbGw9IiM2MzY2ZjEiIGZpbGwtb3BhY2l0eT0iMC4yIiByeD0iNSIvPjxyZWN0IHg9IjEwMCIgeT0iNDAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMCIgZmlsbD0iIzYzNjZmMSIgZmlsbC1vcGFjaXR5PSIwLjMiIHJ4PSI1Ii8+PHJlY3QgeD0iMTAwIiB5PSI3MCIgd2lkdGg9IjEyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iIzYzNjZmMSIgZmlsbC1vcGFjaXR5PSIwLjQiIHJ4PSI1Ii8+PC9zdmc+'); - } - - /* Enhanced Dashboard Overlay */ - .dashboard-overlay .overlay-icon { - transition: transform 0.3s ease; - } - - .dashboard-card:hover .overlay-icon { - transform: scale(1.2); - } - - /* Keep your existing responsive styles */ - @media (max-width: 1024px) { - .architecture-diagram { - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(6, auto); - gap: 1rem; - } - - .diagram-node.gateway { grid-column: 1 / 2; grid-row: 1 / 2; } - .diagram-node.firewall { grid-column: 2 / 3; grid-row: 1 / 2; } - .diagram-node.proxmox { grid-column: 1 / 3; grid-row: 2 / 3; } - .diagram-node.kubernetes { grid-column: 1 / 3; grid-row: 3 / 4; } - .diagram-node.storage { grid-column: 1 / 2; grid-row: 4 / 5; } - .diagram-node.monitoring { grid-column: 2 / 3; grid-row: 4 / 5; } - .diagram-node.services { grid-column: 1 / 3; grid-row: 5 / 6; } - } - - - --- -// src/pages/homelab.astro - Enhanced version +// src/pages/homelab.astro - Fixed main file with proper component imports import BaseLayout from '../layouts/BaseLayout.astro'; import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; +import HeroSection from '../components/homelab/HeroSection.astro'; +import ServicesSection from '../components/homelab/ServicesSection.astro'; +import ProjectsSection from '../components/homelab/ProjectsSection.astro'; +import { servicesData, projectsData, dashboardsData } from '../data/homelabData'; const title = "Home Lab | ArgoBox - ArgoBox Tech Hub"; const description = "ArgoBox - A production-grade Kubernetes homelab for DevOps experimentation, infrastructure automation, and containerized application deployment."; -// Using your existing data structure -const servicesData = { - development: [ - { name: "Gitea", description: "Self-hosted Git service", url: "https://git.argobox.com", status: "live", icon: "fas fa-code-branch", available: true }, - { name: "VS Code Server", description: "Remote development environment", url: "https://code.argobox.com", status: "live", icon: "fas fa-terminal", available: true }, - { name: "Drone CI", description: "Continuous Integration server", url: "https://drone.argobox.com", status: "live", icon: "fas fa-cogs", available: true }, - ], - media: [ - { name: "Plex", description: "Media streaming server", url: "https://plex.argobox.com", status: "live", icon: "fas fa-play-circle", available: true }, - { name: "Jellyfin", description: "Open source media system", url: "https://jellyfin.argobox.com", status: "live", icon: "fas fa-film", available: true }, - { name: "Sonarr", description: "TV show management", url: "#", status: "restricted", icon: "fas fa-tv", available: false }, - { name: "Radarr", description: "Movie management", url: "#", status: "restricted", icon: "fas fa-video", available: false }, - { name: "Prowlarr", description: "Indexer management", url: "#", status: "restricted", icon: "fas fa-search", available: false }, - ], - utilities: [ - { name: "File Browser", description: "Web file manager", url: "https://files.argobox.com", status: "live", icon: "fas fa-folder-open", available: true }, - { name: "Vaultwarden", description: "Password manager", url: "#", status: "restricted", icon: "fas fa-key", available: false }, - { name: "Homepage", description: "Service dashboard", url: "https://dash.argobox.com", status: "live", icon: "fas fa-tachometer-alt", available: true }, - { name: "Uptime Kuma", description: "Status monitoring", url: "https://status.argobox.com", status: "live", icon: "fas fa-heartbeat", available: true }, - ], - infrastructure: [ - { name: "Proxmox VE", description: "Virtualization platform", url: "#", status: "restricted", icon: "fas fa-server", available: false }, - { name: "Kubernetes (K3s)", description: "Container orchestration", url: "#", status: "restricted", icon: "fas fa-dharmachakra", available: false }, - { name: "Traefik", description: "Ingress controller", url: "#", status: "restricted", icon: "fas fa-route", available: false }, - { name: "OPNsense", description: "Firewall/Router", url: "#", status: "restricted", icon: "fas fa-shield-alt", available: false }, - ] -}; - -// Use your existing project data -const projectsData = [ - { title: "Ansible Playbooks", description: "Collection of playbooks for automating system configuration and application deployment.", icon: "fab fa-ansible", tech: ["Ansible", "YAML", "Jinja2"], url: "/resources/iac" }, - { title: "Kubernetes Manifests", description: "YAML definitions for deploying various applications and services on Kubernetes.", icon: "fas fa-dharmachakra", tech: ["Kubernetes", "YAML", "Helm"], url: "/resources/kubernetes" }, - { title: "Monitoring Dashboards", description: "Grafana dashboards for visualizing infrastructure and application metrics.", icon: "fas fa-chart-line", tech: ["Grafana", "PromQL", "JSON"], url: "/resources/config-files" }, - { title: "Cloudflare Tunnel Setup", description: "Securely exposing home lab services to the internet using Cloudflare Tunnels.", icon: "fas fa-cloud", tech: ["Cloudflare", "Networking", "Security"], url: "/posts/cloudflare-tunnel-setup" } -]; - -// Use your existing dashboards data -const dashboardsData = [ - { title: "Infrastructure Overview", description: "Key metrics for Proxmox hosts, network devices, and storage.", previewClass: "infrastructure", url: "https://dash.argobox.com/goto/...", icon: "fas fa-server" }, - { title: "Kubernetes Cluster", description: "Detailed view of K3s cluster resources, node status, and pod health.", previewClass: "kubernetes", url: "https://dash.argobox.com/goto/...", icon: "fas fa-dharmachakra" }, - { title: "Network Traffic", description: "Real-time and historical network usage, firewall logs, and connection tracking.", previewClass: "network", url: "https://dash.argobox.com/goto/...", icon: "fas fa-network-wired" }, - { title: "Service Performance", description: "Application-specific metrics, request latency, and error rates.", previewClass: "services", url: "https://dash.argobox.com/goto/...", icon: "fas fa-cogs" } -]; +// Calculate total services count for the hero section +const servicesCount = Object.values(servicesData).flat().length; ---
- -
-
-
-
-
-

- Enterprise-Grade Home Lab Environment -

-

- A production-ready infrastructure platform for DevOps experimentation, distributed systems, and automating everything with code. -

- - -
-
argobox:~$ ls -la /services | wc -l
-
{Object.values(servicesData).flat().length}+
-
argobox:~$ nproc --all
-
32+
-
argobox:~$ free -h | grep Mem | awk '{print $2}'
-
64GB
-
argobox:~$ df -h /data | grep /data | awk '{print $2}'
-
12TB
-
- -
- - - Try Ansible Sandbox - Offline - - - - Explore Architecture - -
-
- - -
-
-
- - - -
-
argobox ~ k8s-status
-
-
-
$ kubectl get nodes
-
NAME STATUS ROLES AGE VERSION
-
argobox Ready control-plane,master 154d v1.25.16+k3s1
-
argobox-lite Ready worker 154d v1.25.16+k3s1
-
 
-
$ kubectl get pods -A | grep Running | wc -l
-
32
-
 
-
$ uptime
-
14:30:25 up 154 days, 23:12, 1 user, load average: 0.22, 0.18, 0.15
-
 
-
$ ansible-playbook status.yml
-
PLAY [Check system status] *******************************************
-
TASK [Gathering Facts] **********************************************
-
ok: [argobox]
-
ok: [argobox-lite]
-
TASK [Check service status] *****************************************
-
ok: [argobox]
-
ok: [argobox-lite]
-
PLAY RECAP **********************************************************
-
argobox : ok=2 changed=0 unreachable=0 failed=0 skipped=0
-
argobox-lite: ok=2 changed=0 unreachable=0 failed=0 skipped=0
-
$ |
-
-
-
-
-
- - -
-
-
-

Infrastructure Architecture

-

- Enterprise-grade network topology with redundancy, virtualization, and secure segmentation. -

-
- - -
-
-
-
-
Internet Gateway
-
Multiple WAN connections with failover
-
-
-
-
OPNsense Firewall
-
Advanced security & traffic management
-
-
-
-
Proxmox Cluster
-
Virtualization platform with HA capabilities
-
-
-
-
ZFS Storage
-
RAID10 configuration with snapshots
-
-
-
-
Kubernetes (K3s)
-
Container orchestration across multiple nodes
-
-
-
-
Monitoring Stack
-
Prometheus, Grafana, & AlertManager
-
-
-
Git
-
Code
-
Media
-
Vault
-
Web
-
CI/CD
-
- -
-
- - -
- ArgoBox Architecture Diagram -
- -
-
-
-

Network Security

-

- Enterprise firewall with network segmentation using VLANs and strict access controls. Redundant routing with automatic failover between OPNsense and OpenWrt. -

-
-
-
-

Virtualization

-

- Proxmox virtualization platform with ZFS storage pools in RAID10 configuration. Optimized storage pools for VMs and containers with proper resource allocation. -

-
-
-
-

High Availability

-

- Full redundancy with failover routing, replicated storage, and resilient services. Automatic service recovery and load balancing across nodes. -

-
-
-
-
- - -
-
-
-

Core Technologies

-

- The ArgoBox lab leverages cutting-edge open source technologies to create a powerful, flexible infrastructure. -

-
-
-
-
-

Kubernetes (K3s)

-

Lightweight Kubernetes distribution running across multiple nodes for container orchestration. Powers all microservices and applications.

-
Multi-node clusterPersistent volumesTraefik ingressAuto-healing
-
-
-
-

Ansible Automation

-

Infrastructure as code platform for automated provisioning, configuration management, and application deployment across the entire environment.

-
Playbook libraryRole-based configsInteractive sandboxIdempotent workflows
-
-
-
-

Proxmox

-

Enterprise-class virtualization platform running virtual machines and containers with ZFS storage backend for data integrity.

-
ZFS storageResource balancingLive migrationHardware passthrough
-
-
-
-

Zero Trust Security

-

Comprehensive security architecture with Cloudflare tunnels, network segmentation, and authentication at all service boundaries.

-
Cloudflare tunnelsOPNsense firewallVLAN segmentationWireGuard VPN
-
-
-
-

PostgreSQL

-

Enterprise database cluster for application data storage with automated backups, replication, and performance optimization.

-
Automated backupsConnection poolingOptimized for K8sMulti-app support
-
-
-
-

Monitoring Stack

-

Comprehensive monitoring with Prometheus, Grafana, and AlertManager for real-time visibility into all infrastructure components.

-
Prometheus metricsGrafana dashboardsAutomated alertsHistorical data
-
-
-
-
- - -
-
-
-

Available Services

-

- Explore the various services and applications hosted in the ArgoBox environment. -

-
-
- -

Some services require authentication and are restricted. Available public services are highlighted and clickable.

-
-
- {Object.entries(servicesData).map(([categoryKey, categoryServices]) => ( -
-

- - {categoryKey.charAt(0).toUpperCase() + categoryKey.slice(1)} Tools -

-
- {categoryServices.map(service => ( - -
-
-
{service.name}
-

{service.description}

-
- - - {service.status.charAt(0).toUpperCase() + service.status.slice(1)} - - - ))} -
-
- ))} -
-
-
- - -
-
-
-

Related Projects & Code

-

- Explore associated projects, configurations, and code repositories related to the ArgoBox lab. -

-
-
- {projectsData.map(project => ( - -
-
-

{project.title}

-
-

{project.description}

-
- {project.tech.map(tech => {tech})} -
-
- - {project.url.startsWith('http') ? 'View Project' : 'View Details'} - -
- - ))} -
-
-
- - -
-
-
-

Live Dashboards

-

- Real-time monitoring dashboards providing insights into the lab's performance and status. (Authentication Required) -

-
-
- -

Access to live dashboards requires authentication via Cloudflare Access.

-
-
- {dashboardsData.map(dash => ( - -
-
-
-
-
View Dashboard
-
-
-
-
-

{dash.title}

-

{dash.description}

-
- Access Dashboard -
-
- - ))} -
-
-
+ + +