646 lines
38 KiB
HTML
646 lines
38 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 cutting-edge homelab ecosystem hosting innovative services,
|
|
powerful applications, and experimental projects.
|
|
Built with passion, powered by curiosity.
|
|
</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">Services</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 Cluster</h3>
|
|
<p>3-node high-availability virtualization cluster with Ceph storage</p>
|
|
<div class="infra-specs">
|
|
<span class="spec">96 Cores</span>
|
|
<span class="spec">384 GB RAM</span>
|
|
<span class="spec">20 TB SSD</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="infra-card">
|
|
<div class="infra-icon">🖧</div>
|
|
<div class="infra-content">
|
|
<h3>Network Stack</h3>
|
|
<p>UniFi ecosystem with 10G backbone and advanced VLAN segmentation</p>
|
|
<div class="infra-specs">
|
|
<span class="spec">10 Gbps</span>
|
|
<span class="spec">UniFi</span>
|
|
<span class="spec">VLAN</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 ZFS pools for reliable data storage</p>
|
|
<div class="infra-specs">
|
|
<span class="spec">48 TB</span>
|
|
<span class="spec">ZFS</span>
|
|
<span class="spec">RAID-Z2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="infra-card">
|
|
<div class="infra-icon">🤖</div>
|
|
<div class="infra-content">
|
|
<h3>Automation</h3>
|
|
<p>Terraform, Ansible & GitOps for infrastructure as code</p>
|
|
<div class="infra-specs">
|
|
<span class="spec">IaC</span>
|
|
<span class="spec">GitOps</span>
|
|
<span class="spec">CI/CD</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 and services available on the network</p>
|
|
</div>
|
|
|
|
<div class="services-grid">
|
|
<a href="https://cloud.lemonlink.eu" class="service-card" target="_blank" rel="noopener">
|
|
<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 and collaboration platform</p>
|
|
<div class="service-status online">
|
|
<span class="status-dot"></span>
|
|
<span>Online</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://media.lemonlink.eu" class="service-card" target="_blank" rel="noopener">
|
|
<div class="service-glow"></div>
|
|
<div class="service-icon" style="--icon-color: #00a4dc;">
|
|
<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-2 14.5v-9l6 4.5-6 4.5z"/></svg>
|
|
</div>
|
|
<h3 class="service-name">Jellyfin</h3>
|
|
<p class="service-desc">Open source media server for movies and TV shows</p>
|
|
<div class="service-status online">
|
|
<span class="status-dot"></span>
|
|
<span>Online</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://docs.lemonlink.eu" class="service-card" target="_blank" rel="noopener">
|
|
<div class="service-glow"></div>
|
|
<div class="service-icon" style="--icon-color: #f1c40f;">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
|
|
</div>
|
|
<h3 class="service-name">Wiki</h3>
|
|
<p class="service-desc">Documentation and knowledge base</p>
|
|
<div class="service-status online">
|
|
<span class="status-dot"></span>
|
|
<span>Online</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://git.lemonlink.eu" class="service-card" target="_blank" rel="noopener">
|
|
<div class="service-glow"></div>
|
|
<div class="service-icon" style="--icon-color: #fc6d26;">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 12l10 10L22 12 12 2zm0 3.5L18.5 12 12 18.5 5.5 12 12 5.5z"/></svg>
|
|
</div>
|
|
<h3 class="service-name">GitLab</h3>
|
|
<p class="service-desc">Self-hosted Git repository and CI/CD platform</p>
|
|
<div class="service-status online">
|
|
<span class="status-dot"></span>
|
|
<span>Online</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://monitor.lemonlink.eu" class="service-card" target="_blank" rel="noopener">
|
|
<div class="service-glow"></div>
|
|
<div class="service-icon" style="--icon-color: #e6522c;">
|
|
<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 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
|
|
</div>
|
|
<h3 class="service-name">Monitoring</h3>
|
|
<p class="service-desc">Grafana dashboards and Prometheus metrics</p>
|
|
<div class="service-status online">
|
|
<span class="status-dot"></span>
|
|
<span>Online</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://vpn.lemonlink.eu" class="service-card" target="_blank" rel="noopener">
|
|
<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">VPN</h3>
|
|
<p class="service-desc">Secure WireGuard VPN access</p>
|
|
<div class="service-status online">
|
|
<span class="status-dot"></span>
|
|
<span>Online</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>
|
|
</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">Featured Project</h3>
|
|
<p class="project-desc">Your flagship project description goes here. This could be your most impressive work, a popular open-source contribution, or a commercial application you've built.</p>
|
|
<div class="project-links">
|
|
<a href="#" class="project-link">
|
|
<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 Code</span>
|
|
</a>
|
|
<a href="#" class="project-link">
|
|
<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>Live Demo</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="projects-small">
|
|
<div class="project-card small">
|
|
<div class="project-tags">
|
|
<span class="tag">Python</span>
|
|
<span class="tag">Automation</span>
|
|
</div>
|
|
<h3 class="project-name">Home Automation</h3>
|
|
<p class="project-desc">Smart home integration with Home Assistant and custom sensors</p>
|
|
<a href="#" class="project-link">
|
|
<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">Go</span>
|
|
<span class="tag">CLI</span>
|
|
</div>
|
|
<h3 class="project-name">Dev Tool</h3>
|
|
<p class="project-desc">Command-line utility for developers to boost productivity</p>
|
|
<a href="#" class="project-link">
|
|
<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">Rust</span>
|
|
<span class="tag">Systems</span>
|
|
</div>
|
|
<h3 class="project-name">System Monitor</h3>
|
|
<p class="project-desc">High-performance system resource monitoring daemon</p>
|
|
<a href="#" class="project-link">
|
|
<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>
|
|
|
|
<!-- Network Section -->
|
|
<section id="network" class="section network-section">
|
|
<div class="section-container">
|
|
<div class="section-header">
|
|
<span class="section-badge">🌐 Sub-Domains</span>
|
|
<h2 class="section-title">Network</h2>
|
|
<p class="section-desc">Explore the LemonLink ecosystem</p>
|
|
</div>
|
|
|
|
<div class="network-map">
|
|
<div class="domain-hub">
|
|
<div class="hub-center">
|
|
<span class="hub-icon">🍋</span>
|
|
<span class="hub-text">lemonlink.eu</span>
|
|
</div>
|
|
<div class="hub-connections">
|
|
<svg class="connections-svg" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid meet">
|
|
<defs>
|
|
<linearGradient id="line-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:rgba(234,179,8,0.2)"/>
|
|
<stop offset="50%" style="stop-color:rgba(234,179,8,0.8)"/>
|
|
<stop offset="100%" style="stop-color:rgba(234,179,8,0.2)"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="domains-grid">
|
|
<a href="https://cloud.lemonlink.eu" class="domain-node" target="_blank">
|
|
<div class="node-pulse"></div>
|
|
<span class="node-name">cloud</span>
|
|
<span class="node-desc">Storage & Files</span>
|
|
</a>
|
|
<a href="https://media.lemonlink.eu" class="domain-node" target="_blank">
|
|
<div class="node-pulse"></div>
|
|
<span class="node-name">media</span>
|
|
<span class="node-desc">Movies & TV</span>
|
|
</a>
|
|
<a href="https://git.lemonlink.eu" class="domain-node" target="_blank">
|
|
<div class="node-pulse"></div>
|
|
<span class="node-name">git</span>
|
|
<span class="node-desc">Repositories</span>
|
|
</a>
|
|
<a href="https://docs.lemonlink.eu" class="domain-node" target="_blank">
|
|
<div class="node-pulse"></div>
|
|
<span class="node-name">docs</span>
|
|
<span class="node-desc">Documentation</span>
|
|
</a>
|
|
<a href="https://monitor.lemonlink.eu" class="domain-node" target="_blank">
|
|
<div class="node-pulse"></div>
|
|
<span class="node-name">monitor</span>
|
|
<span class="node-desc">Metrics</span>
|
|
</a>
|
|
<a href="https://vpn.lemonlink.eu" class="domain-node" target="_blank">
|
|
<div class="node-pulse"></div>
|
|
<span class="node-name">vpn</span>
|
|
<span class="node-desc">Secure Access</span>
|
|
</a>
|
|
<a href="https://status.lemonlink.eu" class="domain-node" target="_blank">
|
|
<div class="node-pulse"></div>
|
|
<span class="node-name">status</span>
|
|
<span class="node-desc">System Health</span>
|
|
</a>
|
|
<a href="https://blog.lemonlink.eu" class="domain-node" target="_blank">
|
|
<div class="node-pulse"></div>
|
|
<span class="node-name">blog</span>
|
|
<span class="node-desc">Thoughts & Ideas</span>
|
|
</a>
|
|
</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">Have a project in mind?</h2>
|
|
<p class="contact-desc">Whether you want to collaborate, need infrastructure advice, or just want to chat about homelabs — I'm always open to interesting conversations.</p>
|
|
<div class="contact-actions">
|
|
<a href="mailto:hello@lemonlink.eu" class="btn btn-primary btn-large">
|
|
<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>hello@lemonlink.eu</span>
|
|
</a>
|
|
</div>
|
|
<div class="social-links">
|
|
<a href="#" class="social-link" aria-label="GitHub">
|
|
<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>
|
|
<a href="#" class="social-link" aria-label="Twitter">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
|
</a>
|
|
<a href="#" class="social-link" aria-label="LinkedIn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
|
</a>
|
|
<a href="#" class="social-link" aria-label="Discord">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
|
|
</a>
|
|
</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 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="#">GitHub</a>
|
|
<a href="#">Twitter</a>
|
|
<a href="mailto:hello@lemonlink.eu">Email</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2024 LemonLink. All rights reserved.</p>
|
|
<p class="footer-made">Made with passion in the homelab</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|