init project files

components/layout/Header.tsx

@@ -0,0 +1,71 @@
+'use client';
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { personal } from '@/content/personal';
+import styles from './Header.module.scss';
+
+const navLinks = [
+  { label: 'Home',       href: '#home'       },
+  { label: 'Tech',       href: '#tech'       },
+  { label: 'Projects',   href: '#projects'   },
+  { label: 'About',      href: '#about'      },
+  { label: 'Experience', href: '#experience' },
+  { label: 'Contact',    href: '#contact'    },
+];
+
+export default function Header() {
+  const [scrolled, setScrolled] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const fn = () => setScrolled(window.scrollY > 80);
+    window.addEventListener('scroll', fn);
+    return () => window.removeEventListener('scroll', fn);
+  }, []);
+
+  return (
+    <header className={`${styles.header} ${scrolled ? styles.scrolled : ''}`}>
+      <div className={styles.container}>
+        <Link href="#home" className={styles.logo}>
+          Ole Sch.
+        </Link>
+
+        {/* Desktop Nav */}
+        <nav className={styles.nav} aria-label="Main navigation">
+          {navLinks.map(link => (
+            <a key={link.label} href={link.href} className={styles.navLink}>
+              {link.label}
+            </a>
+          ))}
+        </nav>
+
+        {/* Hamburger */}
+        <button
+          className={`${styles.hamburger} ${menuOpen ? styles.open : ''}`}
+          onClick={() => setMenuOpen(v => !v)}
+          aria-label="Toggle menu"
+          aria-expanded={menuOpen}
+        >
+          <span /><span /><span />
+        </button>
+      </div>
+
+      {/* Mobile Menu */}
+      {menuOpen && (
+        <nav className={styles.mobileMenu} aria-label="Mobile navigation">
+          {navLinks.map((link, i) => (
+            <a
+              key={link.label}
+              href={link.href}
+              className={styles.mobileLink}
+              onClick={() => setMenuOpen(false)}
+              style={{ animationDelay: `${i * 0.05}s` }}
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+      )}
+    </header>
+  );
+}