From 5fdde7257d0cd6ae53ee7c1dc0276b77be35ad63 Mon Sep 17 00:00:00 2001
From: NikolajDanger <nikolaj@ingemanngade.net>
Date: Fri, 13 Mar 2026 17:50:20 +0100
Subject: [PATCH] :goat:

---
 index.html | 14 +++++++-------
 script.js  | 20 ++++++++++++--------
 style.css  | 18 ++++++++++++++++--
 3 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 80b227f..0e07c2e 100644
--- a/index.html
+++ b/index.html
@@ -36,18 +36,18 @@
       <a href="#home" class="nav-logo">
         <span class="bracket">&lt;</span>NG<span class="bracket">/&gt;</span>
       </a>
-      <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>
-        <li><a href="#projects"   class="nav-link">Projects</a></li>
-        <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>
+  <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>
+    <li><a href="#projects"   class="nav-link">Projects</a></li>
+    <li><a href="#experience" class="nav-link">Experience</a></li>
+    <li><a href="#education"  class="nav-link">Education</a></li>
+  </ul>
 
   <main>
 
diff --git a/script.js b/script.js
index cae4014..f4c59d8 100644
--- a/script.js
+++ b/script.js
@@ -58,8 +58,8 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
 
 // ── Sprinkle background ────────────────────────────
 (function () {
-  const canvas = document.getElementById('bgCanvas');
-  const ctx    = canvas.getContext('2d');
+  const canvas  = document.getElementById('bgCanvas');
+  const ctx     = canvas.getContext('2d');
 
   const COLORS  = ['#e63946', '#f4722b', '#ffbe0b', '#ff006e', '#e07b39', '#ffd166'];
   const COUNT   = 1000;   // number of sprinkles
@@ -168,12 +168,13 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
 
 // ── Nav: scroll state & active link ───────────────────────────
 (function () {
-  const header   = document.getElementById('header');
-  const links    = document.querySelectorAll('.nav-link');
-  const sections = document.querySelectorAll('section[id]');
+  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 => {
@@ -188,16 +189,19 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
 
 // ── Mobile burger ──────────────────────────────────────────────
 (function () {
-  const burger   = document.getElementById('burger');
-  const navLinks = document.getElementById('navLinks');
+  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);
     });
   });
 })();
diff --git a/style.css b/style.css
index c2aaae2..11324c1 100644
--- a/style.css
+++ b/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;