added content.svelte to handle page max width for specific elements; added alternative page banner

2025-04-18 11:30:21 +02:00
parent 3d894c54fc
commit 9e582615fc
25 changed files with 1182 additions and 1036 deletions
--- a/src/lib/banner-title-alt.svelte
+++ b/src/lib/banner-title-alt.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import SeparatorLine from "./separator-line.svelte";
+
+    let {
+        title,
+        subtitle = "",
+        banner = "",
+    }: {
+        title: string;
+        subtitle?: string;
+        banner?: string;
+    } = $props();
+
+</script>
+
+<div class="container">
+    <div class="img-container">
+        <img src="{banner}">
+    </div>
+    <div class="text-container">
+        <h1 class="title">{title}</h1>
+        {#if subtitle}
+        <p class="subtitle">{subtitle}</p>
+        {/if}
+    </div>
+</div>
+
+<SeparatorLine />
+
+<style>
+    .container {
+        position: relative;
+        width: 100%;
+        height: 600px;
+        display: flex;
+        flex-direction: row;
+        background-color: var(--color-background-highlight);
+    }
+
+    .img-container {
+        flex-grow: 1;
+    }
+
+    .text-container {
+        width: 48%;
+        margin-top: auto;
+        margin-bottom: auto;
+        padding-left: 24px;
+    }
+
+    .container img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+    }
+
+    .title {
+        width: 100%;
+        box-sizing: border-box;
+        height: fit-content;
+        left: 0;
+        right: 0;
+        bottom: 0px;
+        font-style: italic;
+    }
+
+    .subtitle {
+        font-size: 1.2rem;
+        line-height: 1.6rem;
+        font-style: italic;
+    }
+</style>
--- a/src/lib/content.svelte
+++ b/src/lib/content.svelte
@@ -0,0 +1,10 @@
+<div class="content">
+    <slot />
+</div>
+
+<style>
+    .content {
+        max-width: 1200px;
+        margin: 0 auto 228px;
+    }
+</style>
--- a/src/lib/lists/gallery-entry.svelte
+++ b/src/lib/lists/gallery-entry.svelte
@@ -52,6 +52,7 @@
    }

    .entry {
+        width: 100%;
        margin: 4px;
        padding-bottom: 20px;
        background-color: var(--color-background-highlight);
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -46,8 +46,6 @@
        }

        body {
-            margin: 0 auto 228px;
-            max-width: 1200px;
            
            font-family: var(--font-sans-serif);
            font-size: 1.1rem;
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import Content from "$lib/content.svelte";
    import GamedevWebring from "$lib/webrings/gamedev.svelte";
    import Gallery from "$lib/lists/gallery-entry.svelte";
    import LinkList from "$lib/link-list.svelte";
@@ -26,6 +27,7 @@
    <title>denizk0461's website</title> 
 </svelte:head>

+<Content>
    <h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>

    <div class="container">
@@ -33,7 +35,7 @@
            <Gallery entries={[
                {
                    title: "Project N5 – devlog",
-                subtitle: "my active game project about a girl finding herself in an unfamiliar future",
+                    subtitle: "my active Godot game project about finding yourself in an unfamiliar future",
                    fullWidth: true,
                    img: "projects/projectn5/devlog/20250316/fishmonger.webp",
                    link: "projects/projectn5/devlog",
@@ -89,6 +91,7 @@
            <GamedevWebring />
        </div>
    </div>
+</Content>

 <style>
    .container {
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-    import BannerTitle from "$lib/banner-title.svelte";
+    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
+    import Content from "$lib/content.svelte";
    import type { Project } from './projects';
    import { projects } from './projects';
    import LinkList from "$lib/link-list.svelte";
@@ -20,10 +21,13 @@
    <title>Projects | denizk0461</title> 
 </svelte:head>

-<BannerTitle title="My Disordered Projects" banner="/projects/banner.webp" />
-
-<p>This is a listing of some of my more noteworthy projects that can be found on the web.</p>
+<BannerTitleAlt
+    title="My Disordered Projects"
+    banner="/projects/banner.webp"
+    subtitle="Here's a listing of some of my more noteworthy projects that can be found on the web."
+/>

+<Content>
    <TableOfContents />
    
    <h2>Active Projects</h2>
@@ -35,6 +39,7 @@
    {#each getActiveProjects(projects, false) as pastProject}
        {@render projectSummary({ project: pastProject })}
    {/each}
+</Content>

 {#snippet projectSummary({
    project
@@ -60,6 +65,10 @@
 {/snippet}

 <style>
+    .asdf {
+        display: flex;
+        flex-direction: row;
+    }
    .subtitle {
        color: var(--color-highlight);
        font-weight: 700;
--- a/src/routes/projects/daisyfm/+page.svelte
+++ b/src/routes/projects/daisyfm/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
 </script>

@@ -7,6 +8,7 @@
    <title>Daisy FM Synth | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Daisy FM Synth" banner="/projects/daisyfm/banner.webp" />

    <img src="/projects/daisyfm/fullview.webp">
@@ -109,3 +111,4 @@
    <p>The case has too few screw standoffs, which would result in the PCB flexing when buttons were pushed. I remedied this by gluing in some standoffs that lack screw holes, but it would of course be more ideal to model these into the actual case body. On that note, I would also add more screw holes in the PCB wherever possible, as the PCB didn't feature many holes, and the ones it did have were quite concentrated on the left side of the board.</p>

    <p>Some visual feedback would also be nice; a power LED could be nice. A display could have been even better, perhaps a small OLED display like <a href="https://www.reichelt.de/entwicklerboards-display-oled-0-96-128x64-pixel-blau-debo-oled5-0-96-p384685.html">this one</a>. It could have given feedback on individual parameters, such as a percentage on effects when the user turns a knob.</p>
+</Content>
--- a/src/routes/projects/projectn5/devlog/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import type { DevlogPost } from "$lib/devlog-posts";
    import { posts } from "$lib/devlog-posts";
 </script>
@@ -8,6 +9,7 @@
    <title>Project N5 Devlog | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5; Development Log" banner="/projects/projectn5/devlog/20240323/unity_overview.webp" />

    <p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game heavily inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b>.</p>
@@ -19,7 +21,7 @@
        {@render devlogPost({post})}
        {/each}
    </div>
-
+</Content>

 {#snippet devlogPost({post}: {post: DevlogPost})}
 <a href="/projects/projectn5/devlog/{post.date}/" class="post">
--- a/src/routes/projects/projectn5/devlog/202309/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/202309/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import Video from "$lib/video.svelte";
 </script>
@@ -8,6 +9,7 @@
    <title>2023-09 | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2023-09" subtitle="" banner="/projects/projectn5/devlog/previews/202309.webp" />

    <p>My progress in September 2023. Updates are shown in chronological order.</p>
@@ -95,3 +97,4 @@
    <p>my character is now a playable character</p>
    <img src="/projects/projectn5/devlog/202309/2023-09-30_12.webp">
    <img src="/projects/projectn5/devlog/202309/2023-09-30_13.webp">
+</Content>
--- a/src/routes/projects/projectn5/devlog/202310/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/202310/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import Video from "$lib/video.svelte";
 </script>
@@ -8,6 +9,7 @@
    <title>2023-10 | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2023-10" subtitle="" banner="/projects/projectn5/devlog/previews/202310.webp" />

    <p>My progress in October 2023. Updates are shown in chronological order.</p>
@@ -64,3 +66,4 @@
    <Video src="/projects/projectn5/devlog/202310/2023-10-25_01.mp4" />
    <p>I like my bread with bones, <i>thank you very much.</i></p>
    <img src="/projects/projectn5/devlog/202310/2023-10-25_02.webp">
+</Content>
--- a/src/routes/projects/projectn5/devlog/202311/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/202311/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import Video from "$lib/video.svelte";
 </script>
@@ -8,6 +9,7 @@
    <title>2023-11 | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2023-11" subtitle="" banner="/projects/projectn5/devlog/previews/202311.webp" />
                
    <p>My progress in November 2023. Updates are shown in chronological order.</p>
@@ -69,3 +71,4 @@
    <h2>My Best Friend JSON</h2>
    <p>It might seem simple (or look complicated), but I came up with the idea of creating a JSON-based lookup table for the weapon metadata. Using this, it's quite easy to retrieve any kind of information about any kind of weapon without needing to hardcode it into the weapon itself. Here's an early screenshot of the lookup table.</p>
    <img src="/projects/projectn5/devlog/202311/2023-11-25.webp">
+</Content>
--- a/src/routes/projects/projectn5/devlog/202312/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/202312/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import Video from "$lib/video.svelte";
 </script>
@@ -8,6 +9,7 @@
    <title>2023-12 | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2023-12" subtitle="" banner="/projects/projectn5/devlog/previews/202312.webp" />

    <p>My progress in December 2023. Updates are shown in chronological order.</p>
@@ -67,3 +69,4 @@
    <p>I managed to implement the ability to play multiple animations at a time! The character can now walk + point its gun, or keep its arms down. There's no animation for standing still yet, so it perpetually walks, but this is huge progress, and more importantly, a huge fear of mine alleviated! I was really concerned that implementing multiple animations would be a tedious task, but with Godot's <code>AnimationTree</code> node, it's actually rather trivial.</p>
    <p>I followed <a href="https://www.youtube.com/watch?v=WY2cN9uG6W8">this</a> extremely useful and concise tutorial.</p>
    <Video src="/projects/projectn5/devlog/202312/simultaneous-animations.mp4" />
+</Content>
--- a/src/routes/projects/projectn5/devlog/20240210/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/20240210/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import Video from "$lib/video.svelte";
 </script>

@@ -7,6 +8,7 @@
    <title>2024-02-10 | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2024-02-10" subtitle="" banner="/projects/projectn5/devlog/previews/20240210.webp" />

    <p>My apologies for the lack of updates lately! Between being hard at work on the game's progress, lacking motivation, and university exams, I really didn't have the time to write a proper update. Instead, I figured it would now be a great time to do a bundled progress update, since I really did get a lot done that takes the game quite a few steps further!</p>
@@ -37,3 +39,4 @@
    <p>And so are other scripts! I cleaned up a few scripts, most recently the Inventory script. There used to be a lot of redundant function calls that essentially did the same thing except with one check that could be performed more centrally. I also double-checked item IDs unnecessarily. All gone now! Inventory is much more streamlined now.</p>
    <p>My next goals are to implement enemy health as well as a level travelling mechanic. To be able to test weapons, enemy movement, and balancing, I want to add an arena world with test challenges. Adding an arena is convenient anyways, since I aim to have an arena in the final game anyway, so I can feel free to dedicate more resources into the arena than if it only were for testing.</p>
    <p>Let's see how long it'll take me to get these things done! I really do love working on my game, but I often lack the motivation to <i>start</i> working on it. Once I'm in the flow, I can get a lot done, but getting into that flow, just getting out of bed to start something that can be considered "work" – that's the difficult part.</p>
+</Content>
--- a/src/routes/projects/projectn5/devlog/20240312/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/20240312/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import Video from "$lib/video.svelte";
 </script>
@@ -8,6 +9,7 @@
    <title>2024-03-12 | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2024-03-12" subtitle="" banner="/projects/projectn5/devlog/previews/20240312.webp" />

    <TableOfContents />
@@ -59,3 +61,4 @@
    <div class="image-subtitle-container">
        <span class="image-subtitle">staring longingly into the sunset</span>
    </div>
+</Content>
--- a/src/routes/projects/projectn5/devlog/20240323/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/20240323/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import Video from "$lib/video.svelte";
 </script>
@@ -8,6 +9,7 @@
    <title>2024-03-23 | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2024-03-23" subtitle="" banner="/projects/projectn5/devlog/previews/20240323.webp" />

    <TableOfContents />
@@ -134,3 +136,4 @@
    <p>I'm really happy with my progress. As a bonus, here's an overview of my current testing level Unity.</p>

    <img src="/projects/projectn5/devlog/20240323/unity_overview.webp">
+</Content>
--- a/src/routes/projects/projectn5/devlog/20240324/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/20240324/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import Video from "$lib/video.svelte";
 </script>
@@ -8,6 +9,7 @@
    <title>The Arena Update | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2024-03-24" subtitle="The Arena Update" banner="/projects/projectn5/devlog/previews/20240324.webp" />

    <TableOfContents />
@@ -101,3 +103,4 @@ const arena_challenges = &lbrace;
    <p>The great thing is that, now that there's an arena challenge, and with it, a constantly spawning stream of enemies attacking the player, the game actually has a proper gameplay loop, in some way! In other words – there's actually something to do now!!</p>

    <p>I think that's pretty <a href="https://youtu.be/DrQqajtiRt4">neat</a>.</p>
+</Content>
--- a/src/routes/projects/projectn5/devlog/20240401/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/20240401/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import Video from "$lib/video.svelte";
 </script>
@@ -8,6 +9,7 @@
    <title>The Behind-the-Scenes Update | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2024-04-01" subtitle="The Behind-the-Scenes Update" banner="/projects/projectn5/devlog/previews/20240401.webp" />

    <TableOfContents />
@@ -88,3 +90,4 @@ for enemy_resource in enemies &lbrace;
    <img alt="An image of the N5 Blaster. Its lights are turned off, and the icosphere in the middle is dimly glowing." src="/projects/projectn5/devlog/20240401/n5-dim.webp">

    <p>Sorry about the sparse delivery of visually pretty things, but I hope the cool effects on the N5 Blaster make up for it somewhat! I can say for sure though that I'm progressing quite well, and I'm having fun doing so, even if this progress can't really be showed off in the same way I could show off a 3D model or a new enemy. There's lots to come in the future though, especially since I still have to design most of the 12 × 2 = 24 weapon models, a tonne of enemies, the player, and all the levels. There'll be lots to gawk at (hopefully)!</p>
+</Content>
--- a/src/routes/projects/projectn5/devlog/20240713/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/20240713/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import Video from "$lib/video.svelte";
 </script>

@@ -7,6 +8,7 @@
    <title>The WHERE HAVE I BEEN?? Update | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2024-07-13" subtitle="The WHERE HAVE I BEEN?? Update" banner="/projects/projectn5/devlog/previews/20240713.webp" />

    <p>University.</p>
@@ -32,3 +34,4 @@
    <p>I'd love to 3D print more Project N5 weapons – though for that I'll have to design the weapons first!! And in order to do <i>that</i>, I'll have to come up with the ideas for the weapons, which is also proving difficult. A friend suggested to me a while back that I should consider which types of weapons <i>I</i> like in games, and which types I find fun to use.</p>

    <p>As for now, I should get started with my studies – I'll write my next update once I have more things to present from Project N5, which will (hopefully) be in less than 3 months! Until then~</p>
+</Content>
--- a/src/routes/projects/projectn5/devlog/20241012/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/20241012/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
 </script>

@@ -7,6 +8,7 @@
    <title>The Returnal Update | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2024-10-12" subtitle="The Returnal Update" banner="/projects/projectn5/devlog/previews/20241012.webp" />

    <TableOfContents />
@@ -85,3 +87,4 @@
    <p>Then again, in order to create visual things, I'll have to have motivation from the start, so we're in a bit of a pickle here.</p>

    <p>I can do this.</p>
+</Content>
--- a/src/routes/projects/projectn5/devlog/20241103/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/20241103/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import Video from "$lib/video.svelte";
 </script>
@@ -8,6 +9,7 @@
    <title>The Visual Update | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2024-11-03" subtitle="The Visual Update" banner="/projects/projectn5/devlog/20241103/101-comparison.webp" />

    <TableOfContents />
@@ -145,3 +147,4 @@
    <Video src="/projects/projectn5/devlog/202309/2023-09-16_00.mp4" />

    <p>Logically speaking, of course, that makes complete sense. I had to start from somewhere. But it's the fact that I managed to get so far already, working on my own, that I find crazy. I've already managed to implement many basics of this game, slowly but surely realising my vision. I think this really has potential. I should keep up the work.</p>
+</Content>
--- a/src/routes/projects/projectn5/devlog/20241127/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/20241127/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
 </script>

@@ -7,6 +8,7 @@
    <title>The Making of a Protagonist, Part I | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2024-11-27" subtitle="The Making of a Protagonist, Part I" banner="/projects/projectn5/devlog/20241127/hands.webp" />

    <TableOfContents />
@@ -99,3 +101,4 @@
    <p>After that, I could start animating Laura, though I don't know whether I'll get to that in the next progress update. It could be cool! I'll have to find a way to add and update animations in Godot without re-importing the 3D model. I think a way exists using <a href="https://docs.godotengine.org/en/stable/tutorials/assets_pipeline/escn_exporter/animation.html">NLA tracks</a>, but I'll have to learn how to do this, and whether this works the way I imagine.</p>

    <p>I've already made sketches for how I want to style Laura; this could be fun!</p>
+</Content>
--- a/src/routes/projects/projectn5/devlog/20241222/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/20241222/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
 </script>

@@ -7,6 +8,7 @@
    <title>The Making of a Protagonist, Part II | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2024-12-22" subtitle="The Making of a Protagonist, Part II" banner="/projects/projectn5/devlog/20241222/laura-header.webp" />

    <p>I have lots progress to share!!</p>
@@ -137,3 +139,4 @@
    <p>For the time being, here's a picture of the soon-to-be-retired current protagonist character. Smoothly shaded for your viewing pleasure.</p>

    <img src="/projects/projectn5/devlog/20241222/retiree.webp">  
+</Content>
--- a/src/routes/projects/projectn5/devlog/20250203/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/20250203/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
 </script>

@@ -7,6 +8,7 @@
    <title>The Making of a Protagonist, Part III | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2025-02-03" subtitle="The Making of a Protagonist, Part III" banner="/projects/projectn5/devlog/20250203/lauras-imposing.webp" />

    <TableOfContents />
@@ -99,3 +101,4 @@
    <p>idk</p>

    <p>Maybe it's time to change the format of the devlog on this website?</p>
+</Content>
--- a/src/routes/projects/projectn5/devlog/20250316/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/20250316/+page.svelte
@@ -1,5 +1,6 @@
 <script>
    import BannerTitle from "$lib/banner-title.svelte";
+    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import Video from "$lib/video.svelte";
 </script>
@@ -8,6 +9,7 @@
    <title>Refactoring | denizk0461</title> 
 </svelte:head>

+<Content>
    <BannerTitle title="Project N5 Progress Update: 2025-03-16" subtitle="Refactoring" banner="/projects/projectn5/devlog/20250316/fishmonger.webp" />

    <TableOfContents />
@@ -177,3 +179,4 @@
    <h2 id="addendum">Addendum</h2>

    <p>Sorry for the walls of text! I've really just been working more on backend stuff than visually interesting things, mostly to clean up the project, but also because I feel that's my strength. I'm super good at programming expandable, relatively easy to maintain code, at least in comparison to my artistic skills. However, I'm <i>absolutely</i> working on story, visuals, more weapon, and of course Laura 2.0, so hopefully I'll have more to show for in the coming weeks and months!!</p>
+</Content>
--- a/src/routes/projects/projects.ts
+++ b/src/routes/projects/projects.ts
@@ -39,9 +39,9 @@ export const projects: Project[] = [
        banner: "/projects/projektike/banner.webp",
        icon: "",
        title: "Projektike",
-        subtitle: "Wizard Game",
+        subtitle: "PvP Game",
        paragraphs: [
-            "Two friends of mine and I are working together on a multiplayer wizard game where you can throw magical and technological artifacts at one another.",
+            "Two friends of mine and I are working together on a multiplayer game where you can throw magical artifacts at one another.",
        ],
        links: [
            {