Spaces:

Json026
/

DSA_Tutorials

Configuration error

App Files Files Community

Json026 commited on 6 days ago

Commit

b19431d

verified ·

1 Parent(s): 9cd7988

Update index.html

Browse files

Files changed (1) hide show

index.html +1023 -395

index.html CHANGED Viewed

@@ -1,442 +1,1070 @@
 <!DOCTYPE html>
 <html lang="en" class="dark">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <!-- SEO -->
-  <title>DSA Portfolio | Problem Solving Journey</title>
-  <meta
-    name="description"
-    content="A modern DSA Portfolio showcasing solved Data Structures & Algorithms problems with filters, search, progress tracking, and elegant UI."
-  />
-  <!-- Open Graph -->
-  <meta property="og:title" content="DSA Portfolio" />
-  <meta
-    property="og:description"
-    content="Track and showcase solved DSA problems with a modern portfolio."
-  />
-  <meta property="og:type" content="website" />
-  <meta property="og:image" content="https://dummyimage.com/1200x630/111827/ffffff&text=DSA+Portfolio" />
-  <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
-    rel="stylesheet"
-  />
-  <!-- Tailwind -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwind.config = {
-      darkMode: "class",
-      theme: {
-        extend: {
-          fontFamily: {
-            inter: ["Inter", "sans-serif"],
-            mono: ["JetBrains Mono", "monospace"],
-          },
-          animation: {
-            float: "float 5s ease-in-out infinite",
-          },
-          keyframes: {
-            float: {
-              "0%, 100%": { transform: "translateY(0px)" },
-              "50%": { transform: "translateY(-8px)" },
             },
-          },
-        },
-      },
-    };
-  </script>
-  <style>
-    ::-webkit-scrollbar {
-      width: 8px;
-    }
-    ::-webkit-scrollbar-thumb {
-      background: #6b7280;
-      border-radius: 999px;
-    }
-    html {
-      scroll-behavior: smooth;
-    }
-    body {
-      transition: background 0.3s ease;
-    }
-    .glass {
-      backdrop-filter: blur(14px);
-      -webkit-backdrop-filter: blur(14px);
-    }
-  </style>
-</head>
-<body class="bg-gradient-to-br from-slate-100 via-white to-slate-200 dark:from-[#0b1120] dark:via-[#0f172a] dark:to-[#020617] text-slate-900 dark:text-white font-inter min-h-screen">
-  <!-- Decorative Blobs -->
-  <div class="fixed inset-0 overflow-hidden -z-10">
-    <div class="absolute top-10 left-10 w-72 h-72 bg-cyan-500/20 rounded-full blur-3xl animate-float"></div>
-    <div class="absolute bottom-10 right-10 w-72 h-72 bg-violet-500/20 rounded-full blur-3xl animate-float"></div>
-  </div>
-  <!-- Header -->
-  <header class="sticky top-0 z-50 border-b border-white/10 bg-white/10 dark:bg-white/5 glass">
-    <nav class="max-w-7xl mx-auto px-5 py-4 flex items-center justify-between">
-      <div>
-        <h1 class="text-2xl md:text-3xl font-extrabold tracking-tight">
-          DSA Portfolio
-        </h1>
-        <p class="text-sm text-slate-600 dark:text-slate-400 mt-1">
-          Track. Solve. Improve.
-        </p>
-      </div>
-      <button
-        id="themeToggle"
-        aria-label="Toggle Theme"
-        class="px-4 py-2 rounded-xl border border-white/10 bg-white/10 hover:bg-white/20 transition"
-      >
-        🌙
-      </button>
-    </nav>
-  </header>
-  <!-- Hero -->
-  <section class="max-w-7xl mx-auto px-5 pt-12 pb-8">
-    <div class="grid lg:grid-cols-2 gap-10 items-center">
-      <div>
-        <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-cyan-500/10 border border-cyan-500/20 text-cyan-400 text-sm font-medium">
-          🚀 Data Structures & Algorithms
-        </span>
-        <h2 class="mt-6 text-5xl md:text-6xl font-black leading-tight">
-          Build Your
-          <span class="bg-gradient-to-r from-cyan-400 to-violet-400 bg-clip-text text-transparent">
-            Coding Journey
-          </span>
-        </h2>
-        <p class="mt-6 text-lg text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
-          A modern portfolio showcasing solved DSA problems with filtering,
-          searching, progress tracking, and elegant UI inspired by modern developer tools.
-        </p>
-        <!-- Progress -->
-        <div class="mt-8 max-w-xl">
-          <div class="flex items-center justify-between mb-2">
-            <span class="text-sm font-medium text-slate-700 dark:text-slate-300">
-              Programs Solved
-            </span>
-            <span
-              id="progressText"
-              class="font-mono text-cyan-400"
-            >
-              0/30
-            </span>
-          </div>
-          <div class="w-full h-3 bg-white/10 rounded-full overflow-hidden">
-            <div
-              id="progressBar"
-              class="h-full bg-gradient-to-r from-cyan-400 to-violet-500 rounded-full transition-all duration-500"
-              style="width: 0%"
-            ></div>
-          </div>
-        </div>
-      </div>
-      <!-- Stats Card -->
-      <div class="glass border border-white/10 bg-white/10 dark:bg-white/5 rounded-3xl p-8 shadow-2xl">
-        <div class="grid grid-cols-2 gap-5">
-          <div class="p-5 rounded-2xl bg-white/10 border border-white/10">
-            <h3 class="text-sm text-slate-400">Total Problems</h3>
-            <p id="totalProblems" class="text-4xl font-black mt-2">0</p>
-          </div>
-          <div class="p-5 rounded-2xl bg-white/10 border border-white/10">
-            <h3 class="text-sm text-slate-400">Topics Covered</h3>
-            <p id="topicsCount" class="text-4xl font-black mt-2">0</p>
-          </div>
-          <div class="p-5 rounded-2xl bg-white/10 border border-white/10">
-            <h3 class="text-sm text-slate-400">Easy</h3>
-            <p id="easyCount" class="text-4xl font-black mt-2 text-green-400">0</p>
-          </div>
-          <div class="p-5 rounded-2xl bg-white/10 border border-white/10">
-            <h3 class="text-sm text-slate-400">Medium/Hard</h3>
-            <p id="mediumHardCount" class="text-4xl font-black mt-2 text-orange-400">0</p>
-          </div>
         </div>
-      </div>
     </div>
-  </section>
-  <!-- Main -->
-  <main class="max-w-7xl mx-auto px-5 pb-16">
-    <!-- Controls -->
-    <section class="mb-10">
-      <!-- Search -->
-      <div class="relative mb-6">
-        <input
-          type="text"
-          id="searchInput"
-          placeholder="Search problems by name..."
-          class="w-full px-5 py-4 rounded-2xl bg-white/10 dark:bg-white/5 border border-white/10 glass outline-none focus:ring-2 focus:ring-cyan-400 text-lg placeholder:text-slate-500"
-        />
-        <span class="absolute right-5 top-1/2 -translate-y-1/2 text-slate-400">
-          🔍
-        </span>
-      </div>
-      <!-- Filter Chips -->
-      <div id="filterContainer" class="flex flex-wrap gap-3">
-      </div>
-    </section>
-    <!-- Problem Grid -->
-    <section>
-      <div
-        id="problemGrid"
-        class="grid sm:grid-cols-2 xl:grid-cols-3 gap-6"
-      >
-      </div>
-    </section>
-  </main>
-  <!-- Footer -->
-  <footer class="border-t border-white/10 py-8 text-center text-slate-500">
-    <p>
-      Built with ❤️ using HTML, Tailwind CSS & Vanilla JavaScript
-    </p>
-  </footer>
-  <script>
-    const problemGrid = document.getElementById("problemGrid");
-    const searchInput = document.getElementById("searchInput");
-    const filterContainer = document.getElementById("filterContainer");
-    const progressBar = document.getElementById("progressBar");
-    const progressText = document.getElementById("progressText");
-    const totalProblems = document.getElementById("totalProblems");
-    const topicsCount = document.getElementById("topicsCount");
-    const easyCount = document.getElementById("easyCount");
-    const mediumHardCount = document.getElementById("mediumHardCount");
-    let problems = [];
-    let activeFilter = "All";
-    // Theme Toggle
-    const themeToggle = document.getElementById("themeToggle");
-    themeToggle.addEventListener("click", () => {
-      document.documentElement.classList.toggle("dark");
-      if (document.documentElement.classList.contains("dark")) {
-        themeToggle.textContent = "🌙";
-      } else {
-        themeToggle.textContent = "☀️";
-      }
-    });
-    // Fetch JSON Data
-    async function fetchProblems() {
-      try {
-        const response = await fetch("./data.json");
-        problems = await response.json();
-        renderStats();
-        renderFilters();
-        renderProblems(problems);
-      } catch (error) {
-        console.error("Error loading JSON:", error);
-        problemGrid.innerHTML = `
-          <div class="col-span-full text-center py-20">
-            <h2 class="text-3xl font-bold text-red-400">
-              Failed to load data.json
-            </h2>
-          </div>
-        `;
-      }
-    }
-    // Render Stats
-    function renderStats() {
-      totalProblems.textContent = problems.length;
-      const uniqueTopics = [...new Set(problems.map(p => p.topic))];
-      topicsCount.textContent = uniqueTopics.length;
-      const easy = problems.filter(p => p.difficulty === "Easy").length;
-      easyCount.textContent = easy;
-      mediumHardCount.textContent = problems.length - easy;
-      const solved = problems.length;
-      const target = 30;
-      progressText.textContent = `${solved}/${target}`;
-      const percentage = Math.min((solved / target) * 100, 100);
-      progressBar.style.width = `${percentage}%`;
-    }
-    // Create Filters
-    function renderFilters() {
-      const difficulties = [...new Set(problems.map(p => p.difficulty))];
-      const topics = [...new Set(problems.map(p => p.topic))];
-      const filters = ["All", ...difficulties, ...topics];
-      filters.forEach(filter => {
-        const btn = document.createElement("button");
-        btn.textContent = filter;
-        btn.className =
-          "px-4 py-2 rounded-full border border-white/10 bg-white/10 hover:bg-cyan-500 hover:text-white transition text-sm font-medium";
-        if (filter === "All") {
-          btn.classList.add("bg-cyan-500", "text-white");
         }
-        btn.addEventListener("click", () => {
-          activeFilter = filter;
-          document.querySelectorAll("#filterContainer button")
-            .forEach(b => b.classList.remove("bg-cyan-500", "text-white"));
-          btn.classList.add("bg-cyan-500", "text-white");
-          filterProblems();
         });
-        filterContainer.appendChild(btn);
-      });
-    }
-    // Filter Logic
-    function filterProblems() {
-      const searchValue = searchInput.value.toLowerCase();
-      const filtered = problems.filter(problem => {
-        const matchesSearch =
-          problem.title.toLowerCase().includes(searchValue);
-        const matchesFilter =
-          activeFilter === "All" ||
-          problem.difficulty === activeFilter ||
-          problem.topic === activeFilter;
-        return matchesSearch && matchesFilter;
-      });
-      renderProblems(filtered);
-    }
-    // Search
-    searchInput.addEventListener("input", filterProblems);
-    // Difficulty Badge Colors
-    function getDifficultyColor(level) {
-      if (level === "Easy") {
-        return "bg-green-500/15 text-green-400 border-green-500/20";
-      }
-      if (level === "Medium") {
-        return "bg-yellow-500/15 text-yellow-400 border-yellow-500/20";
-      }
-      return "bg-red-500/15 text-red-400 border-red-500/20";
-    }
-    // Render Problems
-    function renderProblems(data) {
-      problemGrid.innerHTML = "";
-      if (data.length === 0) {
-        problemGrid.innerHTML = `
-          <div class="col-span-full text-center py-20">
-            <h2 class="text-3xl font-bold">
-              No Problems Found 😢
-            </h2>
-          </div>
-        `;
-        return;
-      }
-      data.forEach(problem => {
-        const card = document.createElement("article");
-        card.className =
-          "group glass border border-white/10 bg-white/10 dark:bg-white/5 rounded-3xl p-6 hover:-translate-y-2 transition duration-300 shadow-xl";
-        card.innerHTML = `
-          <div class="flex items-start justify-between gap-4">
-            <div>
-              <span class="font-mono text-xs text-cyan-400">
-                ${problem.topic}
-              </span>
-              <h2 class="mt-3 text-2xl font-bold leading-tight group-hover:text-cyan-400 transition">
-                ${problem.title}
-              </h2>
-            </div>
-            <span class="px-3 py-1 rounded-full text-xs border ${getDifficultyColor(problem.difficulty)}">
-              ${problem.difficulty}
-            </span>
-          </div>
-          <div class="mt-8 flex items-center justify-between">
-            <a
-              href="${problem.url}"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-gradient-to-r from-cyan-500 to-violet-500 text-white font-semibold hover:scale-105 transition"
-              aria-label="Open ${problem.title}"
-            >
-              Solve Problem →
-            </a>
-            <div class="text-sm text-slate-400 font-mono">
-              #DSA
-            </div>
-          </div>
-        `;
-        problemGrid.appendChild(card);
-      });
-    }
-    // Initialize
-    fetchProblems();
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en" class="dark">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DSA Portfolio | Data Structures & Algorithms Tracker</title>
+    <meta name="description" content="A personal portfolio tracking 30+ Data Structures & Algorithms problems solved across topics like Arrays, Graphs, DP, Trees, and more. Built with a focus on clean code and consistent practice.">
+    <meta name="keywords" content="DSA, Data Structures, Algorithms, LeetCode, Portfolio, Developer, Problem Solving, Coding">
+    <meta name="author" content="DSA Enthusiast">
+    <!-- Open Graph / Social Sharing -->
+    <meta property="og:title" content="DSA Portfolio | Problem Solving Tracker">
+    <meta property="og:description" content="Tracking my journey through 30 essential Data Structures & Algorithms problems. Filter by difficulty, topic, or search by name.">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://your-domain.com/dsa-portfolio">
+    <meta property="og:image" content="https://your-domain.com/dsa-portfolio/og-image.png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <meta property="og:image:alt" content="DSA Portfolio - Problem Solving Tracker with glassmorphism design">
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="DSA Portfolio | Problem Solving Tracker">
+    <meta name="twitter:description" content="Tracking 30 essential DSA problems with a clean, modern interface. Filter, search, and track progress.">
+    <meta name="twitter:image" content="https://your-domain.com/dsa-portfolio/og-image.png">
+    <!-- Canonical -->
+    <link rel="canonical" href="https://your-domain.com/dsa-portfolio">
+    <!-- Fonts: Inter for body, JetBrains Mono for code elements -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com">
+    </script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    fontFamily: {
+                        'sans': ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
+                        'mono': ['JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'monospace'],
+                    },
+                    animation: {
+                        'fade-in': 'fadeIn 0.5s ease-out forwards',
+                        'slide-up': 'slideUp 0.5s ease-out forwards',
+                        'pulse-soft': 'pulseSoft 3s ease-in-out infinite',
+                        'shimmer': 'shimmer 2s ease-in-out infinite',
+                    },
+                    keyframes: {
+                        fadeIn: {
+                            '0%': { opacity: '0' },
+                            '100%': { opacity: '1' },
+                        },
+                        slideUp: {
+                            '0%': { opacity: '0', transform: 'translateY(20px)' },
+                            '100%': { opacity: '1', transform: 'translateY(0)' },
+                        },
+                        pulseSoft: {
+                            '0%, 100%': { opacity: '0.5' },
+                            '50%': { opacity: '0.8' },
+                        },
+                        shimmer: {
+                            '0%': { backgroundPosition: '-200% 0' },
+                            '100%': { backgroundPosition: '200% 0' },
+                        },
+                    },
+                },
             },
+        };
+    </script>
+    <style type="text/tailwindcss">
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(148, 163, 184, 0.4);
+            border-radius: 9999px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(148, 163, 184, 0.6);
+        }
+        .dark ::-webkit-scrollbar-thumb {
+            background: rgba(71, 85, 105, 0.5);
+        }
+        .dark ::-webkit-scrollbar-thumb:hover {
+            background: rgba(71, 85, 105, 0.7);
+        }
+        /* Smooth theme transitions */
+        html {
+            transition: background-color 0.4s ease, color 0.4s ease;
+        }
+        html * {
+            transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+        }
+        /* Card hover glow */
+        .card-glow {
+            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+                box-shadow 0.3s ease,
+                border-color 0.3s ease;
+        }
+        .card-glow:hover {
+            transform: translateY(-6px);
+            box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.25),
+                0 0 0 1px rgba(255, 255, 255, 0.2) inset;
+        }
+        .dark .card-glow:hover {
+            box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5),
+                0 0 40px -10px rgba(99, 102, 241, 0.25),
+                0 0 0 1px rgba(255, 255, 255, 0.15) inset;
+        }
+        /* Filter chip active state */
+        .chip-active {
+            box-shadow: 0 0 20px -5px rgba(99, 102, 241, 0.5);
+            transform: scale(1.03);
+        }
+        /* Skeleton loading */
+        .skeleton {
+            background: linear-gradient(90deg,
+                    transparent 0%,
+                    rgba(148, 163, 184, 0.2) 50%,
+                    transparent 100%);
+            background-size: 200% 100%;
+            animation: shimmer 1.5s ease-in-out infinite;
+        }
+        .dark .skeleton {
+            background: linear-gradient(90deg,
+                    transparent 0%,
+                    rgba(71, 85, 105, 0.3) 50%,
+                    transparent 100%);
+            background-size: 200% 100%;
+        }
+    </style>
+</head>
+<body class="font-sans antialiased min-h-screen relative overflow-x-hidden
+             bg-gradient-to-br from-slate-50 via-gray-100 to-slate-200
+             dark:from-gray-950 dark:via-slate-900 dark:to-gray-950
+             text-gray-800 dark:text-gray-100 transition-colors duration-500">
+    <!-- ==================== BACKGROUND ORBS ==================== -->
+    <div aria-hidden="true" class="fixed inset-0 pointer-events-none z-0 overflow-hidden">
+        <!-- Orb 1 - Top Right -->
+        <div class="absolute -top-32 -right-32 w-[600px] h-[600px] rounded-full
+                    bg-blue-400/15 dark:bg-indigo-500/10 blur-[120px]
+                    animate-pulse-soft transition-colors duration-700">
+        </div>
+        <!-- Orb 2 - Bottom Left -->
+        <div class="absolute -bottom-40 -left-40 w-[500px] h-[500px] rounded-full
+                    bg-purple-400/12 dark:bg-purple-600/8 blur-[100px]
+                    animate-pulse-soft transition-colors duration-700"
+            style="animation-delay: 1.5s;">
+        </div>
+        <!-- Orb 3 - Center subtle -->
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
+                    w-[700px] h-[700px] rounded-full
+                    bg-teal-300/8 dark:bg-cyan-500/5 blur-[150px]
+                    animate-pulse-soft transition-colors duration-700"
+            style="animation-delay: 0.8s;">
+        </div>
+        <!-- Orb 4 - Top Left accent -->
+        <div class="absolute top-20 left-10 w-[300px] h-[300px] rounded-full
+                    bg-amber-300/10 dark:bg-orange-500/6 blur-[80px]
+                    animate-pulse-soft transition-colors duration-700"
+            style="animation-delay: 2.2s;">
         </div>
     </div>
+    <!-- ==================== HEADER / NAVBAR ==================== -->
+    <header class="relative z-20 backdrop-blur-2xl bg-white/40 dark:bg-gray-900/40
+                   border-b border-gray-200/40 dark:border-gray-700/30
+                   sticky top-0 shadow-sm dark:shadow-lg dark:shadow-black/10"
+            role="banner">
+        <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between"
+            aria-label="Main navigation">
+            <!-- Logo / Brand -->
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600
+                            flex items-center justify-center shadow-lg shadow-indigo-500/25
+                            dark:shadow-indigo-500/30"
+                    aria-hidden="true">
+                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                    </svg>
+                </div>
+                <div>
+                    <h1 class="text-lg font-bold tracking-tight text-gray-900 dark:text-white leading-tight">
+                        DSA Portfolio
+                    </h1>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 font-mono tracking-wide">
+                        &lt;problem-solver /&gt;
+                    </p>
+                </div>
+            </div>
+            <!-- Dark/Light Toggle -->
+            <button id="themeToggle"
+                class="relative w-14 h-7 rounded-full
+                       bg-gray-200 dark:bg-gray-700
+                       border border-gray-300 dark:border-gray-600
+                       cursor-pointer
+                       focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2
+                       dark:focus-visible:ring-offset-gray-900
+                       transition-all duration-300 group"
+                aria-label="Toggle dark/light mode"
+                title="Toggle theme"
+                type="button"
+                role="switch"
+                aria-checked="true">
+                <!-- Toggle thumb -->
+                <span id="themeThumb"
+                    class="absolute top-0.5 left-0.5 w-6 h-6 rounded-full
+                           bg-white dark:bg-gray-800
+                           shadow-md dark:shadow-lg
+                           flex items-center justify-center
+                           transition-transform duration-300 ease-in-out
+                           translate-x-7">
+                    <!-- Sun icon (visible in dark mode, when thumb is on the right) -->
+                    <svg id="sunIcon" class="w-3.5 h-3.5 text-amber-500 opacity-0 scale-0 transition-all duration-300"
+                        fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <circle cx="12" cy="12" r="5" stroke-width="2" />
+                        <path stroke-linecap="round" stroke-width="2" d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+                    </svg>
+                    <!-- Moon icon (visible in light mode, when thumb is on the left) -->
+                    <svg id="moonIcon" class="w-3.5 h-3.5 text-indigo-400 opacity-100 scale-100 transition-all duration-300 absolute"
+                        fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+                    </svg>
+                </span>
+            </button>
+        </nav>
+    </header>
+    <!-- ==================== MAIN CONTENT ==================== -->
+    <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12" role="main">
+        <!-- ========== HERO / STATS SECTION ========== -->
+        <section class="mb-10 animate-fade-in" aria-labelledby="stats-heading">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch">
+                <!-- Intro Card -->
+                <div class="lg:col-span-2 backdrop-blur-xl bg-white/50 dark:bg-gray-800/40
+                            rounded-2xl p-6 sm:p-8
+                            border border-gray-200/50 dark:border-gray-700/40
+                            shadow-lg dark:shadow-2xl dark:shadow-black/20"
+                    aria-label="Portfolio introduction">
+                    <span class="inline-block px-3 py-1 text-xs font-semibold font-mono
+                                 rounded-full bg-indigo-100 dark:bg-indigo-900/50
+                                 text-indigo-700 dark:text-indigo-300
+                                 border border-indigo-200 dark:border-indigo-700/50
+                                 mb-4">
+                        📊 DSA TRACKER
+                    </span>
+                    <h2 id="stats-heading" class="text-2xl sm:text-3xl lg:text-4xl font-bold
+                               text-gray-900 dark:text-white leading-tight mb-3">
+                        Mastering Data Structures <br class="hidden sm:block">
+                        <span class="bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400
+                                     bg-clip-text text-transparent">
+                            & Algorithms
+                        </span>
+                    </h2>
+                    <p class="text-gray-600 dark:text-gray-400 max-w-xl leading-relaxed text-sm sm:text-base">
+                        A curated collection of 30 essential DSA problems. Track progress,
+                        filter by topic or difficulty, and build consistent problem-solving habits.
+                    </p>
+                </div>
+                <!-- Progress Card -->
+                <div class="backdrop-blur-xl bg-white/50 dark:bg-gray-800/40
+                            rounded-2xl p-6 sm:p-8
+                            border border-gray-200/50 dark:border-gray-700/40
+                            shadow-lg dark:shadow-2xl dark:shadow-black/20
+                            flex flex-col justify-center"
+                    aria-label="Progress statistics">
+                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400 font-mono mb-2">
+                        PROGRAMS SOLVED
+                    </p>
+                    <div class="flex items-baseline gap-2 mb-3">
+                        <span id="solvedCount" class="text-5xl sm:text-6xl font-extrabold
+                                   bg-gradient-to-r from-emerald-500 to-teal-500
+                                   dark:from-emerald-400 dark:to-teal-400
+                                   bg-clip-text text-transparent">
+                            0
+                        </span>
+                        <span class="text-2xl font-light text-gray-400 dark:text-gray-500">/ 30</span>
+                    </div>
+                    <!-- Progress Bar -->
+                    <div class="w-full h-3 rounded-full bg-gray-200/70 dark:bg-gray-700/60
+                                overflow-hidden relative"
+                        role="progressbar"
+                        aria-valuenow="0"
+                        aria-valuemin="0"
+                        aria-valuemax="30"
+                        aria-label="Solved problems progress">
+                        <div id="progressFill"
+                            class="h-full rounded-full transition-all duration-700 ease-out
+                                   bg-gradient-to-r from-emerald-400 via-teal-400 to-cyan-400
+                                   dark:from-emerald-500 dark:via-teal-500 dark:to-cyan-500
+                                   shadow-inner"
+                            style="width: 0%;">
+                        </div>
+                    </div>
+                    <p id="progressLabel" class="text-xs text-gray-500 dark:text-gray-400 mt-2 font-mono text-right">
+                        0% complete
+                    </p>
+                </div>
+            </div>
+        </section>
+        <!-- ========== SEARCH & FILTER SECTION ========== -->
+        <section class="mb-8 space-y-5 animate-slide-up" style="animation-delay: 0.1s;"
+            aria-labelledby="filter-heading">
+            <h3 id="filter-heading" class="sr-only">Search and Filter Problems</h3>
+            <!-- Search Bar -->
+            <div class="relative group max-w-2xl">
+                <div class="absolute inset-0 rounded-2xl bg-gradient-to-r from-indigo-500/20 to-purple-500/20
+                            dark:from-indigo-400/25 dark:to-purple-400/25
+                            blur-lg opacity-0 group-focus-within:opacity-100 transition-opacity duration-400
+                            pointer-events-none"
+                    aria-hidden="true">
+                </div>
+                <div class="relative backdrop-blur-xl bg-white/60 dark:bg-gray-800/50
+                            rounded-2xl border border-gray-200/60 dark:border-gray-700/50
+                            shadow-md dark:shadow-lg
+                            group-focus-within:border-indigo-400/60 dark:group-focus-within:border-indigo-500/50
+                            transition-all duration-300">
+                    <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5
+                                text-gray-400 dark:text-gray-500
+                                group-focus-within:text-indigo-500 dark:group-focus-within:text-indigo-400
+                                transition-colors duration-300"
+                        fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                    <input type="text" id="searchInput"
+                    class="w-full pl-12 pr-4 py-3.5 sm:py-4
+                    bg-transparent
+                    text-gray-900 dark:text-white
+                    placeholder-gray-400 dark:placeholder-gray-500
+                    font-mono text-sm sm:text-base
+                    rounded-2xl
+                    focus:outline-none
+                    transition-all duration-300"
+                    placeholder='Search problems... (e.g. "two sum")'
+                    aria-label="Search problems by name"
+                    autocomplete="off"
+                />
+                <button id="clearSearch"
+                    class="absolute right-3 top-1/2 -translate-y-1/2
+                           w-7 h-7 rounded-full
+                           bg-gray-300/60 dark:bg-gray-600/60
+                           flex items-center justify-center
+                           text-gray-600 dark:text-gray-300
+                           hover:bg-gray-400/70 dark:hover:bg-gray-500/70
+                           transition-all duration-200
+                           opacity-0 scale-75 pointer-events-none"
+                    aria-label="Clear search"
+                    type="button"
+                    title="Clear search">
+                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <!-- Filter Chips -->
+        <div class="space-y-3">
+            <!-- Difficulty Chips -->
+            <div class="flex flex-wrap items-center gap-2">
+                <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider
+                             font-mono mr-1"
+                    aria-hidden="true">
+                    Difficulty:
+                </span>
+                <div id="difficultyChips" class="flex flex-wrap gap-2" role="group"
+                aria-label="Filter by difficulty">
+                <!-- Dynamically populated -->
+            </div>
+        </div>
+        <!-- Topic Chips -->
+        <div class="flex flex-wrap items-center gap-2">
+            <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider
+                         font-mono mr-1"
+                aria-hidden="true">
+                Topics:
+            </span>
+            <div id="topicChips" class="flex flex-wrap gap-2" role="group" aria-label="Filter by topic">
+                <!-- Dynamically populated -->
+            </div>
+        </div>
+        <!-- Active Filters & Clear -->
+        <div id="activeFiltersInfo" class="flex items-center gap-3 flex-wrap opacity-0 transition-opacity duration-300">
+            <span id="resultCount" class="text-sm text-gray-500 dark:text-gray-400 font-mono"></span>
+            <button id="clearAllFilters"
+                class="text-xs font-semibold px-3 py-1.5 rounded-full
+                       bg-red-100 dark:bg-red-900/40
+                       text-red-600 dark:text-red-400
+                       border border-red-200 dark:border-red-800/50
+                       hover:bg-red-200 dark:hover:bg-red-800/60
+                       transition-all duration-200
+                       hidden"
+                type="button">
+                ✕ Clear All Filters
+            </button>
+        </div>
+    </div>
+</section>
+<!-- ========== PROBLEM CARDS GRID ========== -->
+<section aria-labelledby="problems-heading">
+    <div class="flex items-center justify-between mb-5">
+        <h3 id="problems-heading" class="text-lg font-semibold text-gray-800 dark:text-gray-200
+                   flex items-center gap-2">
+            <span class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse-soft" aria-hidden="true"></span>
+            Problems
+        </h3>
+        <span id="showingCount" class="text-xs text-gray-500 dark:text-gray-400 font-mono"></span>
+    </div>
+    <!-- Cards Grid -->
+    <div id="cardsGrid"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5"
+        role="list"
+        aria-label="Problem cards">
+        <!-- Dynamically populated -->
+    </div>
+    <!-- Empty State -->
+    <div id="emptyState"
+        class="hidden flex-col items-center justify-center py-16 text-center"
+        aria-live="polite">
+        <div class="w-20 h-20 rounded-full bg-gray-200/60 dark:bg-gray-700/50
+                    flex items-center justify-center mb-4"
+            aria-hidden="true">
+            <svg class="w-10 h-10 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                    d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        </div>
+        <p class="text-gray-500 dark:text-gray-400 text-lg font-medium mb-1">No problems found</p>
+        <p class="text-gray-400 dark:text-gray-500 text-sm">Try adjusting your filters or search query.</p>
+        <button id="resetEmptyState"
+            class="mt-4 px-4 py-2 rounded-xl
+                   bg-indigo-100 dark:bg-indigo-900/50
+                   text-indigo-700 dark:text-indigo-300
+                   font-medium text-sm
+                   hover:bg-indigo-200 dark:hover:bg-indigo-800/60
+                   transition-all duration-200"
+            type="button">
+            Reset All Filters
+        </button>
+    </div>
+    <!-- Loading State -->
+    <div id="loadingState"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5"
+        aria-label="Loading problems">
+        <!-- Skeleton cards -->
+        <div class="rounded-2xl p-6 h-40 skeleton" aria-hidden="true"></div>
+        <div class="rounded-2xl p-6 h-40 skeleton" aria-hidden="true" style="animation-delay: 0.1s;"></div>
+        <div class="rounded-2xl p-6 h-40 skeleton" aria-hidden="true" style="animation-delay: 0.2s;"></div>
+        <div class="rounded-2xl p-6 h-40 skeleton hidden md:block" aria-hidden="true" style="animation-delay: 0.3s;"></div>
+        <div class="rounded-2xl p-6 h-40 skeleton hidden md:block" aria-hidden="true" style="animation-delay: 0.4s;"></div>
+        <div class="rounded-2xl p-6 h-40 skeleton hidden lg:block" aria-hidden="true" style="animation-delay: 0.5s;"></div>
+    </div>
+</section>
+</main>
+<!-- ==================== FOOTER ==================== -->
+<footer class="relative z-10 border-t border-gray-200/40 dark:border-gray-700/30
+               backdrop-blur-xl bg-white/30 dark:bg-gray-900/30 mt-12"
+role="contentinfo">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6
+            flex flex-col sm:flex-row items-center justify-between gap-3 text-sm
+            text-gray-500 dark:text-gray-400 font-mono">
+    <p>&copy; <span id="currentYear">2024</span> DSA Portfolio. Built with precision.</p>
+    <p class="flex items-center gap-1.5">
+        <span class="inline-block w-2 h-2 rounded-full bg-emerald-400 animate-pulse-soft" aria-hidden="true"></span>
+        Tracking progress, one problem at a time.
+    </p>
+</div>
+</footer>
+<!-- ==================== SCRIPTS ==================== -->
+<script>
+    (function() {
+        // ─────────────────────────────────────
+        // DOM REFERENCES
+        // ─────────────────────────────────────
+        const searchInput = document.getElementById('searchInput');
+        const clearSearchBtn = document.getElementById('clearSearch');
+        const difficultyChipsContainer = document.getElementById('difficultyChips');
+        const topicChipsContainer = document.getElementById('topicChips');
+        const cardsGrid = document.getElementById('cardsGrid');
+        const loadingState = document.getElementById('loadingState');
+        const emptyState = document.getElementById('emptyState');
+        const solvedCountEl = document.getElementById('solvedCount');
+        const progressFill = document.getElementById('progressFill');
+        const progressLabel = document.getElementById('progressLabel');
+        const showingCount = document.getElementById('showingCount');
+        const resultCount = document.getElementById('resultCount');
+        const activeFiltersInfo = document.getElementById('activeFiltersInfo');
+        const clearAllFiltersBtn = document.getElementById('clearAllFilters');
+        const resetEmptyStateBtn = document.getElementById('resetEmptyState');
+        const themeToggle = document.getElementById('themeToggle');
+        const themeThumb = document.getElementById('themeThumb');
+        const sunIcon = document.getElementById('sunIcon');
+        const moonIcon = document.getElementById('moonIcon');
+        const htmlEl = document.documentElement;
+        const currentYearSpan = document.getElementById('currentYear');
+        // ─────────────────────────────────────
+        // STATE
+        // ─────────────────────────────────────
+        let allProblems = [];
+        let activeDifficultyFilters = new Set(); // e.g., {"Easy", "Medium"}
+        let activeTopicFilters = new Set(); // e.g., {"Arrays", "Graphs"}
+        let searchQuery = '';
+        const TOTAL_PROBLEMS = 30;
+        // ─────────────────────────────────────
+        // THEME MANAGEMENT
+        // ─────────────────────────────────────
+        function getSystemTheme() {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        function getStoredTheme() {
+            try {
+                return localStorage.getItem('dsa-portfolio-theme');
+            } catch (e) {
+                return null;
+            }
+        }
+        function applyTheme(theme) {
+            if (theme === 'dark') {
+                htmlEl.classList.add('dark');
+                themeToggle.setAttribute('aria-checked', 'true');
+                themeThumb.style.transform = 'translateX(28px)';
+                sunIcon.style.opacity = '0';
+                sunIcon.style.transform = 'scale(0)';
+                moonIcon.style.opacity = '1';
+                moonIcon.style.transform = 'scale(1)';
+            } else {
+                htmlEl.classList.remove('dark');
+                themeToggle.setAttribute('aria-checked', 'false');
+                themeThumb.style.transform = 'translateX(0px)';
+                sunIcon.style.opacity = '1';
+                sunIcon.style.transform = 'scale(1)';
+                moonIcon.style.opacity = '0';
+                moonIcon.style.transform = 'scale(0)';
+            }
+        }
+        function toggleTheme() {
+            const current = htmlEl.classList.contains('dark') ? 'dark' : 'light';
+            const next = current === 'dark' ? 'light' : 'dark';
+            applyTheme(next);
+            try {
+                localStorage.setItem('dsa-portfolio-theme', next);
+            } catch (e) {
+                // localStorage unavailable
+            }
+        }
+        function initTheme() {
+            const stored = getStoredTheme();
+            const theme = stored || getSystemTheme();
+            applyTheme(theme);
+            // Listen for system changes if no stored preference
+            if (!stored) {
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+                    if (!getStoredTheme()) {
+                        applyTheme(e.matches ? 'dark' : 'light');
+                    }
+                });
+            }
+        }
+        themeToggle.addEventListener('click', toggleTheme);
+        // ─────────────────────────────────────
+        // DIFFICULTY COLOR MAP
+        // ─────────────────────────────────────
+        function getDifficultyColors(difficulty) {
+            const map = {
+                'Easy': {
+                    bg: 'bg-emerald-100 dark:bg-emerald-900/40',
+                    text: 'text-emerald-700 dark:text-emerald-300',
+                    border: 'border-emerald-200 dark:border-emerald-700/50',
+                    dot: 'bg-emerald-500',
+                },
+                'Medium': {
+                    bg: 'bg-amber-100 dark:bg-amber-900/40',
+                    text: 'text-amber-700 dark:text-amber-300',
+                    border: 'border-amber-200 dark:border-amber-700/50',
+                    dot: 'bg-amber-500',
+                },
+                'Hard': {
+                    bg: 'bg-red-100 dark:bg-red-900/40',
+                    text: 'text-red-700 dark:text-red-300',
+                    border: 'border-red-200 dark:border-red-700/50',
+                    dot: 'bg-red-500',
+                },
+            };
+            return map[difficulty] || {
+                bg: 'bg-gray-100 dark:bg-gray-800',
+                text: 'text-gray-700 dark:text-gray-300',
+                border: 'border-gray-200 dark:border-gray-700',
+                dot: 'bg-gray-500',
+            };
+        }
+        // ─────────────────────────────────────
+        // RENDER FUNCTIONS
+        // ─────────────────────────────────────
+        function renderDifficultyChips() {
+            const difficulties = ['All', 'Easy', 'Medium', 'Hard'];
+            difficultyChipsContainer.innerHTML = '';
+            difficulties.forEach((diff, index) => {
+                const chip = document.createElement('button');
+                chip.type = 'button';
+                chip.textContent = diff;
+                chip.dataset.difficulty = diff;
+                const isAll = diff === 'All';
+                const isActive = isAll ?
+                    activeDifficultyFilters.size === 0 :
+                    activeDifficultyFilters.has(diff);
+                const baseClasses =
+                    'px-3.5 py-1.5 rounded-full text-sm font-medium border transition-all duration-250 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-gray-900';
+                let activeClasses, inactiveClasses;
+                if (isAll) {
+                    activeClasses =
+                        'bg-indigo-600 dark:bg-indigo-500 text-white border-indigo-600 dark:border-indigo-500 shadow-md chip-active';
+                    inactiveClasses =
+                        'bg-white/50 dark:bg-gray-700/50 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600/60 backdrop-blur-sm';
+                } else if (diff === 'Easy') {
+                    activeClasses =
+                        'bg-emerald-500 text-white border-emerald-500 shadow-md chip-active shadow-emerald-500/30';
+                    inactiveClasses =
+                        'bg-white/50 dark:bg-gray-700/50 text-emerald-700 dark:text-emerald-300 border-emerald-300 dark:border-emerald-700/50 hover:bg-emerald-50 dark:hover:bg-emerald-900/30 backdrop-blur-sm';
+                } else if (diff === 'Medium') {
+                    activeClasses =
+                        'bg-amber-500 text-white border-amber-500 shadow-md chip-active shadow-amber-500/30';
+                    inactiveClasses =
+                        'bg-white/50 dark:bg-gray-700/50 text-amber-700 dark:text-amber-300 border-amber-300 dark:border-amber-700/50 hover:bg-amber-50 dark:hover:bg-amber-900/30 backdrop-blur-sm';
+                } else if (diff === 'Hard') {
+                    activeClasses =
+                    'bg-red-500 text-white border-red-500 shadow-md chip-active shadow-red-500/30';
+                    inactiveClasses =
+                        'bg-white/50 dark:bg-gray-700/50 text-red-700 dark:text-red-300 border-red-300 dark:border-red-700/50 hover:bg-red-50 dark:hover:bg-red-900/30 backdrop-blur-sm';
+                }
+                chip.className = `${baseClasses} ${isActive ? activeClasses : inactiveClasses}`;
+                chip.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+                chip.style.animationDelay = `${index * 0.05}s`;
+                chip.classList.add('animate-fade-in');
+                chip.addEventListener('click', () => {
+                    if (isAll) {
+                        // Clicking "All" clears all difficulty filters
+                        activeDifficultyFilters.clear();
+                    } else {
+                        // Remove "All" behavior: toggle specific difficulty
+                        if (activeDifficultyFilters.has(diff)) {
+                            activeDifficultyFilters.delete(diff);
+                        } else {
+                            activeDifficultyFilters.add(diff);
+                        }
+                    }
+                    renderDifficultyChips();
+                    applyFiltersAndRender();
+                });
+                difficultyChipsContainer.appendChild(chip);
+            });
+        }
+        function renderTopicChips() {
+            // Get unique topics
+            const topicsSet = new Set();
+            allProblems.forEach(p => topicsSet.add(p.topic));
+            const topics = ['All Topics', ...Array.from(topicsSet).sort()];
+            topicChipsContainer.innerHTML = '';
+            topics.forEach((topic, index) => {
+                const chip = document.createElement('button');
+                chip.type = 'button';
+                chip.textContent = topic;
+                chip.dataset.topic = topic;
+                const isAll = topic === 'All Topics';
+                const isActive = isAll ?
+                    activeTopicFilters.size === 0 :
+                    activeTopicFilters.has(topic);
+                const baseClasses =
+                    'px-3 py-1.5 rounded-full text-sm font-medium border transition-all duration-250 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-gray-900';
+                const activeClasses =
+                    'bg-purple-600 dark:bg-purple-500 text-white border-purple-600 dark:border-purple-500 shadow-md chip-active shadow-purple-500/25';
+                const inactiveClasses =
+                    'bg-white/50 dark:bg-gray-700/50 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600/60 backdrop-blur-sm';
+                chip.className = `${baseClasses} ${isActive ? activeClasses : inactiveClasses}`;
+                chip.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+                chip.style.animationDelay = `${index * 0.04}s`;
+                chip.classList.add('animate-fade-in');
+                chip.addEventListener('click', () => {
+                    if (isAll) {
+                        activeTopicFilters.clear();
+                    } else {
+                        if (activeTopicFilters.has(topic)) {
+                            activeTopicFilters.delete(topic);
+                        } else {
+                            activeTopicFilters.add(topic);
+                        }
+                    }
+                    renderTopicChips();
+                    applyFiltersAndRender();
+                });
+                topicChipsContainer.appendChild(chip);
+            });
+        }
+        function getFilteredProblems() {
+            return allProblems.filter(problem => {
+                // Difficulty filter
+                if (activeDifficultyFilters.size > 0 && !activeDifficultyFilters.has(problem.difficulty)) {
+                    return false;
+                }
+                // Topic filter
+                if (activeTopicFilters.size > 0 && !activeTopicFilters.has(problem.topic)) {
+                    return false;
+                }
+                // Search filter
+                if (searchQuery.trim() && !problem.title.toLowerCase().includes(searchQuery.toLowerCase())) {
+                    return false;
+                }
+                return true;
+            });
+        }
+        function renderProblemCards(problems) {
+            cardsGrid.innerHTML = '';
+            if (problems.length === 0) {
+                cardsGrid.classList.add('hidden');
+                emptyState.classList.remove('hidden');
+                emptyState.classList.add('flex');
+            } else {
+                cardsGrid.classList.remove('hidden');
+                emptyState.classList.add('hidden');
+                emptyState.classList.remove('flex');
+            }
+            problems.forEach((problem, index) => {
+                const diffColors = getDifficultyColors(problem.difficulty);
+                const card = document.createElement('a');
+                card.href = problem.url;
+                card.target = '_blank';
+                card.rel = 'noopener noreferrer';
+                card.className = `
+                    card-glow group relative block
+                    backdrop-blur-xl
+                    bg-white/50 dark:bg-gray-800/40
+                    rounded-2xl p-5 sm:p-6
+                    border border-gray-200/50 dark:border-gray-700/40
+                    shadow-md dark:shadow-lg
+                    cursor-pointer
+                    animate-slide-up
+                    decoration-none
+                    focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2
+                    dark:focus-visible:ring-offset-gray-900
+                `;
+                card.style.animationDelay = `${index * 0.04}s`;
+                card.setAttribute('role', 'listitem');
+                card.setAttribute('aria-label', `${problem.title} - ${problem.difficulty} - ${problem.topic}`);
+                // Solved indicator
+                const solvedBadge = problem.solved ?
+                    `
+                    <span class="absolute top-3 right-3 flex items-center gap-1
+                                 px-2 py-0.5 rounded-full text-xs font-semibold
+                                 bg-emerald-100 dark:bg-emerald-900/50
+                                 text-emerald-700 dark:text-emerald-300
+                                 border border-emerald-200 dark:border-emerald-700/40"
+                          aria-label="Solved">
+                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                        </svg>
+                        Solved
+                    </span>
+                ` :
+                    '';
+                // Platform badge
+                const platformInitials = (problem.platform || 'DS')
+                    .split(' ')
+                    .map(w => w[0])
+                    .join('')
+                    .toUpperCase()
+                    .slice(0, 2);
+                card.innerHTML = `
+                    ${solvedBadge}
+                    <!-- Platform badge -->
+                    <span class="inline-block px-2 py-0.5 rounded-md text-[10px] font-bold font-mono
+                                 bg-gray-100 dark:bg-gray-700/70
+                                 text-gray-500 dark:text-gray-400
+                                 border border-gray-200 dark:border-gray-600/50
+                                 mb-3"
+                          aria-label="Platform: ${problem.platform || 'Unknown'}">
+                        ${platformInitials}
+                    </span>
+                    <!-- Title -->
+                    <h4 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white
+                               mb-3 leading-tight
+                               group-hover:text-indigo-600 dark:group-hover:text-indigo-400
+                               transition-colors duration-200
+                               pr-16"
+                        title="${problem.title}">
+                        ${problem.title}
+                    </h4>
+                    <!-- Bottom row: difficulty + topic -->
+                    <div class="flex flex-wrap items-center gap-2 mt-auto">
+                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium
+                                     ${diffColors.bg} ${diffColors.text} ${diffColors.border} border">
+                            <span class="w-1.5 h-1.5 rounded-full ${diffColors.dot}" aria-hidden="true"></span>
+                            ${problem.difficulty}
+                        </span>
+                        <span class="inline-block px-2.5 py-1 rounded-full text-xs font-medium
+                                     bg-gray-100 dark:bg-gray-700/60
+                                     text-gray-600 dark:text-gray-400
+                                     border border-gray-200 dark:border-gray-600/40">
+                            ${problem.topic}
+                        </span>
+                    </div>
+                    <!-- Subtle arrow indicator -->
+                    <svg class="absolute bottom-4 right-4 w-4 h-4
+                                text-gray-300 dark:text-gray-600
+                                group-hover:text-indigo-500 dark:group-hover:text-indigo-400
+                                transition-all duration-300
+                                group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
+                        fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                    </svg>
+                `;
+                cardsGrid.appendChild(card);
+            });
+        }
+        function updateProgressBar() {
+            const solvedCount = allProblems.filter(p => p.solved).length;
+            const percentage = Math.round((solvedCount / TOTAL_PROBLEMS) * 100);
+            // Animate count
+            solvedCountEl.textContent = solvedCount;
+            progressFill.style.width = `${percentage}%`;
+            progressLabel.textContent = `${percentage}% complete`;
+            // Update ARIA
+            const progressBar = progressFill.parentElement;
+            progressBar.setAttribute('aria-valuenow', solvedCount);
         }
+        function updateUIInfo(filteredProblems) {
+            const total = allProblems.length;
+            const filtered = filteredProblems.length;
+            const hasActiveFilters =
+                activeDifficultyFilters.size > 0 ||
+                activeTopicFilters.size > 0 ||
+                searchQuery.trim().length > 0;
+            showingCount.textContent = `Showing ${filtered} of ${total} problems`;
+            resultCount.textContent = hasActiveFilters ? `${filtered} result${filtered !== 1 ? 's' : ''} found` : '';
+            if (hasActiveFilters) {
+                activeFiltersInfo.style.opacity = '1';
+                clearAllFiltersBtn.classList.remove('hidden');
+            } else {
+                activeFiltersInfo.style.opacity = '0';
+                clearAllFiltersBtn.classList.add('hidden');
+            }
+        }
+        function applyFiltersAndRender() {
+            const filtered = getFilteredProblems();
+            renderProblemCards(filtered);
+            updateUIInfo(filtered);
+        }
+        function clearAllFilters() {
+            activeDifficultyFilters.clear();
+            activeTopicFilters.clear();
+            searchQuery = '';
+            searchInput.value = '';
+            clearSearchBtn.style.opacity = '0';
+            clearSearchBtn.style.pointerEvents = 'none';
+            clearSearchBtn.style.transform = 'scale(0.75)';
+            renderDifficultyChips();
+            renderTopicChips();
+            applyFiltersAndRender();
+        }
+        // ─────────────────────────────────────
+        // EVENT LISTENERS
+        // ─────────────────────────────────────
+        searchInput.addEventListener('input', (e) => {
+            searchQuery = e.target.value;
+            if (searchQuery.trim()) {
+                clearSearchBtn.style.opacity = '1';
+                clearSearchBtn.style.pointerEvents = 'auto';
+                clearSearchBtn.style.transform = 'scale(1)';
+            } else {
+                clearSearchBtn.style.opacity = '0';
+                clearSearchBtn.style.pointerEvents = 'none';
+                clearSearchBtn.style.transform = 'scale(0.75)';
+            }
+            applyFiltersAndRender();
         });
+        clearSearchBtn.addEventListener('click', () => {
+            searchQuery = '';
+            searchInput.value = '';
+            clearSearchBtn.style.opacity = '0';
+            clearSearchBtn.style.pointerEvents = 'none';
+            clearSearchBtn.style.transform = 'scale(0.75)';
+            searchInput.focus();
+            applyFiltersAndRender();
+        });
+        clearAllFiltersBtn.addEventListener('click', clearAllFilters);
+        resetEmptyStateBtn.addEventListener('click', clearAllFilters);
+        // Keyboard shortcut: Escape to clear search
+        searchInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                searchQuery = '';
+                searchInput.value = '';
+                clearSearchBtn.style.opacity = '0';
+                clearSearchBtn.style.pointerEvents = 'none';
+                clearSearchBtn.style.transform = 'scale(0.75)';
+                searchInput.blur();
+                applyFiltersAndRender();
+            }
+        });
+        // ─────────────────────────────────────
+        // DATA FETCHING
+        // ─────────────────────────────────────
+        async function fetchData() {
+            try {
+                const response = await fetch('./data.json');
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                }
+                const data = await response.json();
+                // Validate data structure
+                if (!Array.isArray(data)) {
+                    throw new Error('data.json must contain an array of problems.');
+                }
+                allProblems = data.map((item, index) => ({
+                    id: item.id || index + 1,
+                    title: item.title || 'Untitled Problem',
+                    difficulty: item.difficulty || 'Medium',
+                    topic: item.topic || 'General',
+                    url: item.url || '#',
+                    platform: item.platform || 'Platform',
+                    solved: Boolean(item.solved),
+                }));
+                // Hide loading state
+                loadingState.classList.add('hidden');
+                loadingState.style.display = 'none';
+                // Initialize UI
+                updateProgressBar();
+                renderDifficultyChips();
+                renderTopicChips();
+                const filtered = getFilteredProblems();
+                renderProblemCards(filtered);
+                updateUIInfo(filtered);
+                // Show the cards grid
+                cardsGrid.classList.remove('hidden');
+            } catch (error) {
+                console.error('Failed to load data.json:', error);
+                loadingState.classList.add('hidden');
+                loadingState.style.display = 'none';
+                cardsGrid.classList.remove('hidden');
+                emptyState.classList.remove('hidden');
+                emptyState.classList.add('flex');
+                // Update empty state with error message
+                const emptyTitle = emptyState.querySelector('p:first-of-type');
+                const emptyDesc = emptyState.querySelector('p:last-of-type');
+                if (emptyTitle) emptyTitle.textContent = 'Failed to load data';
+                if (emptyDesc) emptyDesc.textContent =
+                    'Make sure data.json exists in the same directory. Check the console for details.';
+                // Hide the reset button in error state
+                if (resetEmptyStateBtn) resetEmptyStateBtn.style.display = 'none';
+            }
+        }
+        // ─────────────────────────────────────
+        // INITIALIZATION
+        // ─────────────────────────────────────
+        function init() {
+            // Set current year
+            currentYearSpan.textContent = new Date().getFullYear();
+            // Initialize theme
+            initTheme();
+            // Clear search button initial state
+            clearSearchBtn.style.opacity = '0';
+            clearSearchBtn.style.pointerEvents = 'none';
+            clearSearchBtn.style.transform = 'scale(0.75)';
+            // Fetch data and boot the app
+            fetchData();
+        }
+        // Run on DOM ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', init);
+        } else {
+            init();
+        }
+    })();
+</script>
 </body>
 </html>