i hate this so much

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>