Merge pull request #114 from Techy-ninja/main

Changes made to project page

Author: avinash201199

README.md

@@ -163,7 +163,6 @@ Whether you’re a seasoned developer or just starting out, Hacktoberfest offers
 - 🔍 [Up For Grabs](https://up-for-grabs.net/) — Projects with curated tasks for new contributors
 - 👶 [First Timers Only](https://www.firsttimersonly.com/) — Guides and issues specifically for first-time contributors
 - ⚡ [CodeTriage](https://www.codetriage.com/) — Find open issues based on your interests and skills
-- 🌟 [ContribHub](https://contribhub.com/) — Platform to discover and contribute to open source projects
 
 ### 🏛️ Major Open Source Projects
 

index.html

@@ -1312,7 +1312,7 @@
 
         <nav class="nav-links" aria-label="Main navigation">
           <a href="#what-is-hacktoberfest">Overview</a>
-          <a href="projects.html" target="_blank" rel="noopener noreferrer">Projects</a>
+          <a href="projects.html">Projects</a>
           <a href="#how-to-participate">How To</a>
           <a href="#resources">Resources</a>
         </nav>
@@ -2057,7 +2057,27 @@ <h1 class="loading-title">Loading README.md…</h1>
         }
       }
 
-      renderReadme();
+      // If visiting index.html with a hash (e.g., index.html#resources), remember it
+      const initialHash = window.location.hash ? window.location.hash.slice(1) : null;
+
+      // Render README and, if there was an initial hash, scroll to that section after render
+      renderReadme().then(() => {
+        if (initialHash) {
+          // If the article is already rendered, try to find the element and scroll to it
+          const el = document.getElementById(initialHash);
+          if (el) {
+            setTimeout(() => {
+              el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+              history.replaceState(null, '', '#' + initialHash);
+              el.classList.add('highlight-section');
+              setTimeout(() => el.classList.remove('highlight-section'), 1000);
+            }, 120);
+          } else {
+            // If element not found, ensure loadMarkdownFile handles it by reloading README and passing id
+            loadMarkdownFile('README.md', initialHash);
+          }
+        }
+      });
 
       // Theme toggle
       const themeToggle = document.getElementById('theme-toggle');

projects.html

@@ -7,12 +7,26 @@
 <link rel="stylesheet" href="assets/style.css" />
 <style>
   :root { --hf-orange:#ff8a65; --hf-purple:#9b59b6; --hf-dark:#0e1b33; --hf-light:#fff; }
+  /* When light theme is active, make the --hf-light variable dark so text becomes black */
+  [data-theme="light"] { --hf-light: #000; }
+  /* Top navigation minimal styles (copied from index.html) */
+  .logo-blob { display:inline-block; width:2em; height:2em; margin-right:0.5em; background:linear-gradient(135deg,var(--hf-orange),var(--hf-purple)); border-radius:50%; box-shadow:0 0 15px rgba(255,138,101,0.3); }
+  .brand { display:flex; align-items:center; color:var(--hf-light); text-decoration:none; }
+  .brand-text { font-weight:700; color:var(--hf-light); }
+  .topnav { background: linear-gradient(135deg, #0e1b33, var(--hf-purple)); color:var(--hf-light); padding:1rem 2rem; position:sticky; top:0; z-index:1000; box-shadow:0 2px 20px rgba(0,0,0,0.2); }
+  .topnav-inner { display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto; }
+  .nav-links { display:flex; gap:1.25rem; }
+  .nav-links a { color:var(--hf-light); text-decoration:none; padding:0.35rem 0.6rem; transition:color .2s; }
+  .nav-links a:hover { color:var(--hf-orange); }
+  .nav-actions { display:flex; gap:0.75rem; align-items:center; }
+  .nav-btn { background:none; border:none; color:#9fb1c7; font-size:1.05rem; cursor:pointer; }
+  .nav-cta { background:linear-gradient(135deg,var(--hf-orange),var(--hf-purple)); padding:0.5rem .9rem; border-radius:999px; color:var(--hf-light); text-decoration:none; font-weight:600; }
   body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif; background:radial-gradient(circle at 30% 30%, rgba(155,89,182,.15), transparent), linear-gradient(135deg,#182c4f,#3d2f67 60%, #532d72); color:var(--hf-light); min-height:100vh; }
   header { text-align:center; padding:2.75rem 1rem 1.25rem; }
   h1 { margin:0; font-size:3rem; letter-spacing:.07em; font-weight:700; text-shadow:0 4px 18px rgba(0,0,0,.45); }
   .subtitle { margin-top:.75rem; font-size:.9rem; letter-spacing:.15em; opacity:.85; }
   .search-panel { margin:2.5rem auto 1.25rem; max-width:780px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); padding:1.75rem 1.5rem 2rem; border-radius:26px; position:relative; backdrop-filter:blur(10px); box-shadow:0 10px 40px -10px rgba(0,0,0,.35); }
-  .search-panel:before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,rgba(255,138,101,.45),rgba(155,89,182,.45)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
+  .search-panel:before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,rgba(255,138,101,.45),rgba(155,89,182,.45)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; pointer-events:none; }
   .language-search-form { display:flex; width:100%; border:1px solid rgba(255,255,255,0.25); border-radius:10px; overflow:hidden; background:rgba(0,0,0,0.35); }
   .language-search-form input { flex:1; background:transparent; border:none; padding:.9rem 1rem; color:var(--hf-light); font-size:1rem; letter-spacing:.03em; }
   .language-search-form input:focus { outline:none; box-shadow: inset 0 0 0 2px var(--hf-purple); }
@@ -57,6 +71,33 @@
 </style>
 </head>
 <body>
+  <header class="topnav" role="banner">
+    <div class="topnav-inner">
+      <a class="brand" href="index.html" title="Home">
+        <span class="logo-blob" aria-hidden="true"></span>
+        <span class="brand-text">Hacktoberfest 2025</span>
+      </a>
+
+      <nav class="nav-links" aria-label="Main navigation">
+        <a href="index.html#what-is-hacktoberfest">Overview</a>
+        <a href="projects.html">Projects</a>
+        <a href="index.html#how-to-participate">How To</a>
+        <a href="index.html#resources">Resources</a>
+      </nav>
+
+      <div class="nav-actions">
+        <button id="nav-search-btn" class="nav-btn" title="Search (/)">
+          🔎
+        </button>
+        <button id="theme-toggle" class="nav-btn" title="Toggle theme">
+          🌙
+        </button>
+        <a class="nav-cta" href="https://github.com/avinash201199/Hacktoberfest2025" target="_blank" rel="noopener">GitHub</a>
+        <button id="hamburger" class="nav-btn" aria-label="Toggle sidebar">☰</button>
+      </div>
+    </div>
+  </header>
+
   <header>
     <h1>SEARCH YOUR<br/>LANGUAGE</h1>
     <p class="subtitle">Live Hacktoberfest repositories grouped by programming language</p>
@@ -192,5 +233,40 @@ <h3><a href="${r.html_url}" target="_blank" rel="noopener noreferrer">${r.full_n
     resultsContent.appendChild(grid);
   }
 </script>
+<script>
+  // Theme toggle: mirror main page behavior and persist selection
+  (function(){
+    const themeToggle = document.getElementById('theme-toggle');
+    if (!themeToggle) return;
+    const html = document.documentElement;
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+    html.setAttribute('data-theme', savedTheme);
+    themeToggle.textContent = savedTheme === 'dark' ? '🌙' : '☀️';
+
+    themeToggle.addEventListener('click', () => {
+      const current = html.getAttribute('data-theme');
+      const next = current === 'dark' ? 'light' : 'dark';
+      html.setAttribute('data-theme', next);
+      localStorage.setItem('theme', next);
+      themeToggle.textContent = next === 'dark' ? '🌙' : '☀️';
+    });
+  })();
+</script>
+<script>
+  // Ensure navbar links from this page navigate to index.html with the correct fragment
+  document.querySelectorAll('.nav-links a').forEach(a => {
+    a.addEventListener('click', (e) => {
+      const href = a.getAttribute('href');
+      // If it's already a full index.html#... link, let it proceed
+      if (href && href.startsWith('index.html#')) return;
+      // If it's just a fragment like #resources or points to index fragment, build proper URL
+      if (href && href.startsWith('#')) {
+        e.preventDefault();
+        window.location.href = 'index.html' + href;
+      }
+      // If it's a plain 'index.html', leave as-is
+    });
+  });
+</script>
 </body>
 </html>