949 lines
48 KiB
HTML
949 lines
48 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>ArgoBox | Enterprise-Grade Home Lab Environment</title>
|
|
<meta name="description" content="ArgoBox - A production-grade Kubernetes homelab for DevOps experimentation, infrastructure automation, and containerized application deployment.">
|
|
<meta name="keywords" content="kubernetes, k3s, homelab, devops, ansible, proxmox, automation, infrastructure, containerization, zero trust">
|
|
<meta name="author" content="Daniel LaForce">
|
|
|
|
<!-- Open Graph / Social Media Meta Tags -->
|
|
<meta property="og:title" content="ArgoBox | Enterprise-Grade Home Lab Environment">
|
|
<meta property="og:description" content="A production-grade Kubernetes homelab with zero trust architecture, complete automation, and enterprise-class infrastructure.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://argobox.com">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
|
|
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
/* Add the CSS for the offline indicator */
|
|
.live-indicator.offline {
|
|
background-color: #ef4444 !important; /* Red color */
|
|
}
|
|
|
|
.live-indicator.offline::after {
|
|
background-color: #ef4444 !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation Bar -->
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<div class="logo">
|
|
<a href="#home">
|
|
<span class="logo-text-glow">ArgoBox</span><span class="logo-dot-glow">.com</span>
|
|
</a>
|
|
</div>
|
|
<div class="nav-menu">
|
|
<a href="#home" class="nav-link">Home</a>
|
|
<a href="#technologies" class="nav-link">Technologies</a>
|
|
<a href="#services" class="nav-link">Services</a>
|
|
<a href="#projects" class="nav-link">Projects</a>
|
|
<a href="#dashboards" class="nav-link">Dashboards</a>
|
|
<a href="#contact" class="nav-link">Contact</a>
|
|
</div>
|
|
<div class="nav-buttons">
|
|
<a href="https://dashboard.argobox.com" class="dashboard-link" target="_blank">
|
|
<span class="live-indicator offline"></span>
|
|
<span>Live Dashboard</span>
|
|
</a>
|
|
<button class="menu-toggle" aria-label="Toggle menu">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Top Links -->
|
|
<div class="top-links">
|
|
<a href="https://laforceit.com" class="laforceit-link">
|
|
<span class="logo-text-glow">LaForceIT</span><span class="logo-dot-glow">.com</span>
|
|
</a>
|
|
<a href="construction.html" class="signin-button" target="_blank">
|
|
<i class="fas fa-sign-in-alt"></i>
|
|
<span>Sign In</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Hero Section -->
|
|
<section id="home" class="hero">
|
|
<div class="particles-container" id="particles-container"></div>
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<div class="hero-text">
|
|
<h1 class="hero-title">
|
|
Enterprise-Grade <span class="highlight">Home Lab</span> Environment
|
|
</h1>
|
|
<p class="hero-description">
|
|
A production-ready infrastructure platform for DevOps experimentation, distributed systems, and automating everything with code.
|
|
</p>
|
|
<div class="hero-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-icon"><i class="fas fa-microchip"></i></div>
|
|
<div class="stat-detail">
|
|
<div class="stat-value">32+</div>
|
|
<div class="stat-name">CPU Cores</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-icon"><i class="fas fa-memory"></i></div>
|
|
<div class="stat-detail">
|
|
<div class="stat-value">64GB</div>
|
|
<div class="stat-name">RAM</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-icon"><i class="fas fa-hdd"></i></div>
|
|
<div class="stat-detail">
|
|
<div class="stat-value">12TB</div>
|
|
<div class="stat-name">Storage</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-icon"><i class="fas fa-server"></i></div>
|
|
<div class="stat-detail">
|
|
<div class="stat-value">16+</div>
|
|
<div class="stat-name">Services</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cta-buttons">
|
|
<a href="ansible-sandbox.html" class="btn btn-danger" target="_blank" id="ansible-sandbox-btn">
|
|
<i class="fab fa-ansible btn-icon"></i>
|
|
<span class="btn-text">Try Ansible Sandbox</span>
|
|
<span class="offline-badge">Offline</span>
|
|
</a>
|
|
<a href="#architecture" class="btn btn-outline">
|
|
<i class="fas fa-network-wired btn-icon"></i>
|
|
<span class="btn-text">Explore Architecture</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-terminal">
|
|
<div class="terminal-header">
|
|
<div class="terminal-buttons">
|
|
<span class="terminal-btn close"></span>
|
|
<span class="terminal-btn minimize"></span>
|
|
<span class="terminal-btn maximize"></span>
|
|
</div>
|
|
<div class="terminal-title">argobox ~ k8s-status</div>
|
|
</div>
|
|
<div class="terminal-body">
|
|
<div class="terminal-line">$ kubectl get nodes</div>
|
|
<div class="terminal-line output">NAME STATUS ROLES AGE VERSION</div>
|
|
<div class="terminal-line output">argobox Ready control-plane,master 154d v1.25.16+k3s1</div>
|
|
<div class="terminal-line output">argobox-lite Ready worker 154d v1.25.16+k3s1</div>
|
|
<div class="terminal-line blank"> </div>
|
|
<div class="terminal-line">$ kubectl get pods -A | grep Running | wc -l</div>
|
|
<div class="terminal-line output">32</div>
|
|
<div class="terminal-line blank"> </div>
|
|
<div class="terminal-line">$ uptime</div>
|
|
<div class="terminal-line output">14:30:25 up 154 days, 23:12, 1 user, load average: 0.22, 0.18, 0.15</div>
|
|
<div class="terminal-line blank"> </div>
|
|
<div class="terminal-line">$ ansible-playbook status.yml</div>
|
|
<div class="terminal-line output">PLAY [Check system status] *******************************************</div>
|
|
<div class="terminal-line output">TASK [Gathering Facts] **********************************************</div>
|
|
<div class="terminal-line output success">ok: [argobox]</div>
|
|
<div class="terminal-line output success">ok: [argobox-lite]</div>
|
|
<div class="terminal-line output">TASK [Check service status] *****************************************</div>
|
|
<div class="terminal-line output success">ok: [argobox]</div>
|
|
<div class="terminal-line output success">ok: [argobox-lite]</div>
|
|
<div class="terminal-line output">PLAY RECAP **********************************************************</div>
|
|
<div class="terminal-line output success">argobox : ok=2 changed=0 unreachable=0 failed=0 skipped=0</div>
|
|
<div class="terminal-line output success">argobox-lite: ok=2 changed=0 unreachable=0 failed=0 skipped=0</div>
|
|
<div class="terminal-line typing">$ <span class="cursor">|</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Architecture Section -->
|
|
<section id="architecture" class="architecture">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Infrastructure Architecture</h2>
|
|
<p class="section-description">
|
|
Enterprise-grade network topology with redundancy, virtualization, and secure segmentation.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="architecture-diagram">
|
|
<div class="diagram-wrapper">
|
|
<div class="diagram-node isp">
|
|
<div class="node-icon"><i class="fas fa-globe"></i></div>
|
|
<div class="node-label">ISP Modem</div>
|
|
</div>
|
|
|
|
<div class="diagram-tier router-tier">
|
|
<div class="diagram-node router primary">
|
|
<div class="node-icon"><i class="fas fa-shield-alt"></i></div>
|
|
<div class="node-label">OPNsense VM</div>
|
|
<div class="node-detail">Primary Router</div>
|
|
</div>
|
|
<div class="diagram-node router secondary">
|
|
<div class="node-icon"><i class="fas fa-shield-alt"></i></div>
|
|
<div class="node-label">OpenWrt RPi4</div>
|
|
<div class="node-detail">Failover Router</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="diagram-node switch">
|
|
<div class="node-icon"><i class="fas fa-network-wired"></i></div>
|
|
<div class="node-label">Core Switch</div>
|
|
<div class="node-detail">MikroTik Layer 3</div>
|
|
</div>
|
|
|
|
<div class="diagram-tier infra-tier">
|
|
<div class="diagram-node server">
|
|
<div class="node-icon"><i class="fas fa-server"></i></div>
|
|
<div class="node-label">Proxmox Host</div>
|
|
<div class="node-detail">argobox/argobox-lite</div>
|
|
</div>
|
|
<div class="diagram-node storage">
|
|
<div class="node-icon"><i class="fas fa-database"></i></div>
|
|
<div class="node-label">NAS Systems</div>
|
|
<div class="node-detail">redcone/casablanca</div>
|
|
</div>
|
|
<div class="diagram-node clients">
|
|
<div class="node-icon"><i class="fas fa-laptop"></i></div>
|
|
<div class="node-label">Client Devices</div>
|
|
<div class="node-detail">Workstations/IoT</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="architecture-details">
|
|
<div class="detail-card">
|
|
<div class="detail-icon"><i class="fas fa-shield-alt"></i></div>
|
|
<h3 class="detail-title">Network Security</h3>
|
|
<p class="detail-description">
|
|
Enterprise firewall with network segmentation using VLANs and strict access controls. Redundant routing with automatic failover between OPNsense and OpenWrt.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="detail-card">
|
|
<div class="detail-icon"><i class="fas fa-cloud"></i></div>
|
|
<h3 class="detail-title">Virtualization</h3>
|
|
<p class="detail-description">
|
|
Proxmox virtualization platform with ZFS storage pools in RAID10 configuration. Optimized storage pools for VMs and containers with proper resource allocation.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="detail-card">
|
|
<div class="detail-icon"><i class="fas fa-route"></i></div>
|
|
<h3 class="detail-title">High Availability</h3>
|
|
<p class="detail-description">
|
|
Full redundancy with failover routing, replicated storage, and resilient services. Automatic service recovery and load balancing across nodes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Technologies Section -->
|
|
<section id="technologies" class="technologies">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Core Technologies</h2>
|
|
<p class="section-description">
|
|
The ArgoBox lab leverages cutting-edge open source technologies to create a powerful, flexible infrastructure.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="tech-grid">
|
|
<div class="tech-card">
|
|
<div class="tech-icon"><i class="fas fa-dharmachakra"></i></div>
|
|
<h3 class="tech-title">Kubernetes (K3s)</h3>
|
|
<p class="tech-description">
|
|
Lightweight Kubernetes distribution running across multiple nodes for container orchestration. Powers all microservices and applications.
|
|
</p>
|
|
<div class="tech-features">
|
|
<span class="tech-feature">Multi-node cluster</span>
|
|
<span class="tech-feature">Persistent volumes</span>
|
|
<span class="tech-feature">Traefik ingress</span>
|
|
<span class="tech-feature">Auto-healing</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-card featured">
|
|
<div class="tech-icon"><i class="fab fa-ansible"></i></div>
|
|
<h3 class="tech-title">Ansible Automation</h3>
|
|
<p class="tech-description">
|
|
Infrastructure as code platform for automated provisioning, configuration management, and application deployment across the entire environment.
|
|
</p>
|
|
<div class="tech-features">
|
|
<span class="tech-feature">Playbook library</span>
|
|
<span class="tech-feature">Role-based configs</span>
|
|
<span class="tech-feature">Interactive sandbox</span>
|
|
<span class="tech-feature">Idempotent workflows</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-card">
|
|
<div class="tech-icon"><i class="fas fa-server"></i></div>
|
|
<h3 class="tech-title">Proxmox</h3>
|
|
<p class="tech-description">
|
|
Enterprise-class virtualization platform running virtual machines and containers with ZFS storage backend for data integrity.
|
|
</p>
|
|
<div class="tech-features">
|
|
<span class="tech-feature">ZFS storage</span>
|
|
<span class="tech-feature">Resource balancing</span>
|
|
<span class="tech-feature">Live migration</span>
|
|
<span class="tech-feature">Hardware passthrough</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-card">
|
|
<div class="tech-icon"><i class="fas fa-shield-alt"></i></div>
|
|
<h3 class="tech-title">Zero Trust Security</h3>
|
|
<p class="tech-description">
|
|
Comprehensive security architecture with Cloudflare tunnels, network segmentation, and authentication at all service boundaries.
|
|
</p>
|
|
<div class="tech-features">
|
|
<span class="tech-feature">Cloudflare tunnels</span>
|
|
<span class="tech-feature">OPNsense firewall</span>
|
|
<span class="tech-feature">VLAN segmentation</span>
|
|
<span class="tech-feature">WireGuard VPN</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-card">
|
|
<div class="tech-icon"><i class="fas fa-database"></i></div>
|
|
<h3 class="tech-title">PostgreSQL</h3>
|
|
<p class="tech-description">
|
|
Enterprise database cluster for application data storage with automated backups, replication, and performance optimization.
|
|
</p>
|
|
<div class="tech-features">
|
|
<span class="tech-feature">Automated backups</span>
|
|
<span class="tech-feature">Connection pooling</span>
|
|
<span class="tech-feature">Optimized for K8s</span>
|
|
<span class="tech-feature">Multi-app support</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-card">
|
|
<div class="tech-icon"><i class="fas fa-chart-line"></i></div>
|
|
<h3 class="tech-title">Monitoring Stack</h3>
|
|
<p class="tech-description">
|
|
Comprehensive monitoring with Prometheus, Grafana, and AlertManager for real-time visibility into all infrastructure components.
|
|
</p>
|
|
<div class="tech-features">
|
|
<span class="tech-feature">Prometheus metrics</span>
|
|
<span class="tech-feature">Grafana dashboards</span>
|
|
<span class="tech-feature">Automated alerts</span>
|
|
<span class="tech-feature">Historical data</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="services">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Available Services</h2>
|
|
<p class="section-description">
|
|
Explore the various services and applications hosted in the ArgoBox environment.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="services-info-banner">
|
|
<i class="fas fa-info-circle info-icon"></i>
|
|
<p>Some services require authentication and are restricted to authorized users. Available public services are highlighted and clickable.</p>
|
|
</div>
|
|
|
|
<div class="services-grid">
|
|
<!-- Development Tools -->
|
|
<div class="services-category">
|
|
<h3 class="category-title">
|
|
<i class="fas fa-code category-icon"></i>
|
|
Development Tools
|
|
</h3>
|
|
<div class="service-items">
|
|
<a href="https://git.argobox.com" class="service-item available" target="_blank">
|
|
<div class="service-icon"><i class="fas fa-code-branch"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Git Repository</h4>
|
|
<p class="service-description">Gitea-powered Git service for code hosting and collaboration</p>
|
|
</div>
|
|
<div class="service-status live">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Public</span>
|
|
</div>
|
|
</a>
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-code"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Dev Environment</h4>
|
|
<p class="service-description">VS Code Server-powered development environment</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Knowledge & Content -->
|
|
<div class="services-category">
|
|
<h3 class="category-title">
|
|
<i class="fas fa-book category-icon"></i>
|
|
Knowledge & Content
|
|
</h3>
|
|
<div class="service-items">
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-brain"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Knowledge Base</h4>
|
|
<p class="service-description">Obsidian-powered knowledge management system</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
<a href="https://blog.argobox.com" class="service-item available" target="_blank">
|
|
<div class="service-icon"><i class="fas fa-rss"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Blog</h4>
|
|
<p class="service-description">Obsidian-Powered technical articles and project documentation</p>
|
|
</div>
|
|
<div class="service-status live">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Public</span>
|
|
</div>
|
|
</a>
|
|
<a href="https://notes.argobox.com" class="service-item available" target="_blank">
|
|
<div class="service-icon"><i class="fas fa-sticky-note"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Notes</h4>
|
|
<p class="service-description">Obsidian-Powered technical notes and snippets</p>
|
|
</div>
|
|
<div class="service-status live">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Public</span>
|
|
</div>
|
|
</a>
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-book-open"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Documentation Portal</h4>
|
|
<p class="service-description">GitBook-Powered comprehensive system documentation and guides</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI & Automation -->
|
|
<div class="services-category">
|
|
<h3 class="category-title">
|
|
<i class="fas fa-robot category-icon"></i>
|
|
AI & Automation
|
|
</h3>
|
|
<div class="service-items">
|
|
<a href="https://ai.argobox.com" class="service-item available" target="_blank">
|
|
<div class="service-icon"><i class="fas fa-brain"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">AI Assistant</h4>
|
|
<p class="service-description">OpenWebUI and Ollama-powered AI language models</p>
|
|
</div>
|
|
<div class="service-status live">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Public</span>
|
|
</div>
|
|
</a>
|
|
<a href="ansible-sandbox.html" class="service-item available" target="_blank">
|
|
<div class="service-icon"><i class="fab fa-ansible"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Ansible Sandbox</h4>
|
|
<p class="service-description">Interactive environment for infrastructure automation</p>
|
|
</div>
|
|
<div class="service-status offline">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Offline</span>
|
|
</div>
|
|
</a>
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fab fa-git-alt"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">GitHub Actions</h4>
|
|
<p class="service-description">Self-hosted GitHub Actions runners for CI/CD</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Files & Storage -->
|
|
<div class="services-category">
|
|
<h3 class="category-title">
|
|
<i class="fas fa-folder-open category-icon"></i>
|
|
Files & Storage
|
|
</h3>
|
|
<div class="service-items">
|
|
<a href="https://files.argobox.com" class="service-item available" target="_blank">
|
|
<div class="service-icon"><i class="fas fa-file-alt"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">File Browser</h4>
|
|
<p class="service-description">Web-based file browser for shared resources</p>
|
|
</div>
|
|
<div class="service-status live">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Public</span>
|
|
</div>
|
|
</a>
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-cloud"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Synology Drive</h4>
|
|
<p class="service-description">Enterprise file sync and collaboration platform</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media & Downloads -->
|
|
<div class="services-category">
|
|
<h3 class="category-title">
|
|
<i class="fas fa-download category-icon"></i>
|
|
Media & Downloads
|
|
</h3>
|
|
<div class="service-items">
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-download"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">ruTorrent Instance 1</h4>
|
|
<p class="service-description">Torrent-based download service</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-download"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">ruTorrent Instance 2</h4>
|
|
<p class="service-description">Torrent-based download service</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-film"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Plex Media Server</h4>
|
|
<p class="service-description">Premium streaming platform for movies, TV shows, and music</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-film"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Jellyfin</h4>
|
|
<p class="service-description">Open source media server alternative</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Monitoring & Management -->
|
|
<div class="services-category">
|
|
<h3 class="category-title">
|
|
<i class="fas fa-chart-line category-icon"></i>
|
|
Monitoring & Management
|
|
</h3>
|
|
<div class="service-items">
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-tachometer-alt"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Grafana Dashboards</h4>
|
|
<p class="service-description">Comprehensive system monitoring and visualization</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-bell"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Alertmanager</h4>
|
|
<p class="service-description">System alerts and notifications</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-sitemap"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Rancher</h4>
|
|
<p class="service-description">Kubernetes management platform</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-network-wired"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Network Monitor</h4>
|
|
<p class="service-description">Traffic analysis and network monitoring</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Experimental Services -->
|
|
<div class="services-category">
|
|
<h3 class="category-title">
|
|
<i class="fas fa-flask category-icon"></i>
|
|
Experimental Services
|
|
</h3>
|
|
<div class="service-items">
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-calendar-alt"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Calendar System</h4>
|
|
<p class="service-description">Shared calendar and scheduling platform</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-tasks"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Kanban Board</h4>
|
|
<p class="service-description">Task management and workflow visualization</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
<div class="service-item">
|
|
<div class="service-icon"><i class="fas fa-satellite-dish"></i></div>
|
|
<div class="service-info">
|
|
<h4 class="service-name">Home Automation</h4>
|
|
<p class="service-description">Smart home control and automation hub</p>
|
|
</div>
|
|
<div class="service-status restricted">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Restricted</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projects Section -->
|
|
<section id="projects" class="projects">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Featured Projects</h2>
|
|
<p class="section-description">
|
|
A showcase of technical solutions I've built and deployed.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="projects-grid">
|
|
<div class="project-card">
|
|
<div class="project-icon">
|
|
<i class="fas fa-map-marked-alt"></i>
|
|
</div>
|
|
<h3 class="project-title">TerraTracer</h3>
|
|
<p class="project-description">
|
|
A GIS mapping tool for prospectors to automate mining claim boundary plotting, terrain analysis, and compliance with BLM/state regulations.
|
|
</p>
|
|
<div class="tech-badges">
|
|
<span class="tech-badge">Python</span>
|
|
<span class="tech-badge">Node.js</span>
|
|
<span class="tech-badge">JavaScript</span>
|
|
<span class="tech-badge">GIS</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card">
|
|
<div class="project-icon">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
<h3 class="project-title">Zero Trust Lab</h3>
|
|
<p class="project-description">
|
|
A secure home lab infrastructure using Cloudflare Zero Trust tunnels, network segmentation, and security best practices.
|
|
</p>
|
|
<div class="tech-badges">
|
|
<span class="tech-badge">Cloudflare</span>
|
|
<span class="tech-badge">OPNsense</span>
|
|
<span class="tech-badge">VLAN</span>
|
|
<span class="tech-badge">VPN</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card">
|
|
<div class="project-icon">
|
|
<i class="fas fa-robot"></i>
|
|
</div>
|
|
<h3 class="project-title">Ansible Sandbox</h3>
|
|
<p class="project-description">
|
|
An interactive demo environment where users can spin up preconfigured services using Ansible automation.
|
|
</p>
|
|
<div class="tech-badges">
|
|
<span class="tech-badge">Ansible</span>
|
|
<span class="tech-badge">Proxmox</span>
|
|
<span class="tech-badge">Python</span>
|
|
<span class="tech-badge">Docker</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Dashboards Section -->
|
|
<section id="dashboards" class="dashboards">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Live Dashboards</h2>
|
|
<p class="section-description">
|
|
Real-time monitoring and management interfaces for the ArgoBox infrastructure.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="dashboard-grid">
|
|
<div class="dashboard-card">
|
|
<div class="dashboard-preview infrastructure">
|
|
<div class="dashboard-overlay">
|
|
<div class="overlay-content">
|
|
<i class="fas fa-chart-line overlay-icon"></i>
|
|
<span class="overlay-text">View Dashboard</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-info">
|
|
<h3 class="dashboard-title">Infrastructure Metrics</h3>
|
|
<p class="dashboard-description">
|
|
Real-time performance metrics for all infrastructure components.
|
|
</p>
|
|
<div class="dashboard-cta">
|
|
<a href="https://dashboard.argobox.com/infrastructure" class="btn btn-sm">Open Dashboard</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-card">
|
|
<div class="dashboard-preview kubernetes">
|
|
<div class="dashboard-overlay">
|
|
<div class="overlay-content">
|
|
<i class="fas fa-dharmachakra overlay-icon"></i>
|
|
<span class="overlay-text">View Dashboard</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-info">
|
|
<h3 class="dashboard-title">Kubernetes Status</h3>
|
|
<p class="dashboard-description">
|
|
Monitoring dashboard for K3s cluster health and metrics.
|
|
</p>
|
|
<div class="dashboard-cta">
|
|
<a href="https://dashboard.argobox.com/kubernetes" class="btn btn-sm">Open Dashboard</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-card">
|
|
<div class="dashboard-preview network">
|
|
<div class="dashboard-overlay">
|
|
<div class="overlay-content">
|
|
<i class="fas fa-network-wired overlay-icon"></i>
|
|
<span class="overlay-text">View Dashboard</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-info">
|
|
<h3 class="dashboard-title">Network Monitor</h3>
|
|
<p class="dashboard-description">
|
|
Network traffic analysis and monitoring.
|
|
</p>
|
|
<div class="dashboard-cta">
|
|
<a href="https://dashboard.argobox.com/network" class="btn btn-sm">Open Dashboard</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-card">
|
|
<div class="dashboard-preview services">
|
|
<div class="dashboard-overlay">
|
|
<div class="overlay-content">
|
|
<i class="fas fa-th overlay-icon"></i>
|
|
<span class="overlay-text">View Dashboard</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-info">
|
|
<h3 class="dashboard-title">Service Portal</h3>
|
|
<p class="dashboard-description">
|
|
Centralized access to all deployed services.
|
|
</p>
|
|
<div class="dashboard-cta">
|
|
<a href="https://dashboard.argobox.com/portal" class="btn btn-sm">Open Dashboard</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="contact">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Let's Connect</h2>
|
|
<p class="section-description">
|
|
Have a project in mind? Reach out to discuss how I can help.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="contact-grid">
|
|
<div class="contact-info">
|
|
<div class="contact-item">
|
|
<div class="contact-icon">
|
|
<i class="fas fa-envelope"></i>
|
|
</div>
|
|
<h3 class="contact-title">Email</h3>
|
|
<p><a href="mailto:daniel@argobox.com">daniel@argobox.com</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-form-container">
|
|
<form id="contact-form" class="contact-form">
|
|
<div class="form-group">
|
|
<label for="name">Name</label>
|
|
<input type="text" id="name" name="name" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" name="email" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="subject">Subject</label>
|
|
<input type="text" id="subject" name="subject" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="message">Message</label>
|
|
<textarea id="message" name="message" rows="5" required></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-paper-plane btn-icon"></i>
|
|
Send Message
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-info">
|
|
<div class="footer-logo">
|
|
<span class="logo-text-glow">ArgoBox</span>
|
|
<span class="logo-dot-glow">.com</span>
|
|
</div>
|
|
<p class="footer-description">
|
|
Enterprise-grade home lab environment for DevOps experimentation, infrastructure automation, and containerized application deployment.
|
|
</p>
|
|
<div class="footer-evolution">
|
|
<i class="fas fa-code-branch evolution-icon"></i>
|
|
<span>Continuously evolving since 2011</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-links">
|
|
<div class="footer-links-column">
|
|
<h3 class="footer-heading">Platforms</h3>
|
|
<a href="https://dashboard.argobox.com" class="footer-link">Dashboard</a>
|
|
<a href="ansible-sandbox.html" class="footer-link">Ansible Sandbox</a>
|
|
<a href="https://git.argobox.com" class="footer-link">Gitea</a>
|
|
<a href="https://ai.argobox.com" class="footer-link">OpenWebUI</a>
|
|
</div>
|
|
|
|
<div class="footer-links-column">
|
|
<h3 class="footer-heading">Documentation</h3>
|
|
<a href="construction.html" class="footer-link">Architecture</a>
|
|
<a href="construction.html" class="footer-link">Kubernetes</a>
|
|
<a href="construction.html" class="footer-link">Ansible</a>
|
|
<a href="construction.html" class="footer-link">Network</a>
|
|
</div>
|
|
|
|
<div class="footer-links-column">
|
|
<h3 class="footer-heading">Resources</h3>
|
|
<a href="construction.html" class="footer-link">Ansible Playbooks</a>
|
|
<a href="construction.html" class="footer-link">K8s Manifests</a>
|
|
<a href="construction.html" class="footer-link">Shell Scripts</a>
|
|
<a href="construction.html" class="footer-link">Configuration Files</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p>© <span id="current-year">2025</span> All rights reserved. Inovin LLC</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |