added separate changelog page

src/lib/components/changelog-entry.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+    export interface ChangelogEntry {
+        date: string;
+        time: string;
+
+        content: string;
+        link?: string;
+    }
+    
+    let {
+        entry,
+    }: {
+        entry: ChangelogEntry;
+    } = $props();
+</script>
+
+<div class="changelog-entry">    
+    <span class="changelog-entry-timestamp">{entry.date}, {entry.time} ::</span>
+    <p>
+        {entry.content}
+        {#if entry.link}
+            <a class="changelog-entry-link" href="{entry.link}">»</a>
+        {/if}
+    </p>
+</div>
+
+<style>
+    .changelog-entry * {
+        margin: 0;
+    }
+
+    .changelog-entry {
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        margin: 4px 0;
+    }
+
+    .changelog-entry-timestamp {
+        font-family: var(--font-mono);
+        font-size: 0.9rem;
+        color: var(--color-highlight);
+        min-width: fit-content;
+    }
+
+    .changelog-entry-link {
+        font-family: var(--font-mono);
+        font-size: 1.3rem;
+        color: var(--color-highlight);
+        text-decoration: none;
+        line-height: 1rem;
+    }
+
+    .changelog-entry-link:hover {
+        font-weight: 700;
+    }
+</style>

src/routes/+page.svelte

@@ -5,7 +5,8 @@
 
     import { posts as devlogPosts } from "./projects/projectn5/devlog/posts";
     import { posts as blogPosts } from "./blog/posts";
-    import { entries as changelogEntries, type ChangelogEntry } from "./changelog";
+    import { entries as changelogEntries } from "./changelog/changelog";
+    import ChangelogEntry from "$lib/components/changelog-entry.svelte";
 
     let latestDevlogDate = devlogPosts[0].post.date;
     let latestBlogDate = blogPosts[0].post.date;
@@ -49,18 +50,6 @@
     <meta name="description" content="I'm a developer posting about my gamedev, programming, electronics, and sometimes music projects!">
 </svelte:head>
 
-{#snippet changelogEntry({ entry }: { entry: ChangelogEntry })}
-    <div class="changelog-entry">    
-        <span class="changelog-entry-timestamp">{entry.date}, {entry.time} ::</span>
-        <p>
-            {entry.content}
-            {#if entry.link}
-                <a class="changelog-entry-link" href="{entry.link}">»</a>
-            {/if}
-        </p>
-    </div>
-{/snippet}
-
 <Content>
     <h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>
 
@@ -70,13 +59,13 @@
         <img class="me-img pixelated-img" src="me.webp" alt="Pixelated mirror selfie of the website creator wearing a green shirt, fitting the website theme. The face is obscured." title="hi.">
         <p>Hi! I'm Deniz (he/him/they). I'm a hobbyist programmer based in 🇩🇪 Northern Germany who does coding, 3D modelling, and sometimes music too. I am also studying to become a secondary school teacher. Welcome to my webpage!</p>
         <p>Here I publish my projects in programming, electronics (Arduino, Raspberry Pi etc.), and gamedev specifically, but I also set up a blog to talk about random things on my mind. Feel free to explore.</p>
-        <p>This place is a constant work-in-progress – while I try to keep URLs intact, a lot of stuff is being modified and moved around! If anything's <a href="/blog/2026/0131">broken</a>, please do let me know.</p>
+        <p>This place is a constant work-in-progress – while I try to keep URLs intact, a lot of stuff is being modified and moved around! I'm also adding new things and seeing which things I enjoy maintaining. If anything's outright <a href="/blog/2026/0131">broken</a>, please do let me know.</p>
     </div>
 
     <div class="changelog-container">
-        <h6 class="changelog-header">website changelog <span class="small-supertext">(new!)</span></h6>
+        <a class="changelog-header-link" href="/changelog"><h6 class="changelog-header">website changelog <span class="small-supertext">(new!)</span></h6></a>
         {#each changelogEntriesTrimmed as entry}
-            {@render changelogEntry({entry})}
+            <ChangelogEntry {entry} />
         {/each}
     </div>
 
@@ -100,40 +89,17 @@
         border: 2px var(--color-highlight) dashed;
     }
 
+    .changelog-header-link {
+        text-decoration: none;
+    }
+    .changelog-header-link:hover {
+        text-decoration: underline dashed 2px var(--color-highlight);
+    }
+    
     .changelog-header {
         margin-top: 8px;
     }
 
-    .changelog-entry * {
-        margin: 0;
-    }
-
-    .changelog-entry {
-        display: flex;
-        flex-direction: row;
-        gap: 8px;
-        margin: 4px 0;
-    }
-
-    .changelog-entry-timestamp {
-        font-family: var(--font-mono);
-        font-size: 0.9rem;
-        color: var(--color-highlight);
-        min-width: fit-content;
-    }
-
-    .changelog-entry-link {
-        font-family: var(--font-mono);
-        font-size: 1.3rem;
-        color: var(--color-highlight);
-        text-decoration: none;
-        line-height: 1rem;
-    }
-
-    .changelog-entry-link:hover {
-        font-weight: 700;
-    }
-
     .webring-container {
         display: flex;
         flex-direction: row;

src/routes/changelog/+page.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import Banner2 from "$lib/banner2.svelte";
+    import Content from "$lib/viewport/content.svelte";
+    import { entries } from "./changelog";
+    import ChangelogEntry from "$lib/components/changelog-entry.svelte";
+</script>
+
+<svelte:head>
+    <title>Changelog | denizk0461</title> 
+</svelte:head>
+
+<Content>
+    <Banner2
+        title="Website Changelog" />
+    
+        <div>
+            {#each entries as entry}
+                <ChangelogEntry {entry} />
+            {/each}
+        </div>
+</Content>

src/routes/changelog/changelog.ts

@@ -1,10 +1,4 @@
-export interface ChangelogEntry {
+import { type ChangelogEntry } from "$lib/components/changelog-entry.svelte";
-    date: string;
-    time: string;
-
-    content: string;
-    link?: string;
-}
 
 export const entries: ChangelogEntry[] = [
     {