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 {
+html, body {
-    font-family: 'AdwaitaMono', sans-serif;
+    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;
+}

src/routes/+layout.svelte

@@ -2,12 +2,17 @@
 	import '$lib/styles/app.css';
 	import '$lib/styles/font.css';
 	import favicon from '$lib/assets/favicon.svg';
+	import Header from '$lib/components/Header.svelte';
+	import content from '$lib/data/data.json';
+	import type { Data } from '$lib/types/data';
 
 	let { children } = $props();
+	let data: Data = content;
 </script>
 
 <svelte:head>
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
+<Header {...data.header} />
 {@render children()}

src/routes/+page.svelte

@@ -1,2 +1,172 @@
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem debitis dicta distinctio dolores dolorum ea eum
+	facilis ipsum itaque labore maxime odio, qui vel vero voluptas? Debitis ea praesentium quibusdam!
+</div>
+<div>Cumque enim eos facere magnam vero! A autem, delectus dignissimos distinctio enim inventore laudantium natus nihil
+	non omnis quisquam repudiandae sequi ullam veritatis vitae voluptas voluptates voluptatibus. Doloribus perspiciatis,
+	velit.
+</div>
+<div>Ab aliquid consectetur cum ea enim, est fugit, hic iure modi necessitatibus nobis non obcaecati odio officiis quam
+	quia, quibusdam reprehenderit sunt suscipit tenetur vel vitae voluptas! Eos, impedit, quidem?
+</div>
+<div>Consequuntur facere fuga neque nulla praesentium vero vitae! A aliquam aperiam, commodi doloremque et harum maiores
+	suscipit unde. Ad architecto dicta fugiat impedit molestias quae qui quod sint? Consequatur, ipsam?
+</div>
+<div>Blanditiis consectetur dolore eum mollitia voluptatibus. Eveniet expedita facilis minima nisi quisquam? Id quasi,
+	soluta! A atque, deserunt dolores eveniet magni molestiae nulla quas quisquam repudiandae similique velit vero
+	voluptatum.
+</div>
+<div>Accusamus accusantium ad adipisci alias animi eos et eveniet hic, incidunt inventore iste itaque laboriosam
+	laudantium molestias necessitatibus nesciunt nisi nobis odio, officia porro possimus, praesentium rem rerum similique
+	totam.
+</div>
+<div>Autem culpa cumque fugiat hic natus reiciendis tenetur. Aperiam aspernatur atque debitis, dignissimos doloremque
+	ducimus fuga illo impedit itaque magnam minima nostrum numquam odio quos repudiandae unde voluptate. Ipsam, pariatur!
+</div>
+<div>Alias aspernatur, assumenda commodi delectus doloremque excepturi exercitationem fugiat inventore ipsam iste
+	necessitatibus numquam perferendis tempora veniam voluptatem. Accusamus dolor doloribus ducimus est nam, nobis officia
+	placeat reiciendis rem totam.
+</div>
+<div>Ad commodi culpa delectus ea, eius ex ipsam iusto magnam recusandae rem repellat saepe sed voluptatum? At
+	consequatur dolor, esse incidunt minima nulla officiis veritatis. Cum ipsum iure similique temporibus!
+</div>
+<div>Accusamus alias animi architecto atque blanditiis consequuntur dolorum, eligendi eum ex facilis hic ipsa iste nemo,
+	nobis omnis provident qui quia quis rem sunt tempore ullam unde. Id, magnam, quam.
+</div>
+<div>Accusantium atque consectetur dignissimos dolor doloribus dolorum ea et labore magni mollitia necessitatibus neque
+	omnis, porro quaerat qui quidem quod quos ratione rerum tempora veniam, vero vitae voluptatem? Animi, fugiat.
+</div>
+<div>Consectetur, debitis dolores doloribus ea minima pariatur placeat quidem tenetur veniam. Ab, beatae cumque deserunt
+	ducimus enim eum ex illum incidunt labore modi, natus nemo nihil omnis quasi quia voluptates!
+</div>
+<div>Alias asperiores autem blanditiis dolorem ea error illum iure, laborum necessitatibus quia quibusdam quidem,
+	reiciendis vel. Beatae corporis est laudantium libero quidem sed vero! Adipisci in iusto officiis ratione
+	reprehenderit.
+</div>
+<div>A animi dolorum id perspiciatis sequi tenetur voluptas? Accusantium beatae commodi dicta distinctio doloribus eos
+	odio provident quasi, quia rem reprehenderit sit, voluptates. Aliquid asperiores cumque inventore nulla quibusdam?
+	Natus.
+</div>
+<div>A animi architecto aut autem eius eum eveniet facere ipsam nulla odio quam quidem quis quos ratione, sit soluta
+	tempora tempore velit. Cum, dolorem hic illum quam rem tenetur vero!
+</div>
+<div>Accusantium ad adipisci aspernatur ea est eum ipsa nam porro. Accusantium architecto autem consequuntur cupiditate
+	deserunt doloribus dolorum error ex explicabo itaque iusto praesentium qui, repellendus sint sunt, velit veniam!
+</div>
+<div>Adipisci consequatur cum dicta et ex harum illum laudantium magni maxime nisi perferendis porro quasi quod,
+	recusandae reprehenderit rerum sint tempore vero vitae voluptas? Ad delectus libero nesciunt quod totam.
+</div>
+<div>Culpa dignissimos facere quam? Aliquid, atque deserunt dignissimos dolorem eius eos eveniet, fugiat iusto magnam
+	magni maxime nulla obcaecati sunt tenetur veniam voluptas voluptatibus. Adipisci consectetur corporis ducimus fugiat
+	incidunt?
+</div>
+<div>Dolorem explicabo minima odio quis recusandae. Accusantium amet earum fugit illo nostrum quasi sit voluptatibus!
+	Accusantium aliquam aspernatur blanditiis commodi debitis, doloremque inventore laboriosam molestias nesciunt, nulla
+	ratione, recusandae temporibus?
+</div>
+<div>Aperiam dicta dolor error ipsam iusto nostrum quas sint. Eius hic itaque sequi. Accusantium blanditiis, error
+	impedit, itaque laboriosam minima molestiae nisi possimus repellendus sequi sit soluta veniam? Quas, repudiandae!
+</div>
+<div>Ab aut beatae blanditiis, deleniti, dolor ducimus esse illo praesentium repellat repellendus, reprehenderit sed
+	similique velit. Aliquid aspernatur eligendi ex ipsam necessitatibus numquam, odit omnis, optio quisquam quod suscipit
+	unde.
+</div>
+<div>Animi consectetur consequatur delectus, enim eveniet illum recusandae unde. Accusantium amet autem, deserunt dolore
+	esse illo impedit magnam magni nobis quae repellat sapiente ut vitae! Esse modi natus optio quas?
+</div>
+<div>Aliquam aliquid est excepturi fuga illum inventore nostrum provident, similique soluta! Alias aperiam, consequuntur
+	corporis est eum id, illum in magnam, molestiae nisi quisquam sapiente soluta voluptate. Maxime quaerat, soluta.
+</div>
+<div>Accusantium aliquam aliquid autem consequatur culpa eaque et, facere fugiat iste minima necessitatibus quia
+	quisquam quo rem vitae! Aspernatur cum cumque est fuga, illum ipsa ipsam nostrum officia perspiciatis ullam!
+</div>
+<div>A impedit in iste, officiis pariatur porro quasi saepe. A adipisci atque aut dicta ducimus fuga nam neque nulla
+	pariatur perspiciatis sapiente, tempora velit vitae! Architecto doloribus et nihil voluptatibus!
+</div>
+<div>Eligendi eos magnam temporibus! Excepturi facere itaque vel! Ad amet autem beatae doloribus, harum ipsa ipsum
+	labore nisi nobis nostrum placeat, saepe sapiente sed sunt vel, veritatis voluptates! Minus, vel.
+</div>
+<div>A adipisci animi ducimus esse in minima mollitia, nihil quaerat ratione voluptatum! Accusantium assumenda aut
+	beatae eveniet fugiat incidunt nam necessitatibus nesciunt placeat, quis rerum, sed tenetur? Aspernatur, nihil,
+	veniam.
+</div>
+<div>Aliquam asperiores consequatur corporis debitis deleniti facilis impedit ipsum labore nemo odio porro, possimus
+	quam quia quos, similique sint voluptates! Ab accusamus amet consequatur eius illo impedit quidem veritatis
+	voluptatem.
+</div>
+<div>Aperiam consequatur dignissimos eius illum itaque obcaecati placeat recusandae sed. Aperiam aspernatur at
+	blanditiis deserunt ducimus eius excepturi fuga id impedit, modi, nam praesentium quod quos repellendus rerum sint
+	voluptatibus.
+</div>
+<div>Animi architecto aut autem corporis cum debitis dignissimos expedita facere ipsa magni molestiae molestias officia
+	optio, possimus quaerat repellendus reprehenderit unde vero! Cumque et eum fugiat maiores totam voluptate voluptatum!
+</div>
+<div>Accusantium alias amet autem, consequuntur, corporis cum doloremque ducimus eveniet excepturi hic magnam magni
+	maxime modi quam quia quibusdam quos recusandae repellat reprehenderit rerum sed similique tenetur velit? Omnis,
+	reprehenderit!
+</div>
+<div>Alias deserunt illum incidunt laborum maiores molestiae, quae quisquam sapiente veritatis voluptatem? Ab, aut
+	distinctio dolores enim hic nesciunt odio repudiandae temporibus velit voluptatem. Corporis doloremque expedita nisi
+	nulla qui.
+</div>
+<div>Magnam quae quo sint? Et facilis itaque magni nobis voluptatum? Atque delectus dolore dolorem dolores, dolorum
+	eligendi enim esse et harum in ipsam iste minus, nostrum quis recusandae unde ut.
+</div>
+<div>Accusantium distinctio eaque error id iure rem tenetur. Accusamus aperiam cumque hic id, iste laborum libero nihil
+	nobis praesentium quas quis reiciendis similique ut. Accusantium cumque cupiditate est fugit iste!
+</div>
+<div>Ab cumque dicta dolore exercitationem laboriosam nobis nostrum perferendis qui saepe vitae! Accusamus accusantium
+	aperiam, at autem culpa cumque ea eaque fuga ipsam rem, reprehenderit soluta veniam voluptate? Consequatur, cum.
+</div>
+<div>Libero, officiis, totam. A, asperiores atque dicta error eveniet ipsam labore laboriosam libero omnis. Aliquid ea
+	quidem tenetur totam voluptas? Ea exercitationem nulla perferendis. Debitis explicabo fuga laboriosam recusandae
+	tenetur?
+</div>
+<div>Atque error illo itaque necessitatibus numquam, perspiciatis quaerat qui quos tempore voluptates! Doloremque ea
+	quis tenetur unde. Accusantium dignissimos est ex exercitationem facere, fugit illo laborum quasi qui sapiente
+	voluptates!
+</div>
+<div>Aperiam assumenda culpa fugit harum, incidunt non, nostrum quidem ratione, sequi tempore voluptas voluptate
+	voluptates. Est expedita facilis harum illo magnam quam sed tenetur totam. Cum nihil quia quo vel!
+</div>
+<div>Corporis cumque enim eveniet, itaque perferendis repellat sit. Culpa fugiat officia saepe sit velit. Architecto
+	atque error fugit. Beatae consectetur cumque est ex laudantium, molestiae nobis officia rerum vero voluptas!
+</div>
+<div>Adipisci, architecto at commodi culpa dolor dolorem doloribus ducimus earum eligendi ex facilis illo magnam minima
+	nesciunt, officia perferendis praesentium quibusdam quisquam rerum, saepe sapiente sequi suscipit totam unde
+	voluptatum.
+</div>
+<div>Aperiam consectetur corporis cumque dolore error est eum inventore laboriosam magni molestias nisi, officiis quam
+	quasi, repellat repudiandae tempore totam? Accusamus cum eligendi, esse obcaecati officia similique? Sapiente, tempore
+	voluptate.
+</div>
+<div>Alias assumenda consectetur eligendi ipsa natus non odit optio rerum, tempore voluptates! Aut debitis magni maxime
+	minima qui. Cupiditate distinctio, doloribus fugiat laudantium maiores neque officiis rerum sed sit tempore?
+</div>
+<div>Accusantium adipisci alias amet animi atque, corporis cumque eaque esse et eum facilis fugit, minus nemo nihil
+	nobis officiis quos veniam veritatis, vero voluptatum. Consequatur cum dignissimos exercitationem nulla sunt!
+</div>
+<div>Ad aperiam cum cupiditate delectus dignissimos doloribus, ex facere fugit hic illum ipsa ipsum, iusto labore
+	laboriosam, laborum omnis quidem sapiente tempore totam vel. Consequuntur dignissimos dolores neque quisquam
+	repellendus.
+</div>
+<div>A cum, exercitationem id neque nobis omnis. Minima nihil pariatur sit? Adipisci aliquam aliquid assumenda delectus
+	deleniti est excepturi labore minima necessitatibus placeat quaerat quasi, quod recusandae repellendus saepe voluptas.
+</div>
+<div>Ad animi dolorem ea, iusto magnam quas reiciendis voluptatum. Ad alias blanditiis corporis cumque deleniti id
+	laborum molestias, nobis, perspiciatis porro, possimus qui rem reprehenderit repudiandae rerum! Aliquam, deserunt,
+	fugiat.
+</div>
+<div>Autem consectetur debitis deserunt ducimus illum mollitia reprehenderit soluta tempora tempore voluptatibus? Culpa
+	cumque dolor est illo iste itaque magni, minima omnis, pariatur quam qui sit ullam velit vitae voluptatibus!
+</div>
+<div>Accusamus consectetur cumque ea fugit id itaque iure, magnam nesciunt pariatur quisquam, quos ut. Aliquid deleniti
+	expedita, ipsam magnam maiores nulla officiis, quia, quidem rem repellat sed tempora temporibus voluptatem!
+</div>
+<div>Aspernatur dolorum error fuga inventore nam quo reprehenderit veniam. Accusamus aliquid, asperiores deleniti dolor
+	dolore dolores ea facere incidunt inventore, iure molestiae nihil odio odit officiis optio, qui vitae voluptate?
+</div>
+<div>Deleniti eveniet laboriosam molestiae nisi odio omnis pariatur, perspiciatis tempora? Architecto culpa cumque
+	delectus distinctio doloremque dolorum hic incidunt ipsa ipsum labore laborum, odio quam sint sit tempore veniam vero?
+</div>