feat: add scroll effect to header and improve styling for better visibility

Author: jonaspm

src/components/Navigation.astro

@@ -2,7 +2,7 @@
 const navItems = ['Home', 'Bio', 'Skills', 'Projects', 'Contact'];
 ---
 
-<header class="fixed top-0 left-0 right-0 z-20 bg-grayblue-800 bg-opacity-90">
+<header id="main-header" class="fixed top-0 left-0 right-0 z-20 bg-grayblue-800 backdrop-blur-md bg-opacity-90 transition-all duration-300 ease-in-out">
     <nav class="container mx-auto px-6 py-4">
         <!-- Mobile menu button -->
         <div class="flex items-center justify-between md:hidden">
@@ -69,4 +69,16 @@ const navItems = ['Home', 'Bio', 'Skills', 'Projects', 'Contact'];
             });
         });
     }
+
+    // Header scroll effect
+    const header = document.getElementById('main-header');
+    if (header) {
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 50) { // Adjust 50 to your preferred scroll distance
+                header.classList.add('bg-grayblue-800/60');
+            } else {
+                header.classList.remove('bg-grayblue-800/60');
+            }
+        });
+    }
 </script>