Rewrite whole project in svelte for better accessibility

Signed-off-by: Filip Wandzio <contact@philw.dev>

1 files changed, 38 insertions, 0 deletions

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
new file mode 100644
index 0000000..eeeb78d
--- /dev/null
+++ b/src/lib/components/Header.svelte
@@ -0,0 +1,38 @@
+<script>
+    let menuOpen = false;
+
+    function toggleMenu() {
+        menuOpen = !menuOpen;
+    }
+
+    function closeMenu() {
+        menuOpen = false;
+    }
+</script>
+
+<header>
+    <div class="header-top">
+        <h1>Filip Wandzio</h1>
+        <button
+            class="menu-toggle"
+            on:click={toggleMenu}
+            aria-expanded={menuOpen}
+            aria-controls="main-nav"
+        >
+            {#if menuOpen}
+                ✕ <span class="sr-only">Close menu</span>
+            {:else}
+                ☰ <span class="sr-only">Open menu</span>
+            {/if}
+        </button>
+    </div>
+
+    <nav id="main-nav" aria-label="Main navigation">
+        <ul class:open={menuOpen}>
+            <li><a href="#about" on:click={closeMenu}>About</a></li>
+            <li><a href="#projects" on:click={closeMenu}>Projects</a></li>
+            <li><a href="#research" on:click={closeMenu}>Research</a></li>
+            <li><a href="#contact" on:click={closeMenu}>Contact</a></li>
+        </ul>
+    </nav>
+</header>