added link to art page to main page; added appropriate banner to art page; changed banner of project n5 page on main page to match the actual page banner

src/lib/lists/gallery.svelte

@@ -10,21 +10,18 @@
 
     let {
         entries,
-        reverseTextOrder,
     }: {
         entries: GalleryEntry[];
-        reverseTextOrder?: boolean;
     } = $props();
 </script>
 
 <div class="post-list">
     {#each entries as entry}
-        {@render galleryEntry({entry, reverseTextOrder})}
+        {@render galleryEntry({entry})}
     {/each}
 </div>
 
-{#snippet galleryEntry({entry, reverseTextOrder}: {entry: GalleryEntry, reverseTextOrder?: boolean})}
-<!-- {#snippet galleryEntry({key, post, index}: {key: string, post: DevlogPost, index: number})} -->
+{#snippet galleryEntry({entry}: {entry: GalleryEntry})}
     <a class="gallery-container" href="{entry.link}">
         {#if entry.img && entry.img !== ""}
             <img class="gallery-img" src="{entry.img}" alt="{entry.imgAlt}">
@@ -32,15 +29,9 @@
             <div class="gallery-img-placeholder"></div>
         {/if}
         <div class="gallery-text-container">
-            {#if reverseTextOrder}
-                <p class="gallery-subtitle">{@html entry.subtitle}</p>
-                <p class="gallery-title">{entry.title}</p>
-                <p class="gallery-description">{entry.description}</p>
-            {:else}
-                <p class="gallery-title">{entry.title}</p>
-                <p class="gallery-subtitle">{@html entry.subtitle}</p>
-                <p class="gallery-description">{entry.description}</p>
-            {/if}
+            <p class="gallery-subtitle">{@html entry.subtitle}</p>
+            <p class="gallery-title">{entry.title}</p>
+            <p class="gallery-description">{entry.description}</p>
         </div>
     </a>
 {/snippet}
@@ -88,7 +79,6 @@
         grid-auto-columns: 1fr;
         grid-template-rows: 1fr 1fr 0fr;
         align-items: center;
-        overflow: hidden;
         flex-grow: 1;
         padding: 0 16px;
         transition: background-color var(--duration-animation) var(--anim-curve),

src/lib/viewport/footer.svelte

@@ -26,6 +26,7 @@
                 <h6>Content</h6>
                 <a href="/projects">Projects</a>
                 <a href="/blog">Blog</a>
+                <a href="/art">Art</a>
             </div>
             <div class="content-box">
                 <h6>Meta</h6>

src/lib/viewport/header.svelte

@@ -3,6 +3,7 @@
     <a href="/projects">Projects</a>
     <a href="/projects/projectn5">Project N5</a>
     <a href="/blog">Blog</a>
+    <a href="/art">Art</a>
     <!-- <a href="/garden">Garden</a> -->
     <a href="/meta/about">About</a>
 {/snippet}

src/routes/+page.svelte

@@ -17,8 +17,8 @@
         {
             title: "Project N5 – devlog",
             description: `My active Godot game project about finding yourself in an unfamiliar future. <i>latest update: ${latestDevlogDate}</i>`,
-            img: "projects/projectn5/devlog/2025/0523/birds_eye.webp",
-            altText: "Project N5 screenshot of Laura looking down at two cuboids.",
+            img: "projects/projectn5/banner2.webp",
+            altText: "The protagonist Laura standing on a floating platform in the purple test level. Ziplines are all around her and the text 'When this text is spinning, the game is not paused' is frozen in the sky.",
             link: "projects/projectn5",
         },
         {
@@ -33,11 +33,18 @@
     const galleryBottomRow: GalleryRowEntry[] = [
         {
             title: "Projects",
-            description: "An overview of what I do and have done",
+            description: "An overview of my more technical projects",
             img: "projects/banner.webp",
             altText: "An upside-down New 3DS XL lying open on a desk with a small USB-C breakout board attached to it, and a USB-C cable plugged in. The 3DS is glowing to indicate that it is charging.",
             link: "projects",
         },
+        {
+            title: "Art",
+            description: "My creative side lives here",
+            img: "art/banner.webp",
+            altText: "A rainbow-like holographic effect produced by bending a reflective sheet of cardboard.",
+            link: "art",
+        },
         {
             title: "Files",
             description: "Find things I've put for download on my Copyparty instance",

src/routes/art/+page.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import Banner2 from "$lib/banner2.svelte";
+    import Content from "$lib/viewport/content.svelte";
+    import GalleryRow, { type GalleryRowEntry } from "$lib/lists/gallery-row.svelte";
+
+    const subpages: GalleryRowEntry[] = [
+        {
+            title: "Drawing Gallery",
+            description: "Some cool things I've drawn!",
+            img: "drawings/banner.webp",
+            altText: "Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper.",
+            link: "drawings",
+        },
+        {
+            title: "Discography",
+            description: "Small stories about my past music",
+            img: "/main/hypertext.webp",
+            altText: "",
+            link: "music",
+        },
+    ];
+</script>
+
+<svelte:head>
+    <title>Art | denizk0461</title> 
+</svelte:head>
+
+<Content>
+    <Banner2
+        title="Art"
+        banner="banner.webp"
+        bannerAlt="A rainbow-like holographic effect produced by bending a reflective sheet of cardboard."
+        subtitle="my creative side" />
+
+    <p>Here I have collected the products of some of my creative endeavours. Check them out below!</p>
+
+    <GalleryRow entries={subpages} />
+
+</Content>

src/routes/art/drawings/+page.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+    import Banner2 from "$lib/banner2.svelte";
+    import Content from "$lib/viewport/content.svelte";
+    import { type Drawing, drawings } from "./drawings";
+</script>
+
+<svelte:head>
+    <title>Drawing Gallery | denizk0461</title> 
+</svelte:head>
+
+{#snippet drawingGalleryEntry({d}: {d: Drawing})}
+    <div class="gallery-entry">
+        <div class="gallery-entry-img-container">
+            <img src="{d.img}" alt="{d.imgAlt}">
+        </div>
+        <div class="gallery-entry-info">
+            <p class="gallery-entry-title">{d.title} <span>{d.date}</span></p>
+            {#each d.notes as note}
+                <p class="gallery-entry-note">{note}</p>                
+            {/each}
+            <a href="{d.img}">view full-size</a>
+        </div>
+    </div>
+{/snippet}
+
+<Content>
+    <Banner2
+        title="Drawing Gallery"
+        subtitle=""
+        banner="banner.webp"
+        bannerAlt="Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper." />
+
+    <p>I started drawing at the start of 2026 and this is my page to show off what I make! I currently only draw on paper (I like the feel and resistance of pens on paper as well as the <a href="/blog/2026/0129">limitations</a> it imposes), but I have a tablet prepared with Krita to try digital art someday!</p>
+
+    <p>Why do I do this, you may wonder? to pressure myself to draw more</p>
+
+    <p>If you're interested, here's a post about me <a href="/blog/2026/0205">drawing every day for 28 days</a> to learn to draw. You may recognise some of the drawings there; I picked out my favourite drawings and added them here!</p>
+
+    <div class="drawing-container">
+        {#each drawings as d}
+            {@render drawingGalleryEntry({d})}
+        {/each}
+    </div>
+</Content>
+
+<style>
+    .drawing-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 8px;
+    }
+
+    .gallery-entry {
+        position: relative;
+        height: 340px;
+    }
+
+    .gallery-entry-img-container {
+        overflow: hidden;
+    }
+
+    .gallery-entry-img-container, .gallery-entry-info {
+        border-radius: 16px;
+    }
+    
+    .gallery-entry-img-container, .gallery-entry-info {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: 0;
+        height: 100%;
+        width: 100%;
+    }
+
+    .gallery-entry img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: scale var(--duration-animation) var(--anim-curve);
+    }
+
+    .gallery-entry:hover img {
+        scale: 1.2;
+    }
+
+    .gallery-entry:hover .gallery-entry-info {
+        opacity: 1;
+    }
+
+    .gallery-entry-info {
+        opacity: 0;
+        display: flex;
+        flex-direction: column;
+        transition: opacity var(--duration-animation) var(--anim-curve);
+        background-color: var(--color-header-highlight);
+        padding: 12px 8px;
+        gap: 4px;
+        box-sizing: border-box;
+        justify-content: center;
+        outline: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+    }
+    
+    .gallery-entry-info * {
+        margin: 0;
+        width: fit-content;
+    }
+
+    .gallery-entry-title {
+        font-family: var(--font-mono);
+        font-weight: 700;
+    }
+
+    .gallery-entry-title span {
+        font-size: 0.8rem;
+        line-height: 0.9rem;
+        font-weight: 500;
+    }
+
+    .gallery-entry-note, .gallery-entry-info a {
+        font-size: 1.0rem;
+        line-height: 1.3rem;
+    }
+
+    @media screen and (max-width: 1000px) {
+        .drawing-container {
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+
+    @media screen and (max-width: 600px) {
+        .drawing-container {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>

src/routes/art/drawings/drawings.ts

@@ -0,0 +1,79 @@
+export interface Drawing {
+    title: string;
+    date: string;
+    notes: string[];
+    img: string;
+    imgAlt: string;
+}
+
+export let drawings: Drawing[] = [
+    {
+        title: "SMILE! :D",
+        date: "2026-03-04",
+        notes: [
+            "This is actually the construction sketch of a drawing I later went over with a fineliner and coloured pencils. However, I kind of prefer the pencil sketch.",
+            "This was my first attempt at a head-on perspective. I had fun drawing details like the scrunchie, the jeans, and the smile!",
+        ],
+        img: "/blog/2026/0205/27-1.webp",
+        imgAlt: "",
+    },
+    {
+        title: "Cyborg Arm",
+        date: "2026-02-27",
+        notes: [
+            "Possibly my favourite sketch from the drawing challenge, because she looks cool, but also because her design deviates from the other characters a bit.",
+        ],
+        img: "/blog/2026/0205/22.webp",
+        imgAlt: "",
+    },
+    {
+        title: "Porter Robinson fanart",
+        date: "2026-02-26",
+        notes: [
+            "I drew the Worlds hand for practice and then decided to draw Po-Uta's head as well. I realised then that learning to draw gave me the ability to draw fanart.",
+            "I had never considered that possibility before.",
+        ],
+        img: "/blog/2026/0205/21.webp",
+        imgAlt: "",
+    },
+    {
+        title: "Emilia",
+        date: "2026-02-23",
+        notes: [
+            "My first character with the new style of drawing eyes I picked up from a manga drawing book!",
+            "I named her Emilia because she looked like a more nice and caring character.",
+        ],
+        img: "/blog/2026/0205/18.webp",
+        imgAlt: "",
+    },
+    {
+        title: "Elizabeth",
+        date: "2026-02-18",
+        notes: [
+            "She's the product of me trying to re-draw the character I drew on day 1 of my drawing challenge, and I was really glad to see that I had actually improved!",
+        ],
+        img: "/blog/2026/0205/13-2.webp",
+        imgAlt: "",
+    },
+    {
+        title: "bread girl",
+        date: "2026-01-30",
+        notes: [
+            "I drew her during a game of Wizard. I initially wanted to make her chew on a whole loaf but I didn't know how to draw that.",
+            "Wasn't really sure how to convey that her mouth is full either, but in retrospect, I could have exaggerated the bow in her lower eyelids to do so.",
+            "I like her eyes. Her head could be taller, actually.",
+        ],
+        img: "2026/breadgirl.webp",
+        imgAlt: "An anime-style girl chewing on a piece of bread. She wears a ponytail and a sleeveless top.",
+    },
+    {
+        title: "test",
+        date: "2026-01-29",
+        notes: [
+            "A small sketch (only like 4cm wide) that I drew with a ballpoint pen on pink paper. The fact that I was able to sketch this, without any prior practice, plus an intrinsic want to be able to draw made me seriously consider learning to draw.",
+            "Having learned just a little bit about drawing, I can say now (a month and a half later) that this isn't great, but it served its purpose of making me start to draw!",
+        ],
+        img: "/blog/2026/0129/girl.webp",
+        imgAlt: "sample alt text",
+    },
+];

src/routes/blog/+page.svelte

@@ -33,5 +33,5 @@
         banner="robert.webp"
         bannerAlt="View at a tram bridge rising and then curving to the left." />
 
-    <Gallery entries={entries} reverseTextOrder />
+    <Gallery entries={entries} />
 </Content>

src/routes/projects/+page.svelte

@@ -19,7 +19,7 @@
             description: "Small stories about my past music",
             img: "/main/hypertext.webp",
             altText: "",
-            link: "my-tracks",
+            link: "/art/music",
         },
     ];
 </script>

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

@@ -35,7 +35,8 @@
 <Content>
     <Banner2
         title="Project N5"
-        banner="/projects/projectn5/banner2.webp" />
+        banner="/projects/projectn5/banner2.webp"
+        bannerAlt="The protagonist Laura standing on a floating platform in the purple test level. Ziplines are all around her and the text 'When this text is spinning, the game is not paused' is frozen in the sky." />
 
     <p>I am currently working on a game under the working title <b>Project N5</b>! I'm aiming for it to be an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
 
@@ -43,5 +44,5 @@
 
     <p>Development log entries in reverse chronological order (newest to oldest).</p> 
 
-    <Gallery {entries} reverseTextOrder />
+    <Gallery {entries} />
 </Content>