<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HipDiscovery • Daily Live Streams & iOS Developer</title>
<meta name="description" content="Daily live streams 4–9 PM CST playing Marvel Rivals, Fortnite & Rocket League. Wisconsin-based multi-streamer and SwiftUI iOS developer.">
<meta property="og:title" content="HipDiscovery • Daily Live Streams & iOS Developer">
<meta property="og:description" content="Live daily 4–9 PM CST across Twitch, YouTube, TikTok & more. Marvel Rivals • Fortnite • Rocket League + SwiftUI apps.">
<meta property="og:image" content="https://hipdiscovery.com/og-image.jpg"> <!-- UPDATE HERE: Add your own OG image later -->
<meta property="og:url" content="https://hipdiscovery.com">
<meta name="theme-color" content="#c084fc">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
:root {
--accent-purple: #c084fc;
--accent-green: #4ade80;
}
body {
font-family: 'Inter', system_ui, sans-serif;
}
.logo-font {
font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif;
font-weight: 700;
letter-spacing: -0.025em;
}
.section-header {
font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif;
font-weight: 600;
letter-spacing: -0.025em;
}
.neon-purple {
box-shadow: 0 0 15px rgb(192 132 252 / 0.3);
}
.neon-green {
box-shadow: 0 0 15px rgb(74 222 128 / 0.3);
}
.platform-btn {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.platform-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.game-card {
transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1),
box-shadow 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.game-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.nav-link {
transition: color 0.2s ease;
}
.nav-link:hover {
color: #c084fc;
}
.stat-number {
font-variant-numeric: tabular-nums;
}
.subtle-grid {
background-image:
linear-gradient(rgba(192, 132, 252, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(192, 132, 252, 0.06) 1px, transparent 1px);
background-size: 60px 60px;
}
.stream-status {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-200">
<!-- STICKY NAV -->
<nav class="sticky top-0 z-50 bg-zinc-950/95 backdrop-blur-lg border-b border-zinc-800">
<div class="max-w-7xl mx-auto px-6">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex items-center gap-x-3">
<div class="w-9 h-9 bg-gradient-to-br from-violet-500 to-emerald-400 rounded-xl flex items-center justify-center">
<span class="text-zinc-950 font-black text-2xl tracking-tighter">HD</span>
</div>
<div>
<span class="logo-font text-2xl font-bold tracking-tighter">HipDiscovery</span>
</div>
</div>
<!-- Desktop Nav -->
<div class="hidden md:flex items-center gap-x-8 text-sm font-medium">
<a href="#streams" class="nav-link text-zinc-300 hover:text-white">Streams</a>
<a href="#games" class="nav-link text-zinc-300 hover:text-white">Games</a>
<a href="#dev" class="nav-link text-zinc-300 hover:text-white">iOS Dev</a>
<a href="#content" class="nav-link text-zinc-300 hover:text-white">Content</a>
</div>
<!-- Desktop CTAs -->
<div class="hidden md:flex items-center gap-x-3">
<a href="https://twitch.tv/HipDiscoveryTV"
target="_blank"
class="px-5 py-2.5 bg-white text-zinc-950 hover:bg-zinc-100 font-semibold text-sm rounded-2xl flex items-center gap-x-2 transition-all active:scale-[0.985]">
<i class="fa-brands fa-twitch"></i>
<span>Watch Live</span>
</a>
<a href="https://discord.gg/k5nD7ec2QY"
target="_blank"
class="px-5 py-2.5 border border-zinc-700 hover:bg-zinc-900 font-semibold text-sm rounded-2xl flex items-center gap-x-2 transition-all">
<i class="fa-brands fa-discord"></i>
<span>Join Discord</span>
</a>
</div>
<!-- Mobile Menu Button -->
<button id="mobile-menu-btn"
class="md:hidden w-10 h-10 flex items-center justify-center text-zinc-400 hover:text-white">
<i class="fa-solid fa-bars text-xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden border-t border-zinc-800 bg-zinc-950">
<div class="px-6 py-6 flex flex-col gap-y-4 text-sm font-medium">
<a href="#streams" class="py-2 text-zinc-300">Streams</a>
<a href="#games" class="py-2 text-zinc-300">Games</a>
<a href="#dev" class="py-2 text-zinc-300">iOS Dev</a>
<a href="#content" class="py-2 text-zinc-300">Content</a>
<div class="pt-4 border-t border-zinc-800 flex flex-col gap-y-3">
<a href="https://twitch.tv/HipDiscoveryTV" target="_blank"
class="w-full py-3 bg-white text-zinc-950 font-semibold rounded-2xl flex items-center justify-center gap-x-2">
<i class="fa-brands fa-twitch"></i>
<span>Watch Live on Twitch</span>
</a>
<a href="https://discord.gg/k5nD7ec2QY" target="_blank"
class="w-full py-3 border border-zinc-700 font-semibold rounded-2xl flex items-center justify-center gap-x-2">
<i class="fa-brands fa-discord"></i>
<span>Join the Discord</span>
</a>
</div>
</div>
</div>
</nav>
<!-- HERO -->
<header class="relative pt-12 pb-16 md:pt-16 md:pb-20 border-b border-zinc-800 overflow-hidden">
<div class="max-w-5xl mx-auto px-6 text-center">
<!-- Live Status -->
<div class="inline-flex items-center gap-x-2 bg-zinc-900 border border-zinc-800 rounded-full px-4 py-1.5 mb-6">
<div class="w-2 h-2 bg-emerald-400 rounded-full stream-status"></div>
<span class="text-emerald-400 text-sm font-semibold tracking-[0.5px]">LIVE DAILY • 4–9 PM CST</span>
</div>
<h1 class="text-6xl md:text-7xl font-black tracking-tighter leading-none mb-4">
HipDiscovery
</h1>
<p class="max-w-md mx-auto text-xl md:text-2xl text-zinc-400 mb-8">
Multi-streamer & iOS developer.<br>
Daily chaos across <span class="text-white font-semibold">Marvel Rivals, Fortnite & Rocket League</span>.
</p>
<!-- Hero CTAs -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="https://twitch.tv/HipDiscoveryTV"
target="_blank"
class="group w-full sm:w-auto px-8 py-4 bg-white hover:bg-zinc-100 active:bg-zinc-200 transition-all text-zinc-950 font-bold text-lg rounded-3xl flex items-center justify-center gap-x-3 shadow-xl shadow-white/10">
<i class="fa-brands fa-twitch text-xl group-active:scale-95 transition-transform"></i>
<span>Watch Live Now</span>
</a>
<a href="https://discord.gg/k5nD7ec2QY"
target="_blank"
class="w-full sm:w-auto px-8 py-4 border border-zinc-700 hover:bg-zinc-900 font-semibold text-lg rounded-3xl flex items-center justify-center gap-x-3 transition-all">
<i class="fa-brands fa-discord text-xl"></i>
<span>Join Discord</span>
</a>
</div>
<p class="mt-6 text-sm text-zinc-500">
Also streaming on <span class="font-medium text-zinc-400">YouTube • TikTok • Kick • Trovo</span>
</p>
</div>
</header>
<!-- ABOUT -->
<section id="about" class="max-w-4xl mx-auto px-6 pt-16 pb-12">
<div class="max-w-2xl">
<h2 class="section-header text-4xl tracking-tighter font-semibold mb-4">Hey, I'm HipDiscovery.</h2>
<div class="text-lg text-zinc-400 space-y-4">
<p>Wisconsin-based multi-streamer and indie iOS developer. I go live <span class="font-semibold text-white">every day from 4–9 PM CST</span> playing Marvel Rivals, Fortnite, and Rocket League across every major platform.</p>
<p>When I'm not on stream, I'm building clean, production-ready SwiftUI apps. This site is my new home base — replacing the old Linktree.</p>
</div>
</div>
</section>
<!-- STREAMING HUB -->
<section id="streams" class="bg-zinc-900 border-y border-zinc-800 py-16">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-y-4 mb-10">
<div>
<h2 class="section-header text-4xl tracking-tighter font-semibold">Streaming Hub</h2>
<p class="text-zinc-400 mt-1">Daily 4:00 PM – 9:00 PM CST • Multi-platform</p>
</div>
<a href="https://twitch.tv/HipDiscoveryTV" target="_blank"
class="inline-flex items-center gap-x-2 text-sm font-semibold text-emerald-400 hover:text-emerald-300 transition-colors">
<span>OPEN TWITCH</span>
<i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>
</div>
<!-- Schedule -->
<div class="bg-zinc-950 border border-zinc-800 rounded-3xl p-8 mb-8">
<div class="flex items-center justify-between flex-wrap gap-y-4">
<div>
<div class="uppercase tracking-[2px] text-xs font-semibold text-emerald-400 mb-1">CURRENT SCHEDULE</div>
<div class="text-3xl font-semibold tracking-tighter">4:00 PM – 9:00 PM CST</div>
<div class="text-zinc-400">Every single day • No exceptions</div>
</div>
<div class="px-5 py-2 bg-emerald-950 text-emerald-400 border border-emerald-900 rounded-2xl text-sm font-medium flex items-center gap-x-2">
<i class="fa-solid fa-calendar-check"></i>
<span>Live right now on most days</span>
</div>
</div>
</div>
<!-- Platforms Grid -->
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
<!-- Twitch -->
<a href="https://twitch.tv/HipDiscoveryTV" target="_blank"
class="group platform-btn flex items-center gap-x-3 bg-zinc-950 border border-zinc-800 hover:border-violet-500/60 rounded-2xl px-5 py-4">
<i class="fa-brands fa-twitch text-3xl text-violet-400"></i>
<div>
<div class="font-semibold">Twitch</div>
<div class="text-xs text-zinc-500">Primary • Live + VODs</div>
</div>
</a>
<!-- YouTube -->
<a href="https://www.youtube.com/channel/UCFA6P1XexUagz2SF0jzmANw" target="_blank"
class="group platform-btn flex items-center gap-x-3 bg-zinc-950 border border-zinc-800 hover:border-red-500/60 rounded-2xl px-5 py-4">
<i class="fa-brands fa-youtube text-3xl text-red-500"></i>
<div>
<div class="font-semibold">YouTube</div>
<div class="text-xs text-zinc-500">@hipdiscovery • VODs + Shorts</div>
</div>
</a>
<!-- TikTok -->
<a href="https://www.tiktok.com/@hipdiscovery" target="_blank"
class="group platform-btn flex items-center gap-x-3 bg-zinc-950 border border-zinc-800 hover:border-zinc-400 rounded-2xl px-5 py-4">
<i class="fa-brands fa-tiktok text-3xl"></i>
<div>
<div class="font-semibold">TikTok</div>
<div class="text-xs text-zinc-500">@hipdiscovery • Clips</div>
</div>
</a>
<!-- Kick -->
<a href="https://kick.com/hipdiscovery" target="_blank"
class="group platform-btn flex items-center gap-x-3 bg-zinc-950 border border-zinc-800 hover:border-emerald-500/60 rounded-2xl px-5 py-4">
<i class="fa-solid fa-play text-3xl text-emerald-400"></i>
<div>
<div class="font-semibold">Kick</div>
<div class="text-xs text-zinc-500">Backup stream</div>
</div>
</a>
<!-- X / Twitter -->
<a href="https://x.com/hipdiscovery" target="_blank"
class="group platform-btn flex items-center gap-x-3 bg-zinc-950 border border-zinc-800 hover:border-sky-400/60 rounded-2xl px-5 py-4">
<i class="fa-brands fa-x-twitter text-3xl"></i>
<div>
<div class="font-semibold">X</div>
<div class="text-xs text-zinc-500">@hipdiscovery</div>
</div>
</a>
</div>
<div class="mt-4 text-center">
<p class="text-xs text-zinc-500">Also on Instagram, Facebook, Threads, Snapchat & Trovo • Creator Code: <span class="font-mono font-semibold text-emerald-400">hipdiscovery</span></p>
</div>
</div>
</section>
<!-- GAMES -->
<section id="games" class="max-w-6xl mx-auto px-6 py-16">
<div class="mb-10">
<h2 class="section-header text-4xl tracking-tighter font-semibold mb-2">Games I Play</h2>
<p class="text-zinc-400">The three titles you’ll see me on stream every week.</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<!-- Marvel Rivals -->
<div class="game-card bg-zinc-900 border border-zinc-800 rounded-3xl p-7 group">
<div class="flex items-center gap-x-4 mb-5">
<div class="w-12 h-12 bg-violet-500/10 text-violet-400 rounded-2xl flex items-center justify-center text-3xl">🦸</div>
<div>
<h3 class="font-semibold text-2xl tracking-tight">Marvel Rivals</h3>
<p class="text-sm text-violet-400">Hero shooter • Competitive</p>
</div>
</div>
<p class="text-zinc-400 text-[15px]">Fast-paced 6v6 hero shooter with insane team plays, seasonal drops, and constant new characters. My main game right now.</p>
<div class="mt-6 pt-6 border-t border-zinc-800 text-xs text-zinc-500 flex items-center gap-x-2">
<span class="px-3 py-1 bg-zinc-950 rounded-full">Twitch Drops Active</span>
</div>
</div>
<!-- Fortnite -->
<div class="game-card bg-zinc-900 border border-zinc-800 rounded-3xl p-7 group">
<div class="flex items-center gap-x-4 mb-5">
<div class="w-12 h-12 bg-emerald-500/10 text-emerald-400 rounded-2xl flex items-center justify-center text-3xl">🏗️</div>
<div>
<h3 class="font-semibold text-2xl tracking-tight">Fortnite</h3>
<p class="text-sm text-emerald-400">Battle Royale • Creative</p>
</div>
</div>
<p class="text-zinc-400 text-[15px]">Zero Build, ranked, and creative maps. Always chasing the next dub with the squad. Creator code active in the item shop.</p>
<div class="mt-6 pt-6 border-t border-zinc-800 flex items-center gap-x-2 text-xs">
<span class="font-mono bg-emerald-950 text-emerald-400 px-3 py-1 rounded-full">CODE: hipdiscovery</span>
</div>
</div>
<!-- Rocket League -->
<div class="game-card bg-zinc-900 border border-zinc-800 rounded-3xl p-7 group">
<div class="flex items-center gap-x-4 mb-5">
<div class="w-12 h-12 bg-sky-500/10 text-sky-400 rounded-2xl flex items-center justify-center text-3xl">🚗</div>
<div>
<h3 class="font-semibold text-2xl tracking-tight">Rocket League</h3>
<p class="text-sm text-sky-400">Car soccer • Aerial chaos</p>
</div>
</div>
<p class="text-zinc-400 text-[15px]">The most satisfying game ever made. Aerial goals, chaotic 3v3s, and ranked grinding. Pure mechanical fun.</p>
</div>
</div>
</section>
<!-- iOS DEV -->
<section id="dev" class="bg-zinc-900 border-y border-zinc-800 py-16">
<div class="max-w-5xl mx-auto px-6">
<div class="grid md:grid-cols-12 gap-x-12 items-center">
<div class="md:col-span-5 mb-10 md:mb-0">
<div class="inline-block px-4 py-1.5 rounded-2xl bg-white/5 text-xs font-semibold tracking-widest mb-4">SIDE QUEST</div>
<h2 class="section-header text-4xl tracking-tighter font-semibold leading-none">iOS Developer</h2>
<p class="mt-4 text-lg text-zinc-400">Building fast, beautiful SwiftUI apps with modern architecture and AI assistance.</p>
<div class="mt-8 flex flex-wrap gap-2">
<div class="px-4 py-1.5 text-xs bg-zinc-950 border border-zinc-700 rounded-2xl">SwiftUI</div>
<div class="px-4 py-1.5 text-xs bg-zinc-950 border border-zinc-700 rounded-2xl">Xcode</div>
<div class="px-4 py-1.5 text-xs bg-zinc-950 border border-zinc-700 rounded-2xl">Swift</div>
<div class="px-4 py-1.5 text-xs bg-zinc-950 border border-zinc-700 rounded-2xl">App Store Ready</div>
</div>
</div>
<div class="md:col-span-7">
<div class="space-y-4">
<div class="bg-zinc-950 border border-zinc-800 rounded-3xl p-6">
<div class="font-semibold mb-1">Featured Projects</div>
<div class="text-sm text-zinc-400 space-y-3 mt-3">
<div class="flex justify-between items-center">
<span>Tic Tac Toe (SwiftUI)</span>
<span class="text-xs px-3 py-1 bg-zinc-900 rounded-full">Complete</span>
</div>
<div class="flex justify-between items-center">
<span>Bills & Subscriptions Tracker</span>
<span class="text-xs px-3 py-1 bg-zinc-900 rounded-full">In Progress</span>
</div>
</div>
<p class="text-xs text-zinc-500 mt-4">More apps coming to the App Store soon. I use AI heavily to ship production-quality code fast.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- LATEST CONTENT -->
<section id="content" class="max-w-6xl mx-auto px-6 py-16">
<div class="flex items-end justify-between mb-8">
<div>
<h2 class="section-header text-4xl tracking-tighter font-semibold">Latest Content</h2>
<p class="text-zinc-400">Catch the best moments from stream</p>
</div>
<a href="https://www.youtube.com/channel/UCFA6P1XexUagz2SF0jzmANw" target="_blank"
class="hidden md:flex items-center gap-x-2 text-sm font-semibold text-violet-400 hover:text-violet-300">
VIEW ALL ON YOUTUBE <i class="fa-solid fa-arrow-right ml-1"></i>
</a>
</div>
<div class="grid md:grid-cols-3 gap-6">
<a href="https://www.youtube.com/channel/UCFA6P1XexUagz2SF0jzmANw" target="_blank"
class="group block bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-3xl p-6 transition-all">
<div class="flex items-center gap-x-3 mb-4">
<i class="fa-brands fa-youtube text-red-500 text-2xl"></i>
<span class="font-semibold">YouTube Channel</span>
</div>
<p class="text-sm text-zinc-400">Full VODs, highlights, and shorts from every stream. New uploads almost daily.</p>
<div class="mt-6 text-xs text-red-400 font-medium group-hover:underline">Browse channel →</div>
</a>
<a href="https://www.tiktok.com/@hipdiscovery" target="_blank"
class="group block bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-3xl p-6 transition-all">
<div class="flex items-center gap-x-3 mb-4">
<i class="fa-brands fa-tiktok text-2xl"></i>
<span class="font-semibold">TikTok Highlights</span>
</div>
<p class="text-sm text-zinc-400">Best clips, funny moments, and quick tips from stream. Perfect for quick dopamine.</p>
<div class="mt-6 text-xs text-white/60 font-medium group-hover:underline">Watch on TikTok →</div>
</a>
<a href="https://twitch.tv/HipDiscoveryTV/videos" target="_blank"
class="group block bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-3xl p-6 transition-all">
<div class="flex items-center gap-x-3 mb-4">
<i class="fa-brands fa-twitch text-violet-400 text-2xl"></i>
<span class="font-semibold">Twitch VODs</span>
</div>
<p class="text-sm text-zinc-400">Every stream is saved. Re-watch full sessions or catch what you missed.</p>
<div class="mt-6 text-xs text-violet-400 font-medium group-hover:underline">Browse VODs →</div>
</a>
</div>
</section>
<!-- COMMUNITY / DISCORD CTA -->
<section id="community" class="bg-zinc-900 border-y border-zinc-800 py-16">
<div class="max-w-3xl mx-auto px-6 text-center">
<div class="mx-auto w-16 h-16 bg-gradient-to-br from-violet-500 to-emerald-400 rounded-2xl flex items-center justify-center mb-6">
<i class="fa-brands fa-discord text-4xl text-zinc-950"></i>
</div>
<h2 class="section-header text-4xl tracking-tighter font-semibold mb-3">Join the HipDiscovery Discord</h2>
<p class="text-xl text-zinc-400 max-w-md mx-auto">Get stream alerts, chat with other viewers, share clips, and be part of the community that actually shows up every day.</p>
<a href="https://discord.gg/k5nD7ec2QY" target="_blank"
class="mt-8 inline-flex items-center justify-center gap-x-3 px-10 py-4 bg-white hover:bg-zinc-100 active:bg-zinc-200 text-zinc-950 font-bold text-lg rounded-3xl transition-all shadow-xl">
<i class="fa-brands fa-discord"></i>
<span>Join the Server</span>
</a>
<p class="mt-4 text-xs text-zinc-500">Free • Active chat during streams • Game nights & giveaways</p>
</div>
</section>
<!-- FINAL CTA BAR -->
<div class="border-b border-zinc-800">
<div class="max-w-5xl mx-auto px-6 py-8 flex flex-col md:flex-row items-center justify-between gap-y-4">
<div>
<div class="font-semibold">Ready to catch the next stream?</div>
<div class="text-sm text-zinc-400">We go live every day at 4 PM CST.</div>
</div>
<a href="https://twitch.tv/HipDiscoveryTV" target="_blank"
class="px-8 py-3.5 bg-emerald-400 hover:bg-emerald-300 active:bg-emerald-500 transition-all text-emerald-950 font-bold rounded-3xl flex items-center gap-x-2 text-sm">
<span>WATCH LIVE ON TWITCH</span>
</a>
</div>
</div>
<!-- FOOTER -->
<footer class="max-w-6xl mx-auto px-6 py-12 text-sm">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-y-6 text-zinc-400">
<div>
<div class="font-semibold text-white">HipDiscovery</div>
<div class="text-xs mt-1">© 2026 • Wisconsin, USA</div>
</div>
<div class="flex flex-wrap gap-x-6 gap-y-2 text-xs">
<a href="mailto:support@hipdiscovery.com" class="hover:text-white">support@hipdiscovery.com</a>
<a href="https://linktr.ee/HipDiscovery" class="hover:text-white">Old Linktree</a>
<span class="hidden md:inline text-zinc-700">•</span>
<span class="text-xs">Creator Code: <span class="font-mono text-emerald-400">hipdiscovery</span></span>
</div>
</div>
<div class="mt-8 pt-8 border-t border-zinc-800 text-[10px] text-zinc-500 flex flex-col md:flex-row gap-y-1 md:items-center justify-between">
<div>Single-file site built for speed & easy edits. Deployed on Cloudflare Pages.</div>
<div class="flex items-center gap-x-4">
<span>Built by HipDiscovery</span>
</div>
</div>
</footer>
<script>
// Tailwind script
function initializeTailwind() {
document.documentElement.style.setProperty('--accent-purple', '#c084fc');
document.documentElement.style.setProperty('--accent-green', '#4ade80');
}
// Mobile menu
function initMobileMenu() {
const btn = document.getElementById('mobile-menu-btn');
const menu = document.getElementById('mobile-menu');
if (!btn || !menu) return;
btn.addEventListener('click', () => {
const isHidden = menu.classList.contains('hidden');
if (isHidden) {
menu.classList.remove('hidden');
btn.innerHTML = '<i class="fa-solid fa-times text-xl"></i>';
} else {
menu.classList.add('hidden');
btn.innerHTML = '<i class="fa-solid fa-bars text-xl"></i>';
}
});
// Close menu when clicking a link
menu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
menu.classList.add('hidden');
btn.innerHTML = '<i class="fa-solid fa-bars text-xl"></i>';
});
});
}
// Smooth scroll for anchor links
function initSmoothScroll() {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const target = document.querySelector(this.getAttribute('href'));
if (target) {
e.preventDefault();
const navHeight = 64;
const elementPosition = target.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.scrollY - navHeight;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
});
});
}
// Keyboard accessibility
function initKeyboardSupport() {
document.addEventListener('keydown', function(e) {
if (e.key === '/' && document.activeElement.tagName === 'BODY') {
e.preventDefault();
const twitchLink = document.querySelector('a[href*="twitch.tv/HipDiscoveryTV"]');
if (twitchLink) twitchLink.click();
}
});
}
// Initialize everything
function init() {
initializeTailwind();
initMobileMenu();
initSmoothScroll();
initKeyboardSupport();
// Optional: Add subtle console message for devs
console.log('%c[HipDiscovery] Site ready. Edit index.html directly. All CTAs point to correct live links.', 'color:#3f3f46');
}
// Boot
window.onload = init;
</script>
</body>
</html>