781 lines
43 KiB
HTML
781 lines
43 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LemonLink | Homelab & Services</title>
|
|
<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=Outfit:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🍋</text></svg>">
|
|
</head>
|
|
<body>
|
|
<!-- Animated Background -->
|
|
<div class="bg-animation">
|
|
<div class="bg-blob blob-1"></div>
|
|
<div class="bg-blob blob-2"></div>
|
|
<div class="bg-blob blob-3"></div>
|
|
<div class="bg-grid"></div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar">
|
|
<div class="nav-container">
|
|
<a href="#" class="logo">
|
|
<span class="logo-icon">🍋</span>
|
|
<span class="logo-text">Lemon<span class="logo-highlight">Link</span></span>
|
|
</a>
|
|
<ul class="nav-links">
|
|
<li><a href="#homelab" class="nav-link">Homelab</a></li>
|
|
<li><a href="#services" class="nav-link">Services</a></li>
|
|
<li><a href="#projects" class="nav-link">Projects</a></li>
|
|
<li><a href="#network" class="nav-link">Network</a></li>
|
|
<li><a href="#contact" class="nav-link nav-cta">Get in Touch</a></li>
|
|
</ul>
|
|
<button class="mobile-menu-btn" aria-label="Toggle menu">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-content">
|
|
<div class="hero-badge">
|
|
<span class="badge-dot"></span>
|
|
<span>Systems Online</span>
|
|
</div>
|
|
<h1 class="hero-title">
|
|
<span class="title-line">Welcome to</span>
|
|
<span class="title-line title-gradient">LemonLink</span>
|
|
</h1>
|
|
<p class="hero-subtitle">
|
|
A powerful homelab ecosystem running on enterprise-grade hardware.
|
|
Hosting 50+ services across dual Xeon servers and Raspberry Pi 5.
|
|
Built by ImpulsiveFPS with passion for self-hosting.
|
|
</p>
|
|
<div class="hero-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-number" data-target="99.9">0</span>
|
|
<span class="stat-suffix">%</span>
|
|
<span class="stat-label">Uptime</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number" data-target="24">0</span>
|
|
<span class="stat-suffix">/7</span>
|
|
<span class="stat-label">Monitoring</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number" data-target="50">0</span>
|
|
<span class="stat-suffix">+</span>
|
|
<span class="stat-label">Containers</span>
|
|
</div>
|
|
</div>
|
|
<div class="hero-cta">
|
|
<a href="#services" class="btn btn-primary">
|
|
<span>Explore Services</span>
|
|
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M5 12h14M12 5l7 7-7 7"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#homelab" class="btn btn-secondary">
|
|
<span>View Homelab</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-visual">
|
|
<div class="server-rack">
|
|
<div class="server-unit">
|
|
<div class="server-lights">
|
|
<span class="light green"></span>
|
|
<span class="light blue"></span>
|
|
<span class="light amber"></span>
|
|
</div>
|
|
<div class="server-vents"></div>
|
|
</div>
|
|
<div class="server-unit">
|
|
<div class="server-lights">
|
|
<span class="light green"></span>
|
|
<span class="light blue"></span>
|
|
<span class="light amber"></span>
|
|
</div>
|
|
<div class="server-vents"></div>
|
|
</div>
|
|
<div class="server-unit">
|
|
<div class="server-lights">
|
|
<span class="light green"></span>
|
|
<span class="light blue"></span>
|
|
<span class="light amber"></span>
|
|
</div>
|
|
<div class="server-vents"></div>
|
|
</div>
|
|
<div class="server-unit">
|
|
<div class="server-lights">
|
|
<span class="light green"></span>
|
|
<span class="light blue"></span>
|
|
<span class="light amber"></span>
|
|
</div>
|
|
<div class="server-vents"></div>
|
|
</div>
|
|
</div>
|
|
<div class="floating-cards">
|
|
<div class="float-card card-1">
|
|
<span class="card-icon">🐳</span>
|
|
<span>Docker</span>
|
|
</div>
|
|
<div class="float-card card-2">
|
|
<span class="card-icon">☸️</span>
|
|
<span>K8s</span>
|
|
</div>
|
|
<div class="float-card card-3">
|
|
<span class="card-icon">🔒</span>
|
|
<span>Secure</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Homelab Section -->
|
|
<section id="homelab" class="section homelab-section">
|
|
<div class="section-container">
|
|
<div class="section-header">
|
|
<span class="section-badge">🏠 Infrastructure</span>
|
|
<h2 class="section-title">The Homelab</h2>
|
|
<p class="section-desc">A powerful self-hosted ecosystem running on enterprise-grade hardware</p>
|
|
</div>
|
|
|
|
<div class="homelab-grid">
|
|
<div class="infra-card featured">
|
|
<div class="infra-visual">
|
|
<div class="rack-animation">
|
|
<div class="rack-unit active">
|
|
<div class="unit-leds">
|
|
<span></span><span></span><span></span><span></span>
|
|
</div>
|
|
</div>
|
|
<div class="rack-unit active">
|
|
<div class="unit-leds">
|
|
<span></span><span></span><span></span><span></span>
|
|
</div>
|
|
</div>
|
|
<div class="rack-unit active">
|
|
<div class="unit-leds">
|
|
<span></span><span></span><span></span><span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="infra-content">
|
|
<h3>Proxmox Server</h3>
|
|
<p>Dell PowerEdge with dual Xeon processors running Proxmox VE with 50+ containers and VMs</p>
|
|
<div class="infra-specs">
|
|
<span class="spec">24 Cores</span>
|
|
<span class="spec">96 GB RAM</span>
|
|
<span class="spec">2x Xeon E5645</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="infra-card">
|
|
<div class="infra-icon">🖧</div>
|
|
<div class="infra-content">
|
|
<h3>Network Stack</h3>
|
|
<p>1 Gbps fiber internet with managed switching and Tailscale mesh VPN</p>
|
|
<div class="infra-specs">
|
|
<span class="spec">1 Gbps</span>
|
|
<span class="spec">Tailscale</span>
|
|
<span class="spec">NPM</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="infra-card">
|
|
<div class="infra-icon">💾</div>
|
|
<div class="infra-content">
|
|
<h3>Storage Array</h3>
|
|
<p>TrueNAS SCALE with 12TB raw storage for media, backups, and datasets</p>
|
|
<div class="infra-specs">
|
|
<span class="spec">12 TB Raw</span>
|
|
<span class="spec">9 TB Usable</span>
|
|
<span class="spec">SCALE</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="infra-card">
|
|
<div class="infra-icon">🍓</div>
|
|
<div class="infra-content">
|
|
<h3>RPi 5 Node</h3>
|
|
<p>Raspberry Pi 5 8GB with 128GB NVMe running Docker containers and Portainer</p>
|
|
<div class="infra-specs">
|
|
<span class="spec">8GB RAM</span>
|
|
<span class="spec">128GB NVMe</span>
|
|
<span class="spec">ARM64</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-stack">
|
|
<h3 class="stack-title">Powered By</h3>
|
|
<div class="stack-marquee">
|
|
<div class="stack-track">
|
|
<span class="tech-item">Proxmox</span>
|
|
<span class="tech-item">Docker</span>
|
|
<span class="tech-item">Kubernetes</span>
|
|
<span class="tech-item">TrueNAS</span>
|
|
<span class="tech-item">UniFi</span>
|
|
<span class="tech-item">Nginx</span>
|
|
<span class="tech-item">Traefik</span>
|
|
<span class="tech-item">Prometheus</span>
|
|
<span class="tech-item">Grafana</span>
|
|
<span class="tech-item">Portainer</span>
|
|
<span class="tech-item">Proxmox</span>
|
|
<span class="tech-item">Docker</span>
|
|
<span class="tech-item">Kubernetes</span>
|
|
<span class="tech-item">TrueNAS</span>
|
|
<span class="tech-item">UniFi</span>
|
|
<span class="tech-item">Nginx</span>
|
|
<span class="tech-item">Traefik</span>
|
|
<span class="tech-item">Prometheus</span>
|
|
<span class="tech-item">Grafana</span>
|
|
<span class="tech-item">Portainer</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="section services-section">
|
|
<div class="section-container">
|
|
<div class="section-header">
|
|
<span class="section-badge">⚡ Available Now</span>
|
|
<h2 class="section-title">Services</h2>
|
|
<p class="section-desc">Self-hosted applications running on the LemonLink infrastructure</p>
|
|
</div>
|
|
|
|
<!-- Public Services -->
|
|
<div class="services-category">
|
|
<h3 class="category-title">
|
|
<span class="category-icon">🌐</span>
|
|
Public Services
|
|
</h3>
|
|
<div class="services-grid">
|
|
<a href="https://git.lemonlink.eu" class="service-card public" target="_blank" rel="noopener">
|
|
<div class="service-glow"></div>
|
|
<div class="service-icon" style="--icon-color: #609926;">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C6.477 0 2 4.477 2 10c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.341-3.369-1.341-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/></svg>
|
|
</div>
|
|
<h3 class="service-name">Gitea</h3>
|
|
<p class="service-desc">Self-hosted Git service for code repositories</p>
|
|
<div class="service-status checking" data-status-url="https://git.lemonlink.eu/api/v1/version">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Checking...</span>
|
|
</div>
|
|
<div class="service-arrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M7 17L17 7M17 7H7M17 7V17"/>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://tool.lemonlink.eu" class="service-card public" target="_blank" rel="noopener">
|
|
<div class="service-glow"></div>
|
|
<div class="service-icon" style="--icon-color: #f59e0b;">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>
|
|
</div>
|
|
<h3 class="service-name">IT-Tools</h3>
|
|
<p class="service-desc">Handy tools for developers and IT professionals</p>
|
|
<div class="service-status checking" data-status-url="https://tool.lemonlink.eu">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Checking...</span>
|
|
</div>
|
|
<div class="service-arrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M7 17L17 7M17 7H7M17 7V17"/>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://retro.lemonlink.eu" class="service-card public" target="_blank" rel="noopener">
|
|
<div class="service-glow"></div>
|
|
<div class="service-icon" style="--icon-color: #8b5cf6;">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10 7H8v3H6v-3H3v-2h3V8h2v3h3v2zm4.5 2c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4-3c-.83 0-1.5-.67-1.5-1.5S18.67 9 19.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
|
|
</div>
|
|
<h3 class="service-name">🎮 Retro Arcade</h3>
|
|
<p class="service-desc">Play classic DOS games including Doom! (Legally free)</p>
|
|
<div class="service-status checking" data-status-url="https://retro.lemonlink.eu">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Checking...</span>
|
|
</div>
|
|
<div class="service-arrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M7 17L17 7M17 7H7M17 7V17"/>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Private Services -->
|
|
<div class="services-category">
|
|
<h3 class="category-title">
|
|
<span class="category-icon">🔒</span>
|
|
Private Services
|
|
</h3>
|
|
<div class="services-grid">
|
|
<div class="service-card private-service" data-service="nextcloud">
|
|
<div class="service-glow"></div>
|
|
<div class="service-icon" style="--icon-color: #0082c9;">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
|
</div>
|
|
<h3 class="service-name">Nextcloud</h3>
|
|
<p class="service-desc">Private cloud storage, files, and collaboration</p>
|
|
<div class="service-status checking" data-status-url="https://cloud.lemonlink.eu/status.php">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Checking...</span>
|
|
</div>
|
|
<div class="service-arrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="service-card private-service" data-service="netdata">
|
|
<div class="service-glow"></div>
|
|
<div class="service-icon" style="--icon-color: #00ab44;">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 3v18h18v-2H5V3H3zm11 12.5l-4-4-5 5L4 16l5-5 4 4 6.5-6.5 1.5 1.5-8 8z"/></svg>
|
|
</div>
|
|
<h3 class="service-name">Netdata</h3>
|
|
<p class="service-desc">Real-time system monitoring and metrics</p>
|
|
<div class="service-status checking" data-status-url="https://stats.lemonlink.eu/api/v1/info">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Checking...</span>
|
|
</div>
|
|
<div class="service-arrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="service-card private-service" data-service="immich">
|
|
<div class="service-glow"></div>
|
|
<div class="service-icon" style="--icon-color: #ad5c5c;">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
|
|
</div>
|
|
<h3 class="service-name">Immich</h3>
|
|
<p class="service-desc">Self-hosted photo and video backup solution</p>
|
|
<div class="service-status checking" data-status-url="https://photos.lemonlink.eu/api/server-info/ping">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Checking...</span>
|
|
</div>
|
|
<div class="service-arrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="service-card private-service" data-service="homarr">
|
|
<div class="service-glow"></div>
|
|
<div class="service-icon" style="--icon-color: #ff5c5c;">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
|
|
</div>
|
|
<h3 class="service-name">Homarr</h3>
|
|
<p class="service-desc">Customizable dashboard for all your services</p>
|
|
<div class="service-status checking" data-status-url="https://dash.lemonlink.eu">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Checking...</span>
|
|
</div>
|
|
<div class="service-arrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="service-card private-service" data-service="tailscale">
|
|
<div class="service-glow"></div>
|
|
<div class="service-icon" style="--icon-color: #7b68ee;">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>
|
|
</div>
|
|
<h3 class="service-name">Tailscale</h3>
|
|
<p class="service-desc">Zero-config VPN for secure remote access</p>
|
|
<div class="service-status checking" data-status-url="https://login.tailscale.com">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Checking...</span>
|
|
</div>
|
|
<div class="service-arrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projects Section -->
|
|
<section id="projects" class="section projects-section">
|
|
<div class="section-container">
|
|
<div class="section-header">
|
|
<span class="section-badge">🚀 Creations</span>
|
|
<h2 class="section-title">Projects</h2>
|
|
<p class="section-desc">Things I've built and contributed to</p>
|
|
</div>
|
|
|
|
<div class="projects-showcase">
|
|
<div class="project-card large">
|
|
<div class="project-image">
|
|
<div class="project-visual">
|
|
<div class="code-window">
|
|
<div class="window-header">
|
|
<span class="win-btn red"></span>
|
|
<span class="win-btn yellow"></span>
|
|
<span class="win-btn green"></span>
|
|
</div>
|
|
<div class="window-content">
|
|
<div class="code-line"><span class="code-keyword">const</span> <span class="code-var">project</span> = {</div>
|
|
<div class="code-line"> name: <span class="code-string">"Awesome App"</span>,</div>
|
|
<div class="code-line"> status: <span class="code-string">"Production"</span>,</div>
|
|
<div class="code-line"> stars: <span class="code-number">1337</span></div>
|
|
<div class="code-line">};</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="project-info">
|
|
<div class="project-tags">
|
|
<span class="tag">React</span>
|
|
<span class="tag">TypeScript</span>
|
|
<span class="tag">Node.js</span>
|
|
</div>
|
|
<h3 class="project-name">LemonLink Infrastructure</h3>
|
|
<p class="project-desc">A comprehensive homelab setup running 50+ Docker containers across dual Xeon servers and Raspberry Pi 5. Features automated deployments, monitoring, and a complete self-hosted ecosystem.</p>
|
|
<div class="project-links">
|
|
<a href="https://git.lemonlink.eu/impulsivefps" class="project-link" target="_blank">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
<span>View on Gitea</span>
|
|
</a>
|
|
<a href="https://dash.lemonlink.eu" class="project-link" target="_blank">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3"/>
|
|
</svg>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="projects-small">
|
|
<div class="project-card small">
|
|
<div class="project-tags">
|
|
<span class="tag">Docker</span>
|
|
<span class="tag">Proxmox</span>
|
|
</div>
|
|
<h3 class="project-name">Container Platform</h3>
|
|
<p class="project-desc">50+ containers managed via Portainer on Proxmox and RPi5</p>
|
|
<a href="https://git.lemonlink.eu/impulsivefps" class="project-link" target="_blank">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="project-card small">
|
|
<div class="project-tags">
|
|
<span class="tag">NAS</span>
|
|
<span class="tag">ZFS</span>
|
|
</div>
|
|
<h3 class="project-name">TrueNAS SCALE</h3>
|
|
<p class="project-desc">12TB storage array with 9TB usable for media and backups</p>
|
|
<a href="https://git.lemonlink.eu/impulsivefps" class="project-link" target="_blank">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="project-card small">
|
|
<div class="project-tags">
|
|
<span class="tag">VPN</span>
|
|
<span class="tag">Mesh</span>
|
|
</div>
|
|
<h3 class="project-name">Tailscale Network</h3>
|
|
<p class="project-desc">Zero-config mesh VPN connecting all nodes securely</p>
|
|
<a href="https://git.lemonlink.eu/impulsivefps" class="project-link" target="_blank">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Skills & Stack Section -->
|
|
<section id="skills" class="section skills-section">
|
|
<div class="section-container">
|
|
<div class="section-header">
|
|
<span class="section-badge">🛠️ Toolbox</span>
|
|
<h2 class="section-title">Skills & Stack</h2>
|
|
<p class="section-desc">Technologies and tools I work with</p>
|
|
</div>
|
|
|
|
<div class="skills-grid">
|
|
<div class="skill-category">
|
|
<h3 class="skill-cat-title">Virtualization</h3>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">Proxmox VE</span>
|
|
<span class="skill-tag">KVM/QEMU</span>
|
|
<span class="skill-tag">LXC Containers</span>
|
|
<span class="skill-tag">VMware</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skill-category">
|
|
<h3 class="skill-cat-title">Containerization</h3>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">Docker</span>
|
|
<span class="skill-tag">Docker Compose</span>
|
|
<span class="skill-tag">Portainer</span>
|
|
<span class="skill-tag">Kubernetes</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skill-category">
|
|
<h3 class="skill-cat-title">Networking</h3>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">Nginx Proxy Manager</span>
|
|
<span class="skill-tag">Tailscale</span>
|
|
<span class="skill-tag">VLANs</span>
|
|
<span class="skill-tag">WireGuard</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skill-category">
|
|
<h3 class="skill-cat-title">Storage</h3>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">TrueNAS SCALE</span>
|
|
<span class="skill-tag">ZFS</span>
|
|
<span class="skill-tag">NFS</span>
|
|
<span class="skill-tag">Samba</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skill-category">
|
|
<h3 class="skill-cat-title">Monitoring</h3>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">Netdata</span>
|
|
<span class="skill-tag">Grafana</span>
|
|
<span class="skill-tag">Prometheus</span>
|
|
<span class="skill-tag">Uptime Kuma</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skill-category">
|
|
<h3 class="skill-cat-title">Development</h3>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">Git/Gitea</span>
|
|
<span class="skill-tag">CI/CD</span>
|
|
<span class="skill-tag">Bash</span>
|
|
<span class="skill-tag">Python</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="section contact-section">
|
|
<div class="section-container">
|
|
<div class="contact-card">
|
|
<div class="contact-content">
|
|
<span class="section-badge">👋 Let's Connect</span>
|
|
<h2 class="contact-title">ImpulsiveFPS</h2>
|
|
<p class="contact-desc">Homelab enthusiast running 50+ services on dual Xeon hardware. Passionate about self-hosting, networking, and building reliable infrastructure. This site showcases my journey into the world of self-hosted solutions.</p>
|
|
<div class="contact-actions">
|
|
<a href="https://git.lemonlink.eu/impulsivefps" class="btn btn-primary btn-large" target="_blank">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
|
<polyline points="22,6 12,13 2,6"/>
|
|
</svg>
|
|
<span>View My Gitea</span>
|
|
</a>
|
|
</div>
|
|
<div class="social-links" style="display: none;">
|
|
<!-- Social links hidden until set up -->
|
|
</div>
|
|
</div>
|
|
<div class="contact-visual">
|
|
<div class="terminal">
|
|
<div class="terminal-header">
|
|
<span class="terminal-dot red"></span>
|
|
<span class="terminal-dot yellow"></span>
|
|
<span class="terminal-dot green"></span>
|
|
</div>
|
|
<div class="terminal-body">
|
|
<div class="terminal-line">
|
|
<span class="prompt">➜</span>
|
|
<span class="path">~</span>
|
|
<span class="command">whoami</span>
|
|
</div>
|
|
<div class="terminal-output">lemon_admin</div>
|
|
<div class="terminal-line">
|
|
<span class="prompt">➜</span>
|
|
<span class="path">~</span>
|
|
<span class="command">uptime</span>
|
|
</div>
|
|
<div class="terminal-output">99.9% availability</div>
|
|
<div class="terminal-line">
|
|
<span class="prompt">➜</span>
|
|
<span class="path">~</span>
|
|
<span class="cursor">|</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-container">
|
|
<div class="footer-brand">
|
|
<a href="#" class="logo">
|
|
<span class="logo-icon">🍋</span>
|
|
<span class="logo-text">Lemon<span class="logo-highlight">Link</span></span>
|
|
</a>
|
|
<p class="footer-tagline">Built by ImpulsiveFPS with 💛 and lots of ☕</p>
|
|
</div>
|
|
<div class="footer-links">
|
|
<div class="footer-col">
|
|
<h4>Navigation</h4>
|
|
<a href="#homelab">Homelab</a>
|
|
<a href="#services">Services</a>
|
|
<a href="#projects">Projects</a>
|
|
<a href="#network">Network</a>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Services</h4>
|
|
<a href="https://cloud.lemonlink.eu" target="_blank">Nextcloud</a>
|
|
<a href="https://media.lemonlink.eu" target="_blank">Jellyfin</a>
|
|
<a href="https://git.lemonlink.eu" target="_blank">GitLab</a>
|
|
<a href="https://monitor.lemonlink.eu" target="_blank">Monitoring</a>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Connect</h4>
|
|
<a href="https://git.lemonlink.eu/impulsivefps">Gitea</a>
|
|
<a href="https://dash.lemonlink.eu">Dashboard</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2026 LemonLink. All rights reserved.</p>
|
|
<p class="footer-made">Powered by 2x Xeon E5645 | 96GB RAM | TrueNAS SCALE</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Service Info Modals - Hidden by default -->
|
|
<div id="modal-nextcloud" class="service-modal" style="display: none !important;">
|
|
<div class="modal-content">
|
|
<button class="modal-close">×</button>
|
|
<h3>☁️ Nextcloud</h3>
|
|
<p>Private cloud storage platform - your data stays under your control.</p>
|
|
<div class="modal-details">
|
|
<h4>Features:</h4>
|
|
<ul>
|
|
<li>File storage and sync</li>
|
|
<li>Calendar and contacts</li>
|
|
<li>Document collaboration</li>
|
|
<li>End-to-end encryption</li>
|
|
</ul>
|
|
<h4>Access:</h4>
|
|
<p>This is a <strong>private service</strong>. User account required.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-netdata" class="service-modal" style="display: none !important;">
|
|
<div class="modal-content">
|
|
<button class="modal-close">×</button>
|
|
<h3>📊 Netdata Monitoring</h3>
|
|
<p>Real-time infrastructure monitoring with beautiful dashboards.</p>
|
|
<div class="modal-details">
|
|
<h4>Features:</h4>
|
|
<ul>
|
|
<li>Real-time metrics</li>
|
|
<li>System performance monitoring</li>
|
|
<li>Custom alerts</li>
|
|
<li>Historical data</li>
|
|
</ul>
|
|
<h4>Access:</h4>
|
|
<p>This is a <strong>private service</strong>. VPN or local network access required.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-immich" class="service-modal" style="display: none !important;">
|
|
<div class="modal-content">
|
|
<button class="modal-close">×</button>
|
|
<h3>📸 Immich Photo Server</h3>
|
|
<p>Self-hosted photo and video backup solution - a Google Photos alternative.</p>
|
|
<div class="modal-details">
|
|
<h4>Features:</h4>
|
|
<ul>
|
|
<li>Automatic mobile photo backup</li>
|
|
<li>AI-powered face recognition</li>
|
|
<li>Albums and sharing</li>
|
|
<li>RAW file support</li>
|
|
</ul>
|
|
<h4>Access:</h4>
|
|
<p>This is a <strong>private service</strong>. Contact me for access.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-homarr" class="service-modal" style="display: none !important;">
|
|
<div class="modal-content">
|
|
<button class="modal-close">×</button>
|
|
<h3>🎛️ Homarr Dashboard</h3>
|
|
<p>Personal dashboard aggregating all services in one place.</p>
|
|
<div class="modal-details">
|
|
<h4>Features:</h4>
|
|
<ul>
|
|
<li>Service status monitoring</li>
|
|
<li>Quick bookmarks</li>
|
|
<li>Weather widget</li>
|
|
<li>Custom integrations</li>
|
|
</ul>
|
|
<h4>Access:</h4>
|
|
<p>This is a <strong>private service</strong>. VPN access required.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-tailscale" class="service-modal" style="display: none !important;">
|
|
<div class="modal-content">
|
|
<button class="modal-close">×</button>
|
|
<h3>🔒 Tailscale VPN</h3>
|
|
<p>Zero-configuration mesh VPN for secure remote access to the homelab.</p>
|
|
<div class="modal-details">
|
|
<h4>Features:</h4>
|
|
<ul>
|
|
<li>Point-to-point encrypted connections</li>
|
|
<li>No open ports required</li>
|
|
<li>Multi-device support</li>
|
|
<li>Exit nodes for secure browsing</li>
|
|
</ul>
|
|
<h4>Access:</h4>
|
|
<p>Tailscale network invitation required. Contact me to join the tailnet.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|