🍋 LemonLink - Jaw-Dropping Landing Page

A stunning, modern landing page for lemonlink.eu that showcases your homelab, services, projects, and network of sub-domains. Built with pure HTML, CSS, and JavaScript - no frameworks required!

✨ Features

🎨 Visual Design

• Glassmorphism UI - Modern frosted glass effects with backdrop blur
• Animated Gradient Background - Floating blobs with smooth animations
• Responsive Design - Looks great on desktop, tablet, and mobile
• Dark Theme - Easy on the eyes with vibrant lemon/gold accents
• Smooth Animations - Scroll reveals, hover effects, and micro-interactions

🏠 Sections

1. Hero - Eye-catching intro with animated server rack visualization
2. Homelab - Showcase your infrastructure with animated server units
3. Services - Grid of self-hosted services with status indicators
4. Projects - Portfolio cards with code window visualization
5. Network - Visual map of all your sub-domains
6. Contact - Terminal-style contact section

🚀 Interactive Features

• Mouse-following glow on service cards
• Animated counters for statistics
• Parallax background on mouse move
• Typing animation in terminal
• Konami code easter egg (↑↑↓↓←→←→BA)
• Smooth scroll navigation

📁 File Structure

lemonlink/
├── index.html          # Main HTML file
├── styles.css          # All styles (32KB)
├── script.js           # All interactivity (15KB)
└── README.md           # This file

🚀 Quick Start

Option 1: Simple Hosting (Recommended)

Just upload the three files (index.html, styles.css, script.js) to your web server:

# Using SCP
scp index.html styles.css script.js user@yourserver:/var/www/lemonlink.eu/

# Or using FTP, SFTP, or your hosting provider's file manager

Option 2: Docker Deployment

Create a Dockerfile:

FROM nginx:alpine
COPY . /usr/share/nginx/html
EXPOSE 80

Build and run:

docker build -t lemonlink .
docker run -d -p 80:80 --name lemonlink lemonlink

Option 3: Nginx Configuration

server {
    listen 80;
    server_name lemonlink.eu www.lemonlink.eu;
    root /var/www/lemonlink.eu;
    index index.html;
    
    location / {
        try_files $uri $uri/ =404;
    }
    
    # Enable gzip compression
    gzip on;
    gzip_types text/css application/javascript;
}

🔧 Customization Guide

1. Update Service Links

Find the services section in index.html and update the URLs:

<a href="https://cloud.lemonlink.eu" class="service-card" target="_blank">
    <!-- Change the href to your actual service URL -->
</a>

2. Update Sub-domains

In the Network section, update the domain nodes:

<a href="https://your-service.lemonlink.eu" class="domain-node">
    <span class="node-name">service</span>
    <span class="node-desc">Description</span>
</a>

3. Update Project Information

Find the Projects section and customize:

<div class="project-card large">
    <h3 class="project-name">Your Project Name</h3>
    <p class="project-desc">Your project description...</p>
    <!-- Update links -->
</div>

4. Update Homelab Specs

In the Homelab section, update your hardware specs:

<div class="infra-specs">
    <span class="spec">Your Cores</span>
    <span class="spec">Your RAM</span>
    <span class="spec">Your Storage</span>
</div>

5. Update Contact Information

<a href="mailto:your@email.com" class="btn btn-primary btn-large">
    <span>your@email.com</span>
</a>

6. Update Social Links

Find the social links section and update the hrefs:

<a href="https://github.com/yourusername" class="social-link">

🎨 Color Customization

Edit CSS variables in styles.css:

:root {
    --color-primary: #eab308;        /* Change primary color */
    --color-secondary: #6366f1;       /* Change secondary color */
    --color-accent: #22d3ee;          /* Change accent color */
    --color-bg: #0a0a0f;              /* Change background */
}

📱 Responsive Breakpoints

• Desktop: > 1024px
• Tablet: 768px - 1024px
• Mobile: < 768px

🔒 Security Considerations

1. HTTPS: Always use HTTPS for your services
2. Headers: Add security headers in your web server config:

add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;

3. CSP: Consider adding a Content Security Policy

🎯 Performance

• No external dependencies (except Google Fonts)
• Minified assets ready for production
• Lazy loading via Intersection Observer
• Optimized animations with requestAnimationFrame
• ~50KB total (gzipped)

🌟 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

📝 License

This project is open source. Feel free to use, modify, and distribute!

🙏 Credits

• Fonts: Google Fonts (Outfit & Space Grotesk)
• Icons: SVG icons (no icon library required)
• Design: Inspired by modern glassmorphism trends

---

Made with 💛 and lots of ☕