diff --git a/CNAME b/CNAME
new file mode 100644
index 0000000..ecbae69
--- /dev/null
+++ b/CNAME
@@ -0,0 +1 @@
+fos.iww.my.id
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6ae1b14
--- /dev/null
+++ b/index.html
@@ -0,0 +1,844 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A curated collection of free resources for open source projects and maintainers">
+    <title>Free for Open Source - Free Resources for OSS Projects</title>
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+
+    <style>
+        * {
+            font-family: 'Poppins', sans-serif;
+        }
+
+        body {
+            overflow-x: hidden;
+        }
+
+        /* Animated Gradient Background */
+        .gradient-bg {
+            background: linear-gradient(-45deg, #1e40af, #3b82f6, #06b6d4, #0891b2);
+            background-size: 400% 400%;
+            animation: gradientShift 15s ease infinite;
+        }
+
+        @keyframes gradientShift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
+        .dark .gradient-bg {
+            background: linear-gradient(-45deg, #0f172a, #1e293b, #0c4a6e, #164e63);
+            background-size: 400% 400%;
+            animation: gradientShift 15s ease infinite;
+        }
+
+        /* Floating Animation */
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+
+        @keyframes floating {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+        }
+
+        /* Card Hover Effects */
+        .card-interactive {
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .card-interactive::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
+            transition: left 0.5s;
+        }
+
+        .card-interactive:hover::before {
+            left: 100%;
+        }
+
+        .card-interactive:hover {
+            transform: translateY(-10px) scale(1.02);
+            box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.4);
+        }
+
+        /* Glowing Effect */
+        .glow {
+            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
+        }
+
+        .glow:hover {
+            box-shadow: 0 0 30px rgba(59, 130, 246, 0.8), 0 0 60px rgba(59, 130, 246, 0.4);
+        }
+
+        /* Pulse Animation */
+        .pulse-slow {
+            animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+
+        /* Fade In Animations */
+        .fade-in-up {
+            animation: fadeInUp 0.8s ease-out;
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* Scale Animation */
+        .scale-in {
+            animation: scaleIn 0.5s ease-out;
+        }
+
+        @keyframes scaleIn {
+            from {
+                opacity: 0;
+                transform: scale(0.9);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        /* Interactive Button */
+        .btn-interactive {
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+        }
+
+        .btn-interactive::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+
+        .btn-interactive:hover::after {
+            width: 300px;
+            height: 300px;
+        }
+
+        .btn-interactive:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.5);
+        }
+
+        /* Search Box Animation */
+        .search-box {
+            transition: all 0.3s ease;
+        }
+
+        .search-box:focus {
+            transform: scale(1.03);
+            box-shadow: 0 10px 30px -10px rgba(59, 130, 246, 0.5);
+        }
+
+        /* Category Badge Interactive */
+        .category-badge {
+            transition: all 0.3s ease;
+            position: relative;
+        }
+
+        .category-badge:hover {
+            transform: translateY(-3px);
+        }
+
+        .category-badge.active {
+            box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
+        }
+
+        /* Stats Counter */
+        .stat-number {
+            font-size: 3rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, #3b82f6, #06b6d4);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        /* Parallax Effect */
+        .parallax {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+
+        /* Ripple Effect */
+        .ripple {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .ripple::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 5px;
+            height: 5px;
+            background: rgba(255, 255, 255, 0.5);
+            opacity: 0;
+            border-radius: 100%;
+            transform: scale(1, 1) translate(-50%);
+            transform-origin: 50% 50%;
+        }
+
+        @keyframes ripple {
+            0% {
+                transform: scale(0, 0);
+                opacity: 1;
+            }
+            20% {
+                transform: scale(25, 25);
+                opacity: 1;
+            }
+            100% {
+                opacity: 0;
+                transform: scale(40, 40);
+            }
+        }
+
+        .ripple:focus:not(:active)::after {
+            animation: ripple 1s ease-out;
+        }
+
+        /* Skeleton Loader */
+        .skeleton {
+            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+            background-size: 200% 100%;
+            animation: loading 1.5s ease-in-out infinite;
+        }
+
+        @keyframes loading {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+
+        /* Scroll Progress Bar */
+        .progress-bar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #3b82f6, #06b6d4);
+            z-index: 9999;
+            transition: width 0.2s ease;
+        }
+
+        /* Icon Bounce */
+        .icon-bounce:hover {
+            animation: bounce 0.5s;
+        }
+
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+
+        /* Glass Morphism */
+        .glass {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .dark .glass {
+            background: rgba(0, 0, 0, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
+
+    <!-- Progress Bar -->
+    <div class="progress-bar" id="progressBar" style="width: 0%"></div>
+
+    <!-- Navigation -->
+    <nav class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg shadow-lg sticky top-0 z-50 transition-all duration-300">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-16">
+                <div class="flex items-center space-x-3 group">
+                    <div class="relative">
+                        <i class="fas fa-gift text-3xl text-blue-600 dark:text-blue-400 icon-bounce transition-all"></i>
+                        <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full animate-ping"></div>
+                    </div>
+                    <h1 class="text-xl font-bold text-gray-900 dark:text-white">Free for Open Source</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <a href="https://github.com/iwewe" target="_blank"
+                       class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-all icon-bounce">
+                        <i class="fab fa-github text-2xl"></i>
+                    </a>
+                    <button id="themeToggle" class="p-2 rounded-lg bg-gradient-to-r from-blue-500 to-cyan-500 text-white hover:from-blue-600 hover:to-cyan-600 transition-all btn-interactive">
+                        <i class="fas fa-moon dark:hidden"></i>
+                        <i class="fas fa-sun hidden dark:inline"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="gradient-bg py-24 px-4 relative overflow-hidden">
+        <!-- Floating Elements -->
+        <div class="absolute top-20 left-10 w-20 h-20 bg-white/10 rounded-full blur-xl floating" style="animation-delay: 0s"></div>
+        <div class="absolute top-40 right-20 w-32 h-32 bg-white/10 rounded-full blur-xl floating" style="animation-delay: 1s"></div>
+        <div class="absolute bottom-20 left-1/3 w-24 h-24 bg-white/10 rounded-full blur-xl floating" style="animation-delay: 2s"></div>
+
+        <div class="max-w-7xl mx-auto text-center relative z-10">
+            <div class="fade-in-up">
+                <div class="inline-block mb-6">
+                    <span class="bg-white/20 backdrop-blur-sm text-white px-6 py-2 rounded-full text-sm font-semibold shadow-lg">
+                        <i class="fas fa-rocket mr-2"></i>100% Free Resources
+                    </span>
+                </div>
+                <h2 class="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
+                    Free Resources for<br/>
+                    <span class="bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent">Open Source</span>
+                </h2>
+                <p class="text-xl md:text-2xl text-white/90 mb-10 max-w-3xl mx-auto leading-relaxed">
+                    My curated collection of free software, cloud services, tools, and infrastructure for open source projects and maintainers. Discover free software to supercharge your projects
+                </p>
+            </div>
+
+            </div>
+    </section>
+
+    <!-- Stats Section -->
+    <section class="py-16 bg-white dark:bg-gray-800 transition-colors duration-300 relative">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="text-center group scale-in" style="animation-delay: 0s">
+                    <div class="bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 p-8 rounded-2xl card-interactive">
+                        <div class="stat-number" id="totalResources">0</div>
+                        <div class="text-gray-600 dark:text-gray-300 mt-3 text-lg font-semibold">Free Resources</div>
+                        <i class="fas fa-gift text-5xl text-blue-500/20 dark:text-blue-400/20 mt-4"></i>
+                    </div>
+                </div>
+                <div class="text-center group scale-in" style="animation-delay: 0.1s">
+                    <div class="bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 p-8 rounded-2xl card-interactive">
+                        <div class="stat-number" id="totalCategories">0</div>
+                        <div class="text-gray-600 dark:text-gray-300 mt-3 text-lg font-semibold">Categories</div>
+                        <i class="fas fa-layer-group text-5xl text-blue-500/20 dark:text-blue-400/20 mt-4"></i>
+                    </div>
+                </div>
+                <div class="text-center group scale-in" style="animation-delay: 0.2s">
+                    <div class="bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 p-8 rounded-2xl card-interactive">
+                        <div class="text-5xl font-bold text-blue-600 dark:text-blue-400 pulse-slow">
+                            <i class="fas fa-heart"></i>
+                        </div>
+                        <div class="text-gray-600 dark:text-gray-300 mt-3 text-lg font-semibold">Open Source</div>
+                        <i class="fas fa-code text-5xl text-blue-500/20 dark:text-blue-400/20 mt-4"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Search and Filter Section -->
+    <section class="py-12 bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex flex-col gap-6">
+                <div class="relative max-w-2xl mx-auto w-full">
+                    <input type="text" id="searchInput"
+                           placeholder="🔍 Search resources by name, category, or description..."
+                           class="search-box w-full px-6 py-4 pl-14 rounded-2xl border-2 border-blue-200 dark:border-blue-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none text-lg shadow-lg">
+                    <i class="fas fa-search absolute left-5 top-5 text-blue-500 dark:text-blue-400 text-xl"></i>
+                    <div id="searchCount" class="absolute right-5 top-5 text-sm text-gray-500 dark:text-gray-400 font-semibold"></div>
+                </div>
+                <div class="flex flex-wrap justify-center gap-3" id="categoryFilters">
+                    <!-- Categories will be dynamically added here -->
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Resources Section -->
+    <section class="py-12 bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div id="resourcesContainer">
+                <!-- Resources will be dynamically added here -->
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gradient-to-r from-gray-900 to-gray-800 dark:from-gray-950 dark:to-gray-900 text-white py-12 transition-colors duration-300">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center">
+                <div class="mb-6">
+                    <i class="fas fa-gift text-5xl text-blue-400 mb-4 inline-block icon-bounce"></i>
+                </div>
+                <p class="text-lg mb-4">
+                    <i class="fas fa-heart text-red-500 mr-2 pulse-slow"></i>
+                    Part of the <a href="https://cloudstudy.net/" target="_blank" class="text-blue-400 hover:text-blue-300 font-semibold transition-colors">Cloud Study Network</a> community
+                </p>
+                <p class="text-gray-400 mb-6">
+                    Licensed under the <a href="LICENSE.md" class="text-blue-400 hover:text-blue-300 transition-colors">MIT License</a>
+                </p>
+                <div class="flex justify-center gap-6">
+                    <a href="https://github.com/iwewe/" target="_blank"
+                       class="w-12 h-12 bg-gray-800 hover:bg-blue-600 rounded-full flex items-center justify-center transition-all icon-bounce glow">
+                        <i class="fab fa-github text-2xl"></i>
+                    </a>
+                    <a href="https://www.iww.my.id" target="_blank"
+                       class="w-12 h-12 bg-gray-800 hover:bg-blue-600 rounded-full flex items-center justify-center transition-all icon-bounce glow">
+                        <i class="fas fa-globe text-2xl"></i>
+                    </a>
+                    <a href="mailto://iwewe@iwww.my.id" target="_blank"
+                       class="w-12 h-12 bg-gray-800 hover:bg-blue-600 rounded-full flex items-center justify-center transition-all icon-bounce glow">
+                        <i class="fas fa-envelope text-2xl"></i>
+                    </a>
+                </div>
+                <div class="mt-8 text-gray-500 text-sm">
+                    <p>Made with <i class="fas fa-heart text-red-500"></i> for Open Source Community</p>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Scroll to Top Button -->
+    <button id="scrollTop" class="fixed bottom-8 right-8 w-14 h-14 bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-full shadow-2xl opacity-0 pointer-events-none transition-all hover:scale-110 z-50 glow">
+        <i class="fas fa-arrow-up"></i>
+    </button>
+
+    <script>
+        // Resources Data
+        const resources = [
+            {
+                name: "GitHub Free",
+                category: "Developer Tools & Hosting",
+                description: "Free hosting, security updates, and automation for open source projects.",
+                url: "https://github.com/pricing",
+                icon: "fab fa-github"
+            },
+            {
+                name: "GitHub Sponsors",
+                category: "Developer Tools & Hosting",
+                description: "Financial support for open source maintainers.",
+                url: "https://github.com/sponsors",
+                icon: "fas fa-hand-holding-heart"
+            },
+            {
+                name: "Vercel for OSS",
+                category: "Developer Tools & Hosting",
+                description: "Free hosting and serverless functions for open source projects.",
+                url: "https://vercel.com/oss",
+                icon: "fas fa-server"
+            },
+            {
+                name: "JetBrains Open Source Support",
+                category: "Developer Tools & Hosting",
+                description: "Free access to JetBrains tools for open source projects.",
+                url: "https://www.jetbrains.com/community/opensource/",
+                icon: "fas fa-code"
+            },
+            {
+                name: "GitLab for Open Source",
+                category: "Developer Tools & Hosting",
+                description: "Free GitLab Ultimate features, including 50,000 compute minutes.",
+                url: "https://about.gitlab.com/solutions/open-source/",
+                icon: "fab fa-gitlab"
+            },
+            {
+                name: "Docker-Sponsored Open Source Program",
+                category: "Developer Tools & Hosting",
+                description: "Free Docker benefits for open source projects, including verified badges, repository logo customization, insights, analytics, and more.",
+                url: "https://docs.docker.com/docker-hub/repos/manage/trusted-content/dsos-program/",
+                icon: "fab fa-docker"
+            },
+            {
+                name: "CodeRabbit for Open Source",
+                category: "Developer Tools & Hosting",
+                description: "Free AI-driven code reviews for public repositories on GitHub and GitLab.",
+                url: "https://www.coderabbit.ai/pricing",
+                icon: "fas fa-robot"
+            },
+            {
+                name: "BrowserStack for Open Source",
+                category: "Developer Tools & Hosting",
+                description: "Lifetime access to BrowserStack's testing tools for open source projects, with unlimited testing and real device access.",
+                url: "https://www.browserstack.com/open-source",
+                icon: "fas fa-mobile-alt"
+            },
+            {
+                name: "CodeReviewBot for Open Source",
+                category: "Developer Tools & Hosting",
+                description: "Free AI-powered code reviews with 100 reviews/month for public repositories.",
+                url: "https://codereviewbot.ai/",
+                icon: "fas fa-search-plus"
+            },
+            {
+                name: "Sentry for Open Source",
+                category: "Monitoring & Security",
+                description: "Free error tracking and performance monitoring.",
+                url: "https://sentry.io/for/open-source/",
+                icon: "fas fa-bug"
+            },
+            {
+                name: "1Password for Open Source",
+                category: "Monitoring & Security",
+                description: "Free Teams account for secure credential storage.",
+                url: "https://github.com/1Password/for-open-source",
+                icon: "fas fa-lock"
+            },
+            {
+                name: "SignPath for Open Source Projects",
+                category: "Monitoring & Security",
+                description: "Open source projects can apply for a free code signing certificate through the SignPath Foundation.",
+                url: "https://about.signpath.io/product/open-source",
+                icon: "fas fa-certificate"
+            },
+            {
+                name: "SonarCloud for Open Source",
+                category: "Monitoring & Security",
+                description: "Free static code analysis for open source projects. Includes unlimited public repositories, support for 30 languages, DevOps integration, and up to 50k lines in private projects.",
+                url: "https://www.sonarsource.com/plans-and-pricing/sonarcloud/",
+                icon: "fas fa-shield-alt"
+            },
+            {
+                name: "AWS Promotional Credits for Open Source",
+                category: "Cloud & Infrastructure",
+                description: "Free AWS credits for CI/CD, performance testing, and artifact storage.",
+                url: "https://aws.amazon.com/blogs/opensource/aws-promotional-credits-open-source-projects/",
+                icon: "fab fa-aws"
+            },
+            {
+                name: "Azure Credits for Open Source",
+                category: "Cloud & Infrastructure",
+                description: "Microsoft Azure credits for development, testing, and infrastructure needs.",
+                url: "https://opensource.microsoft.com/azure-credits/",
+                icon: "fab fa-microsoft"
+            },
+            {
+                name: "Cloudflare Project Alexandria",
+                category: "Cloud & Infrastructure",
+                description: "Free Cloudflare credits and increased resource limits.",
+                url: "https://www.cloudflare.com/en-gb/lp/project-alexandria/",
+                icon: "fas fa-cloud"
+            },
+            {
+                name: "Zulip for Open Source",
+                category: "Communication & Collaboration",
+                description: "Free Zulip Cloud Standard hosting for open source projects.",
+                url: "https://zulip.com/for/open-source/",
+                icon: "fas fa-comments"
+            },
+            {
+                name: "Atlassian Open Source Cloud",
+                category: "Communication & Collaboration",
+                description: "Free access to Atlassian Standard cloud products (Jira, Confluence, Trello, Bitbucket, etc.).",
+                url: "https://www.atlassian.com/software/views/open-source-license-request",
+                icon: "fab fa-atlassian"
+            },
+            {
+                name: "GitHub Copilot Pro for Open Source Maintainers",
+                category: "AI & Automation",
+                description: "Free GitHub Copilot Pro access for maintainers of popular open-source repositories.",
+                url: "https://docs.github.com/en/copilot/managing-copilot/managing-copilot-as-an-individual-subscriber/managing-your-github-copilot-pro-subscription/getting-free-access-to-copilot-pro-as-a-student-teacher-or-maintainer",
+                icon: "fas fa-brain"
+            },
+            {
+                name: "CircleCI for Open Source",
+                category: "CI/CD & Build Tools",
+                description: "Up to 400,000 credits per month for Linux, Arm, and Docker builds; 30,000 credits for Windows, macOS, and private repositories.",
+                url: "https://circleci.com/open-source/",
+                icon: "fas fa-circle-notch"
+            },
+            {
+                name: "Algolia for Open Source",
+                category: "Search & Indexing",
+                description: "Free or discounted Algolia plans for qualifying open source projects.",
+                url: "https://www.algolia.com/for-open-source",
+                icon: "fas fa-search"
+            }
+        ];
+
+        // State
+        let currentFilter = 'all';
+        let searchQuery = '';
+
+        // Get unique categories
+        const categories = [...new Set(resources.map(r => r.category))];
+
+        // Initialize
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeTheme();
+            renderCategoryFilters();
+            renderResources();
+            updateStats();
+            initScrollEffects();
+
+            // Event Listeners
+            document.getElementById('themeToggle').addEventListener('click', toggleTheme);
+            document.getElementById('searchInput').addEventListener('input', handleSearch);
+            document.getElementById('scrollTop').addEventListener('click', scrollToTop);
+        });
+
+        // Theme Management
+        function initializeTheme() {
+            const isDark = localStorage.getItem('theme') === 'dark' ||
+                          (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+            if (isDark) {
+                document.documentElement.classList.add('dark');
+            }
+        }
+
+        function toggleTheme() {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+        }
+
+        // Scroll Effects
+        function initScrollEffects() {
+            window.addEventListener('scroll', () => {
+                // Progress Bar
+                const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+                const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+                const scrolled = (winScroll / height) * 100;
+                document.getElementById('progressBar').style.width = scrolled + '%';
+
+                // Scroll to Top Button
+                const scrollBtn = document.getElementById('scrollTop');
+                if (winScroll > 300) {
+                    scrollBtn.classList.remove('opacity-0', 'pointer-events-none');
+                    scrollBtn.classList.add('opacity-100', 'pointer-events-auto');
+                } else {
+                    scrollBtn.classList.add('opacity-0', 'pointer-events-none');
+                    scrollBtn.classList.remove('opacity-100', 'pointer-events-auto');
+                }
+            });
+        }
+
+        function scrollToTop() {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+
+        // Render Category Filters
+        function renderCategoryFilters() {
+            const container = document.getElementById('categoryFilters');
+
+            const allButton = createFilterButton('🌟 All', 'all', true);
+            container.appendChild(allButton);
+
+            const categoryIcons = {
+                'Developer Tools & Hosting': '💻',
+                'Monitoring & Security': '🔒',
+                'Cloud & Infrastructure': '☁️',
+                'Communication & Collaboration': '💬',
+                'AI & Automation': '🤖',
+                'CI/CD & Build Tools': '⚙️',
+                'Search & Indexing': '🔍'
+            };
+
+            categories.forEach(category => {
+                const icon = categoryIcons[category] || '📦';
+                const button = createFilterButton(`${icon} ${category}`, category, false);
+                container.appendChild(button);
+            });
+        }
+
+        function createFilterButton(label, value, isActive) {
+            const button = document.createElement('button');
+            button.textContent = label;
+            button.className = `category-badge px-6 py-3 rounded-xl text-sm font-semibold transition-all ${
+                isActive
+                    ? 'bg-gradient-to-r from-blue-600 to-cyan-600 text-white shadow-lg active'
+                    : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 shadow-md'
+            }`;
+            button.addEventListener('click', () => {
+                currentFilter = value;
+                updateFilterButtons();
+                renderResources();
+            });
+            return button;
+        }
+
+        function updateFilterButtons() {
+            const buttons = document.querySelectorAll('#categoryFilters button');
+            buttons.forEach((button, index) => {
+                const value = index === 0 ? 'all' : categories[index - 1];
+                if (value === currentFilter) {
+                    button.className = 'category-badge px-6 py-3 rounded-xl text-sm font-semibold bg-gradient-to-r from-blue-600 to-cyan-600 text-white shadow-lg active transition-all';
+                } else {
+                    button.className = 'category-badge px-6 py-3 rounded-xl text-sm font-semibold bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 shadow-md transition-all';
+                }
+            });
+        }
+
+        // Search Handler
+        function handleSearch(e) {
+            searchQuery = e.target.value.toLowerCase();
+            renderResources();
+        }
+
+        // Render Resources
+        function renderResources() {
+            const container = document.getElementById('resourcesContainer');
+            container.innerHTML = '';
+
+            const filteredResources = resources.filter(resource => {
+                const matchesCategory = currentFilter === 'all' || resource.category === currentFilter;
+                const matchesSearch = resource.name.toLowerCase().includes(searchQuery) ||
+                                     resource.description.toLowerCase().includes(searchQuery) ||
+                                     resource.category.toLowerCase().includes(searchQuery);
+                return matchesCategory && matchesSearch;
+            });
+
+            // Update search count
+            document.getElementById('searchCount').textContent =
+                filteredResources.length + ' result' + (filteredResources.length !== 1 ? 's' : '');
+
+            if (filteredResources.length === 0) {
+                container.innerHTML = `
+                    <div class="text-center py-20">
+                        <i class="fas fa-search text-8xl text-blue-200 dark:text-blue-900 mb-6"></i>
+                        <p class="text-2xl text-gray-600 dark:text-gray-400 font-semibold">No resources found</p>
+                        <p class="text-gray-500 dark:text-gray-500 mt-2">Try adjusting your search or filter</p>
+                    </div>
+                `;
+                return;
+            }
+
+            // Group by category
+            const groupedResources = {};
+            filteredResources.forEach(resource => {
+                if (!groupedResources[resource.category]) {
+                    groupedResources[resource.category] = [];
+                }
+                groupedResources[resource.category].push(resource);
+            });
+
+            // Render each category
+            Object.keys(groupedResources).forEach((category, catIndex) => {
+                const categorySection = document.createElement('div');
+                categorySection.className = 'mb-16 fade-in-up';
+                categorySection.style.animationDelay = `${catIndex * 0.1}s`;
+
+                const categoryTitle = document.createElement('h3');
+                categoryTitle.className = 'text-3xl font-bold text-gray-900 dark:text-white mb-8 flex items-center gap-3';
+
+                const categoryIcons = {
+                    'Developer Tools & Hosting': 'fa-laptop-code',
+                    'Monitoring & Security': 'fa-shield-halved',
+                    'Cloud & Infrastructure': 'fa-cloud',
+                    'Communication & Collaboration': 'fa-users',
+                    'AI & Automation': 'fa-robot',
+                    'CI/CD & Build Tools': 'fa-gears',
+                    'Search & Indexing': 'fa-magnifying-glass'
+                };
+
+                const iconClass = categoryIcons[category] || 'fa-folder';
+
+                categoryTitle.innerHTML = `
+                    <div class="w-12 h-12 bg-gradient-to-br from-blue-600 to-cyan-600 rounded-xl flex items-center justify-center shadow-lg">
+                        <i class="fas ${iconClass} text-white text-xl"></i>
+                    </div>
+                    <span>${category}</span>
+                    <span class="ml-3 text-lg font-normal text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-4 py-1 rounded-full">
+                        ${groupedResources[category].length}
+                    </span>
+                `;
+                categorySection.appendChild(categoryTitle);
+
+                const grid = document.createElement('div');
+                grid.className = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6';
+
+                groupedResources[category].forEach((resource, index) => {
+                    const card = createResourceCard(resource);
+                    card.style.animationDelay = `${(catIndex * 0.1) + (index * 0.05)}s`;
+                    grid.appendChild(card);
+                });
+
+                categorySection.appendChild(grid);
+                container.appendChild(categorySection);
+            });
+        }
+
+        function createResourceCard(resource) {
+            const card = document.createElement('div');
+            card.className = 'card-interactive bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 border-l-4 border-blue-600 transition-all duration-300 fade-in-up';
+
+            card.innerHTML = `
+                <div class="flex items-start justify-between mb-4">
+                    <div class="flex items-center gap-3">
+                        <div class="w-12 h-12 bg-gradient-to-br from-blue-100 to-cyan-100 dark:from-blue-900 dark:to-cyan-900 rounded-xl flex items-center justify-center">
+                            <i class="${resource.icon} text-2xl text-blue-600 dark:text-blue-400"></i>
+                        </div>
+                        <h4 class="text-lg font-bold text-gray-900 dark:text-white">${resource.name}</h4>
+                    </div>
+                </div>
+                <p class="text-gray-600 dark:text-gray-300 mb-6 text-sm leading-relaxed">${resource.description}</p>
+                <a href="${resource.url}" target="_blank"
+                   class="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-semibold text-sm group">
+                    Learn More
+                    <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
+                </a>
+            `;
+
+            return card;
+        }
+
+        // Update Stats
+        function updateStats() {
+            animateCounter('totalResources', resources.length);
+            animateCounter('totalCategories', categories.length);
+        }
+
+        function animateCounter(id, target) {
+            const element = document.getElementById(id);
+            let current = 0;
+            const increment = target / 40;
+            const timer = setInterval(() => {
+                current += increment;
+                if (current >= target) {
+                    element.textContent = target;
+                    clearInterval(timer);
+                } else {
+                    element.textContent = Math.floor(current);
+                }
+            }, 30);
+        }
+    </script>
+</body>
+</html>
