<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>missClick Homelab</title>
    <link rel="icon" href="favicon.png" type="image/png">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" crossorigin="anonymous"></script>
    <style>
        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .animated-gradient {
            background-size: 200% 200%;
            animation: gradientAnimation 3s infinite;
        }
        .hover-redirect {
            transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        .hover-redirect:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body class="bg-gray-900 text-white">
    <div class="absolute top-4 right-4 flex space-x-4">
        <a href="https://github.com/dtrasca" target="_blank" class="text-white text-3xl">
            <i class="fa-brands fa-github"></i>
        </a>
        <a href="https://t.me/DariusTK" target="_blank" class="text-white text-3xl">
            <i class="fa-brands fa-telegram"></i>
        </a>
    </div>
    <div class="flex flex-col items-center justify-center min-h-screen p-6">
        <div class="text-center max-w-3xl p-8 bg-gray-800 rounded-2xl shadow-xl">
            <h1 class="text-5xl font-extrabold bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text text-transparent animated-gradient">Welcome to missClick</h1>
            <p class="mt-6 text-gray-300 text-lg">This website showcases my homelab journey, where I experiment with new technologies, self-host services, and optimize my setup.</p>
        </div>
        <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl">
            <a href="https://app.lizardbyte.dev/Sunshine/?lng=en" target="_blank" class="hover-redirect bg-gray-800 p-6 rounded-lg shadow-lg text-center">
                <i class="fa-solid fa-gamepad text-4xl text-blue-400"></i>
                <h2 class="mt-4 text-xl font-bold">Cloud Gaming</h2>
                <p class="mt-2 text-gray-400">Self-hosted game streaming for low-latency gaming.</p>
            </a>
            <a href="https://owncloud.com/" target="_blank" class="hover-redirect bg-gray-800 p-6 rounded-lg shadow-lg text-center">
                <i class="fa-solid fa-hdd text-4xl text-green-400"></i>
                <h2 class="mt-4 text-xl font-bold">Private Cloud</h2>
                <p class="mt-2 text-gray-400">Self-hosted drive for personal file storage and access.</p>
            </a>
            <a href="https://immich.app/" target="_blank" class="hover-redirect bg-gray-800 p-6 rounded-lg shadow-lg text-center">
                <i class="fa-solid fa-camera text-4xl text-yellow-400"></i>
                <h2 class="mt-4 text-xl font-bold">Media Management</h2>
                <p class="mt-2 text-gray-400">Organized and secure photo & video hosting.</p>
            </a>
            <a href="https://jellyfin.org/" target="_blank" class="hover-redirect bg-gray-800 p-6 rounded-lg shadow-lg text-center">
                <i class="fa-solid fa-tv text-4xl text-red-400"></i>
                <h2 class="mt-4 text-xl font-bold">Media Streaming</h2>
                <p class="mt-2 text-gray-400">Host and stream your own media content.</p>
            </a>
            <a href="https://www.home-assistant.io/" target="_blank" class="hover-redirect bg-gray-800 p-6 rounded-lg shadow-lg text-center">
                <i class="fa-solid fa-house text-4xl text-purple-400"></i>
                <h2 class="mt-4 text-xl font-bold">Home Automation</h2>
                <p class="mt-2 text-gray-400">Automate devices and routines.</p>
            </a>
            <a href="https://tuxcare.com/blog/securing-linux-network-understanding-attack-vectors-and-countermeasures/" target="_blank" class="hover-redirect bg-gray-800 p-6 rounded-lg shadow-lg text-center">
                <i class="fa-solid fa-shield-alt text-4xl text-teal-400"></i>
                <h2 class="mt-4 text-xl font-bold">Network Security</h2>
                <p class="mt-2 text-gray-400">Monitor and secure your home network.</p>
            </a>
        </div>
        <a href="https://linuxhandbook.com/homelab/" target="_blank">
            <button class="mt-8 px-8 py-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg shadow-md transition">Learn More</button>
        </a>
    </div>
</body>
</html>
