Add live GitHub repos counter fetched from GitHub API

Author: NotAwar

index.html

@@ -50,7 +50,7 @@ <h2 class="hero-subtitle" id="typewriter" data-text="{{ site.data.profile.headli
         <div class="stat-label">Contributions Last Year</div>
       </div>
       <div class="stat-card">
-        <div class="stat-number" data-count="{{ site.github.public_repositories.size }}">{{ site.github.public_repositories.size }}+</div>
+        <div class="stat-number" id="github-repos" data-count="0">Loading...</div>
         <div class="stat-label">Open Source Repos</div>
       </div>
     </div>
@@ -134,6 +134,28 @@ <h3>Connect</h3>
     }
   }
 
+  // Fetch live GitHub repos count
+  async function fetchGitHubRepos() {
+    const reposElement = document.getElementById('github-repos');
+    
+    try {
+      // Use GitHub API to get user info
+      const response = await fetch('https://api.github.com/users/NotAwar');
+      const data = await response.json();
+      
+      if (data.public_repos) {
+        // Animate the counter
+        animateCounter(reposElement, data.public_repos, data.public_repos.toString());
+      } else {
+        reposElement.textContent = '45+';
+      }
+    } catch (error) {
+      console.error('Error fetching GitHub repos:', error);
+      // Fallback to a default value
+      reposElement.textContent = '45+';
+    }
+  }
+  
   // Animate counter from 0 to target
   function animateCounter(element, targetNum, displayCount) {
     const duration = 2000; // 2 seconds
@@ -157,8 +179,12 @@ <h3>Connect</h3>
 
   // Run on page load
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', fetchGitHubContributions);
+    document.addEventListener('DOMContentLoaded', () => {
+      fetchGitHubContributions();
+      fetchGitHubRepos();
+    });
   } else {
     fetchGitHubContributions();
+    fetchGitHubRepos();
   }
 </script>