i hate this so much

package-lock.json

@@ -7,6 +7,9 @@
 		"": {
 			"name": "pages-svelte",
 			"version": "0.0.1",
+			"dependencies": {
+				"module-alias": "^2.2.3"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-static": "^3.0.8",
 				"@sveltejs/kit": "^2.16.0",
@@ -1063,6 +1066,11 @@
 				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
 		},
+		"node_modules/module-alias": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/module-alias/-/module-alias-2.2.3.tgz",
+			"integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q=="
+		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",

package.json

@@ -19,5 +19,8 @@
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^6.0.0"
+	},
+	"dependencies": {
+		"module-alias": "^2.2.3"
 	}
 }

src/lib/banner-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    let {
+        bannerImg,
+        bannerImgAlt,
+        title,
+        subtitle,
+    }: {
+        bannerImg: string,
+        bannerImgAlt: string,
+        title: string,
+        subtitle: string,
+    } = $props();
+
+</script>
+
+<div>
+    <img src="{bannerImg}" alt="{bannerImgAlt}">
+    <h1>{title}</h1>
+    <h2>{subtitle}</h2>
+</div>

src/lib/header.svelte

@@ -0,0 +1,37 @@
+<div class="center-stuff">
+    <p class="banner-text" style="margin-right: 8px;">denizk0461's</p>
+    <a class="banner-image" href="/">
+        <img src="/favicon.png"/>
+    </a>
+    <p class="banner-text" style="margin-left: 8px;">website</p>
+</div>
+
+<style>
+    @keyframes header-text-anim {
+        0% { color: #96C9DC; }
+        33% { color: #9CE391; }
+        66% { color: #E03E59;}
+        100% { color: #96C9DC; }
+    }
+    .center-stuff {
+        width: fit-content;
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .banner-image {
+        width: fit-content;
+    }
+    .banner-text {
+        width: fit-content;
+        font-family: 'Space Mono', monospace;
+        font-weight: 700;
+        color: var(--color-highlight);
+        margin: 0px 24px;
+        animation-name: header-text-anim;
+        animation-duration: 2.13333333333s;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+    }
+</style>

src/routes/+page.svelte

@@ -1,2 +1,8 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+    import Header from "$lib/header.svelte";
+</script>
+
+<Header />
+
+<h1><i>Moin!</i> ~ welcome to my website :)</h1>
+<p><a href="/projects/projectn5/devlog">projects</a></p>

src/routes/projects/projectn5/devlog/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import Header from "$lib/header.svelte";
+</script>
+
+<Header />

src/routes/projects/projectn5/devlog/[post]/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import Header from "$lib/header.svelte";
+</script>
+
+<Header />

svelte.config.js

@@ -1,9 +1,12 @@
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
+/** @type {import('@sveltejs/kit').Config} */
 const config = {
 	preprocess: vitePreprocess(),
-	kit: { adapter: adapter() }
+	kit: {
+		adapter: adapter(),
+	},
 };
 
 export default config;

tsconfig.json

@@ -9,7 +9,7 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"moduleResolution": "bundler"
+		"moduleResolution": "bundler",
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files

vite.config.ts

@@ -2,5 +2,5 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
 });