feat: add header component

- add font Adwaita Sans
- add font styles
- add app styles
- add data json

src/lib/components/Header.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { Header } from '$lib/types/data';
+
+	let { links }: Header = $props();
+</script>
+
+<header>
+	<nav>
+		<ul>
+			{#each links as { href, label }, i (i)}
+				<li>
+					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+					<a href={href}>{label}</a>
+				</li>
+			{/each}
+		</ul>
+	</nav>
+</header>
+
+<style>
+    header {
+        position: fixed;
+				inset-inline: 0;
+        bottom: 5rem;
+        z-index: var(--z-index-header);
+
+        width: fit-content;
+        padding: 1rem;
+				margin-inline: auto;
+
+				border: 1px solid var(--color-header-border);
+				border-radius: 0.5rem;
+
+				font-size: 0.75rem;
+				font-weight: bold;
+
+        background-color: var(--color-dark-blue);
+        backdrop-filter: blur(1rem);
+
+
+        @media (min-width: 768px) {
+            top: 0;
+						bottom: unset;
+
+            width: auto;
+            padding: 1rem;
+
+						border-radius: unset;
+
+						font-size: 1.125rem;
+        }
+    }
+
+    ul {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+
+        margin: unset;
+        padding: unset;
+        list-style: none;
+
+				@media (min-width: 768px) {
+						gap: 2rem;
+        }
+    }
+
+    li {
+        display: contents;
+    }
+
+    a {
+				padding: 0.5rem;
+        color: var(--color-text-primary);
+				text-decoration: none;
+        transition: ease-in-out 0.2s;
+
+        &:hover {
+            color: var(--color-accent-primary);
+        }
+    }
+</style>

src/lib/data/data.json

@@ -0,0 +1,22 @@
+{
+	"header": {
+		"links": [
+			{
+				"label": "Profil",
+				"href": "#profile"
+			},
+			{
+				"label": "Projekte",
+				"href": "#projects"
+			},
+			{
+				"label": "Skills",
+				"href": "#skills"
+			},
+			{
+				"label": "Kontakt",
+				"href": "#contact"
+			}
+		]
+	}
+}

src/lib/styles/app.css

@@ -1,12 +1,26 @@
 :root {
+    --color-body-background: oklch(0.21 0.034 264.665);
+    --color-header-border: oklab(0.623 -0.0378409 -0.210628 / 0.3);
+    --color-dark-blue: oklab(0.21 -0.00316128 -0.0338527 / 0.95);
+    --color-text-primary: oklch(0.872 0.01 258.338);
+    --color-accent-primary: oklch(70.7% 0.165 254.624);
+    --color-accent-secondary:oklch(0.585 0.233 277.117);
 
+    --z-index-header: 50;
+}
+
+:root {
+    font-size: 16px;
+    color: var(--color-text-primary);
 }
 
 * {
     box-sizing: border-box;
 }
 
-body {
-    font-family: 'AdwaitaMono', sans-serif;
+html, body {
+    position: relative;
     margin: unset;
+    background-color: var(--color-body-background);
+    font-family: 'AdwaitaSans', 'AdwaitaMono', sans-serif;
 }

src/lib/styles/font.css

@@ -1,4 +1,20 @@
-/* Regular */
+/* Sans Regular */
+@font-face {
+    font-family: 'AdwaitaSans';
+    src: url('$lib/assets/font/AdwaitaSans-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+/* Sans Italic */
+@font-face {
+    font-family: 'AdwaitaSans';
+    src: url('$lib/assets/font/AdwaitaSans-Italic.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+}
+
+/* Mono Regular */
 @font-face {
     font-family: 'AdwaitaMono';
     src: url('$lib/assets/font/AdwaitaMono-Regular.ttf') format('truetype');
@@ -6,7 +22,7 @@
     font-style: normal;
 }
 
-/* Italic */
+/* Mono Italic */
 @font-face {
     font-family: 'AdwaitaMono';
     src: url('$lib/assets/font/AdwaitaMono-Italic.ttf') format('truetype');
@@ -14,7 +30,7 @@
     font-style: italic;
 }
 
-/* Bold */
+/* Mono Bold */
 @font-face {
     font-family: 'AdwaitaMono';
     src: url('$lib/assets/font/AdwaitaMono-Bold.ttf') format('truetype');
@@ -22,7 +38,7 @@
     font-style: normal;
 }
 
-/* Bold Italic */
+/* Mono Bold Italic */
 @font-face {
     font-family: 'AdwaitaMono';
     src: url('$lib/assets/font/AdwaitaMono-BoldItalic.ttf') format('truetype');

src/lib/types/data.ts

@@ -0,0 +1,12 @@
+export type Data = {
+	header: Header;
+}
+
+export type Header = {
+	links: HeaderLink[];
+}
+
+export type HeaderLink = {
+	label: string;
+	href: string;
+}