🐐

index.html

@@ -36,6 +36,11 @@
       <a href="#home" class="nav-logo">
         <span class="bracket">&lt;</span>NG<span class="bracket">/&gt;</span>
       </a>
+      <button class="burger" id="burger" aria-label="Menu">
+        <span></span><span></span><span></span>
+      </button>
+    </nav>
+  </header>
   <ul class="nav-links" id="navLinks">
     <li><a href="#about"      class="nav-link">About</a></li>
     <li><a href="#skills"     class="nav-link">Skills</a></li>
@@ -43,11 +48,6 @@
     <li><a href="#experience" class="nav-link">Experience</a></li>
     <li><a href="#education"  class="nav-link">Education</a></li>
   </ul>
-      <button class="burger" id="burger" aria-label="Menu">
-        <span></span><span></span><span></span>
-      </button>
-    </nav>
-  </header>
 
   <main>
 

script.js

@@ -171,9 +171,10 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
   const header    = document.getElementById('header');
   const links     = document.querySelectorAll('.nav-link');
   const sections  = document.querySelectorAll('section[id]');
+  const burger    = document.getElementById('burger');
 
   window.addEventListener('scroll', () => {
-    header.classList.toggle('scrolled', window.scrollY > 24);
+    header.classList.toggle('scrolled', window.scrollY > 24 || burger.classList.contains('open'));
 
     let current = '';
     sections.forEach(s => {
@@ -190,14 +191,17 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
 (function () {
   const burger    = document.getElementById('burger');
   const navLinks  = document.getElementById('navLinks');
+  const header    = document.getElementById('header');
   burger.addEventListener('click', () => {
     burger.classList.toggle('open');
     navLinks.classList.toggle('open');
+    header.classList.toggle('scrolled', burger.classList.contains('open') || window.scrollY > 24);
   });
   navLinks.querySelectorAll('a').forEach(a => {
     a.addEventListener('click', () => {
       burger.classList.remove('open');
       navLinks.classList.remove('open');
+      header.classList.toggle('scrolled', window.scrollY > 24);
     });
   });
 })();

style.css

@@ -77,13 +77,16 @@ button { font-family: var(--font); cursor: pointer; border: none; background: no
 
 /* ── Nav ────────────────────────────────────────────────────── */
 #header {
-  background: rgba(254, 254, 227, 0.85);
+  background: rgba(254, 254, 227, 0);
   position: fixed; top: 0; left: 0; right: 0;
   height: var(--nav-h);
   z-index: 1000;
   transition: background 0.3s, box-shadow 0.3s;
 }
 #header.scrolled {
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+  background: rgba(254, 254, 227, 0.75);
   box-shadow: 0 2px 20px rgba(230, 57, 70, 0.08);
 }
 nav {
@@ -104,6 +107,17 @@ nav {
 .nav-logo:hover { color: var(--red); }
 
 .nav-links { display: flex; gap: 0.1rem; }
+
+@media (min-width: 769px) {
+  .nav-links {
+    position: fixed;
+    top: 0;
+    right: max(calc((100vw - var(--max-w)) / 2 + 2rem), 2rem);
+    height: var(--nav-h);
+    align-items: center;
+    z-index: 1001;
+  }
+}
 .nav-link {
   font-weight: 700;
   font-size: 0.8rem;
@@ -485,7 +499,7 @@ footer {
     position: fixed;
     top: var(--nav-h);
     left: 0; right: 0;
-    background: rgba(254,254,227,0.5);
+    background: rgba(254, 254, 227, 0.75);;
     backdrop-filter: blur(30px);
     -webkit-backdrop-filter: blur(30px);
     flex-direction: column;