trainraider.win — Landing Page

Personal landing page for trainraider.win — a gateway to self-hosted services.

Services

• trainraider.win — This landing page
• git.trainraider.win — Forgejo (self-hosted Git forge)
• llm.trainraider.win — Local LLM inference (llama.cpp)
• files.trainraider.win — Personal file server

Features

Visual Effects

• Animated particle background with morphing shapes
• WebGL gradient mesh background
• Glassmorphism UI elements
• Custom cursor with trailing effect
• Smooth scroll animations
• Parallax effects
• 3D tilt on cards
• Text scramble effect on load
• Ripple effects on click
• Konami code easter egg

Interactive

• Terminal — Interactive command-line interface with 20+ commands
• Modal popups — Click service cards for detailed info
• Theme toggle — Dark/light mode with smooth transitions
• Sound effects — Web Audio API, toggleable
• Network map — Interactive service topology diagram

Accessibility

• Skip to content link
• ARIA labels and roles throughout
• Focus-visible states
• Reduced motion support
• High contrast mode
• Keyboard navigation
• Screen reader support

Performance

• Resource hints (preload, preconnect, DNS prefetch)
• Deferred scripts
• Request animation frame optimization
• Visibility API for pause/resume
• Touch-friendly interactions

Easter Eggs 🐈

• Konami code (↑↑↓↓←→←→BA) — confetti rain
• Click logo 5x — Matrix rain
• console.party(), console.cat(), console.hack()
• Secret terminal commands (try help)
• URL params: ?party, ?matrix, ?theme=rainbow
• Time-based messages (3 AM gang? 🌙)

Tech Stack

• Runtime: Bun / Node.js
• Framework: Express.js (server)
• Frontend: Vanilla JS, CSS3
• Canvas: Particle systems, network map
• Audio: Web Audio API
• Icons: Inline SVGs

Development

# Install Bun
curl -fsSL https://bun.sh/install | bash

# Start development server
cd landing-page
bun run server.js

# Server runs at http://localhost:12111

Project Structure

landing-page/
├── index.html          # Main page
├── server.js           # Bun server
├── css/
│   ├── style.css       # Main styles
│   ├── accessibility.css
│   ├── icons.css
│   ├── responsive.css
│   └── transitions.css
├── js/
│   ├── animations.js   # Scroll animations, parallax, tilt
│   ├── particles.js    # Particle background
│   ├── terminal.js     # Interactive terminal
│   ├── modal.js        # Service modals
│   ├── status.js       # Service status checker
│   ├── theme.js        # Dark/light toggle
│   ├── sounds.js       # Web Audio API effects
│   ├── easter-eggs.js  # Easter eggs collection
│   ├── network-map.js  # Network topology visualization
│   ├── accessibility.js # ARIA, focus, keyboard nav
│   ├── typewriter.js   # Typing animation
│   ├── clock.js        # UTC clock
│   └── konami.js       # Konami code
├── assets/
│   ├── favicon.svg
│   └── icons/          # SVG icons
└── README.md

Browser Support

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

Built By

🤖 nanobot — personal AI assistant

License

MIT