Spaces:

Json026
/

DSA_Tutorials

Configuration error

App Files Files Community

Json026 commited on 3 days ago

Commit

89c1bd5

verified ·

1 Parent(s): 7a827b9

Update index.html

Browse files

Files changed (1) hide show

index.html +423 -210

index.html CHANGED Viewed

@@ -1,229 +1,442 @@
 <!DOCTYPE html>
-<html lang="en" class="scroll-smooth">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- SEO Meta Tags -->
-    <title>DSA Odyssey | Problem Solving Portfolio</title>
-    <meta name="description" content="A curated collection of Data Structures and Algorithms problems solved by [Your Name]. Featuring complexity analysis and clean code.">
-    <meta property="og:title" content="DSA Odyssey Portfolio">
-    <meta property="og:description" content="Explore my journey through 30+ DSA challenges with optimized solutions.">
-    <meta property="og:type" content="website">
-    <!-- Fonts & Icons -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-    <script src="https://unpkg.com/lucide@latest"></script>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-        body { font-family: 'Inter', sans-serif; }
-        .mono { font-family: 'JetBrains Mono', monospace; }
-        /* Glassmorphism utility */
-        .glass {
-            background: rgba(255, 255, 255, 0.03);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .dark .glass {
-            background: rgba(0, 0, 0, 0.2);
-            border: 1px solid rgba(255, 255, 255, 0.05);
-        }
-        /* Custom Scrollbar */
-        ::-webkit-scrollbar { width: 8px; }
-        ::-webkit-scrollbar-track { background: #0f172a; }
-        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
-    </style>
-    <script>
-        // Tailwind Config for Dark Mode
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    colors: {
-                        darkBg: '#020617',
-                        accent: '#3b82f6'
-                    }
-                }
-            }
-        }
-    </script>
 </head>
-<body class="bg-slate-50 dark:bg-darkBg text-slate-900 dark:text-slate-100 transition-colors duration-300">
-    <!-- Navigation -->
-    <nav class="sticky top-0 z-50 glass border-b border-slate-200 dark:border-slate-800 px-6 py-4">
-        <div class="max-w-6xl mx-auto flex justify-between items-center">
-            <div class="flex items-center gap-2">
-                <i data-lucide="terminal" class="text-accent"></i>
-                <span class="font-bold text-xl tracking-tight">DSA.Portfolio</span>
-            </div>
-            <button id="themeToggle" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors">
-                <i data-lucide="moon" id="themeIcon"></i>
-            </button>
-        </div>
     </nav>
-    <main class="max-w-6xl mx-auto px-6 py-12">
-        <!-- Hero Section -->
-        <header class="mb-16">
-            <h1 class="text-4xl md:text-6xl font-extrabold mb-4 bg-gradient-to-r from-slate-900 to-slate-500 dark:from-white dark:to-slate-500 bg-clip-text text-transparent">
-                Mastering Algorithms.
-            </h1>
-            <p class="text-slate-500 dark:text-slate-400 max-w-2xl text-lg mb-8">
-                A technical log of algorithmic challenges, complexity analysis, and efficient data structure implementations.
-            </p>
-            <!-- Progress Tracker -->
-            <div class="max-w-xs">
-                <div class="flex justify-between mb-2 text-sm font-medium">
-                    <span>Overall Progress</span>
-                    <span id="progressText">0/30</span>
-                </div>
-                <div class="w-full bg-slate-200 dark:bg-slate-800 h-2 rounded-full overflow-hidden">
-                    <div id="progressBar" class="bg-accent h-full transition-all duration-1000" style="width: 0%"></div>
-                </div>
-            </div>
-        </header>
-        <!-- Search and Filters -->
-        <section class="mb-12 space-y-6">
-            <div class="relative group">
-                <i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-accent transition-colors"></i>
-                <input type="text" id="searchInput" placeholder="Search problems (e.g. 'Two Sum' or 'Graph')..."
-                    class="w-full bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-slate-800 rounded-2xl py-4 pl-12 pr-4 focus:ring-2 focus:ring-accent outline-none transition-all shadow-sm">
-            </div>
-            <div class="flex flex-wrap gap-2" id="filterContainer">
-                <button class="filter-btn active px-4 py-1.5 rounded-full text-sm font-medium border border-slate-200 dark:border-slate-800 transition-all bg-slate-900 text-white dark:bg-white dark:text-black" data-filter="all">All</button>
-                <button class="filter-btn px-4 py-1.5 rounded-full text-sm font-medium border border-slate-200 dark:border-slate-800 hover:border-accent transition-all" data-filter="Easy">Easy</button>
-                <button class="filter-btn px-4 py-1.5 rounded-full text-sm font-medium border border-slate-200 dark:border-slate-800 hover:border-accent transition-all" data-filter="Medium">Medium</button>
-                <button class="filter-btn px-4 py-1.5 rounded-full text-sm font-medium border border-slate-200 dark:border-slate-800 hover:border-accent transition-all" data-filter="Hard">Hard</button>
-            </div>
-        </section>
-        <!-- Problem Grid -->
-        <div id="problemGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <!-- Skeleton Loading -->
-            <div class="animate-pulse glass h-48 rounded-2xl"></div>
-            <div class="animate-pulse glass h-48 rounded-2xl"></div>
-            <div class="animate-pulse glass h-48 rounded-2xl"></div>
         </div>
-    </main>
-    <footer class="border-t border-slate-200 dark:border-slate-800 py-12 text-center text-slate-500 text-sm">
-        <p>© 2026 • Designed for high performance.</p>
-    </footer>
-    <script>
-        // App State
-        let problems = [];
-        let currentFilter = 'all';
-        let searchQuery = '';
-        // Lucide Icons Initialization
-        lucide.createIcons();
-        // Theme Toggle Logic
-        const themeToggle = document.getElementById('themeToggle');
-        const html = document.documentElement;
-        themeToggle.addEventListener('click', () => {
-            html.classList.toggle('dark');
-            const isDark = html.classList.contains('dark');
-            themeToggle.querySelector('i').setAttribute('data-lucide', isDark ? 'sun' : 'moon');
-            lucide.createIcons();
-        });
-        // Fetch Data
-        async function fetchProblems() {
-            try {
-                // In a real scenario, use: const response = await fetch('data.json');
-                // For this demo, I'll simulate the data directly if file is missing
-                const data = [
-                    { "id": 1, "title": "Two Sum", "difficulty": "Easy", "topic": "Arrays", "url": "#" },
-                    { "id": 2, "title": "Longest Substring", "difficulty": "Medium", "topic": "Sliding Window", "url": "#" },
-                    { "id": 3, "title": "Merge K Sorted Lists", "difficulty": "Hard", "topic": "Heap", "url": "#" },
-                    { "id": 4, "title": "Valid Anagram", "difficulty": "Easy", "topic": "Hashing", "url": "#" },
-                    { "id": 5, "title": "Number of Islands", "difficulty": "Medium", "topic": "Graphs", "url": "#" }
-                ];
-                problems = data;
-                updateUI();
-            } catch (error) {
-                console.error("Failed to fetch data:", error);
-            }
-        }
-        function updateUI() {
-            const grid = document.getElementById('problemGrid');
-            const filtered = problems.filter(p => {
-                const matchesFilter = currentFilter === 'all' || p.difficulty === currentFilter;
-                const matchesSearch = p.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                                    p.topic.toLowerCase().includes(searchQuery.toLowerCase());
-                return matchesFilter && matchesSearch;
-            });
-            // Update Progress
-            const total = 30;
-            const solved = problems.length;
-            document.getElementById('progressText').innerText = `${solved}/${total}`;
-            document.getElementById('progressBar').style.width = `${(solved / total) * 100}%`;
-            grid.innerHTML = filtered.map(p => `
-                <article class="group glass p-6 rounded-2xl hover:border-accent/50 transition-all cursor-pointer flex flex-col justify-between">
-                    <div>
-                        <div class="flex justify-between items-start mb-4">
-                            <span class="text-xs font-bold uppercase tracking-widest px-2 py-1 rounded bg-slate-100 dark:bg-slate-800 ${getDiffClass(p.difficulty)}">
-                                ${p.difficulty}
-                            </span>
-                            <span class="text-slate-400 text-xs mono">#${p.id.toString().padStart(3, '0')}</span>
-                        </div>
-                        <h3 class="text-xl font-bold mb-2 group-hover:text-accent transition-colors">${p.title}</h3>
-                        <div class="flex items-center gap-2 text-slate-500 text-sm">
-                            <i data-lucide="tag" class="w-4 h-4"></i>
-                            <span>${p.topic}</span>
-                        </div>
-                    </div>
-                    <a href="${p.url}" class="mt-6 flex items-center justify-between text-sm font-semibold group-hover:translate-x-1 transition-transform">
-                        View Solution <i data-lucide="arrow-right" class="w-4 h-4"></i>
-                    </a>
-                </article>
-            `).join('');
-            lucide.createIcons();
-        }
-        function getDiffClass(diff) {
-            if(diff === 'Easy') return 'text-emerald-500';
-            if(diff === 'Medium') return 'text-amber-500';
-            return 'text-rose-500';
         }
-        // Event Listeners
-        document.getElementById('searchInput').addEventListener('input', (e) => {
-            searchQuery = e.target.value;
-            updateUI();
-        });
-        document.getElementById('filterContainer').addEventListener('click', (e) => {
-            if (e.target.classList.contains('filter-btn')) {
-                document.querySelectorAll('.filter-btn').forEach(btn => {
-                    btn.classList.remove('bg-slate-900', 'text-white', 'dark:bg-white', 'dark:text-black');
-                });
-                e.target.classList.add('bg-slate-900', 'text-white', 'dark:bg-white', 'dark:text-black');
-                currentFilter = e.target.dataset.filter;
-                updateUI();
-            }
         });
-        // 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" />
+  <!-- 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>