lemonlink/README.md

# 🍋 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!

![LemonLink Preview](preview.png)

## ✨ 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:

```bash
# 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`:

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

Build and run:

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

### Option 3: Nginx Configuration

```nginx
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:

```html
<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:

```html
<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:

```html
<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:

```html
<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

```html
<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:

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

## 🎨 Color Customization

Edit CSS variables in `styles.css`:

```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:

```nginx
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](https://fonts.google.com) (Outfit & Space Grotesk)
- Icons: SVG icons (no icon library required)
- Design: Inspired by modern glassmorphism trends

---

Made with 💛 and lots of ☕