added shadow to image gallery desc text for better legibility

src/lib/lists/image-gallery.svelte

@@ -3,7 +3,7 @@
     export interface GalleryImage {
         src: string;
         alt: string;
-        desc: string;
+        desc: string[];
     }
 
     let {
@@ -31,28 +31,97 @@
     }
 </script>
 
-<div class="gallery-container">
+<div class="gallery-container blurred-background">
     <div class="gallery-button-container">
-        <button onclick={galleryBack}>&lt;</button>
-        <button onclick={galleryForward}>&gt;</button>
+        <button class="gallery-button" onclick={galleryBack}>&lt;</button>
+        <div class="gallery-text-container">
+            <p class="gallery-index">{currentIndex + 1} / {images.length}</p>
+            <div class="gallery-desc-container">
+            <p>&nbsp;</p> <!-- this element intentionally left blank -->
+                {#each images[currentIndex].desc as d}
+                    <p>{@html d}</p>
+                {/each}
+            </div>
+        </div>
+        <button class="gallery-button" onclick={galleryForward}>&gt;</button>
+    </div>
+    <div class="gallery-img-container">
+        <img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
     </div>
-    <img src={images[currentIndex].src} alt={images[currentIndex].alt}>
 </div>
 
 <style>
     .gallery-container {
         position: relative;
         max-width: var(--media-width);
-        margin: 0 auto;
-        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);border-radius: var(--border-radius);
+        margin: 12px auto;
+        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        border-radius: var(--border-radius);
     }
 
-    .gallery-container img {
-        width: 100%;
+    .gallery-img-container {
+        width: fit-content;
+        position: relative;
+        margin: 0 auto;
+    }
+
+    .gallery-img {
         object-fit: contain;
+        width: 100%;
+        margin: 0;
+        filter: brightness(100%) saturate(100%);
+        transition: filter var(--duration-animation) var(--anim-curve);
+    }
+
+    .gallery-button-container,
+    .gallery-text-container {
+        opacity: 0%;
+        transition: opacity var(--duration-animation) var(--anim-curve);
+    }
+
+    .gallery-container:hover .gallery-button-container,
+    .gallery-container:hover .gallery-text-container
+    {
+        opacity: 100%;
+    }
+
+    .gallery-container:hover .gallery-img {
+        filter: brightness(50%) saturate(50%);
+    }
+
+    .gallery-text-container {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        margin: 8px 32px;
+    }
+
+    .gallery-index {
+        font-family: var(--font-mono);
+        font-weight: 600;
+    }
+    
+    .gallery-text-container p {
+        height: fit-content;
+        font-size: 1.0rem;
+        line-height: 1.4rem;
+    }
+
+    .gallery-desc-container {
+        padding-bottom: 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+    .gallery-desc-container p {
+        margin: 0;
+        text-shadow: 0 0 8px black;
     }
 
     .gallery-button-container {
+        z-index: 1;
         position: absolute;
         display: flex;
         justify-content: space-between;
@@ -60,12 +129,32 @@
         width: 100%;
         height: 100%;
     }
-    .gallery-button-container button {
-        background-color: aqua;
+
+    .gallery-button {
+        color: var(--color-text);
+        /* background-color: var(--color-background-highlight-alt); */
         height: fit-content;
         cursor: pointer;
         font-size: 2.4rem;
         line-height: 2.4rem;
         padding: 8px;
+
+        border-top: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+
+        transition: background-color var(--duration-animation) var(--anim-curve);
+    }
+    .gallery-button:first-child {
+        border-top-right-radius: var(--border-radius);
+        border-bottom-right-radius: var(--border-radius);
+
+    }
+    .gallery-button:last-child {
+        border-top-left-radius: var(--border-radius);
+        border-bottom-left-radius: var(--border-radius);
+    }
+
+    .gallery-button:hover {
+        background-color: var(--color-highlight-alt);
     }
 </style>

src/lib/viewport/footer.svelte

@@ -27,8 +27,7 @@
                 <a href="/projects">Projects</a>
                 <a class="link-level-2" href="/projects/projectn5">Homesick</a>
                 <a href="/blog">Blog</a>
-                <a href="/art">Art</a>
-                <a class="link-level-2" href="/art/drawings">Drawings</a>
+                <a href="/feed">Art Feed</a>
             </div>
             <div class="content-box">
                 <h6>Meta</h6>

src/lib/viewport/header.svelte

@@ -1,9 +1,9 @@
 {#snippet headerLinks()}
-    <a href="/">Home</a>
-    <a href="/projects">Projects</a>
-    <a href="/blog">Blog</a>
-    <a href="/art">Art</a>
-    <a href="/meta/about">About</a>
+    <a href="/">home</a>
+    <a href="/projects">projects</a>
+    <a href="/blog">blog</a>
+    <a href="/feed">art_feed</a>
+    <a href="/meta/about">about</a>
 {/snippet}
 
 <div class="header-content">

src/routes/+page.svelte

@@ -46,6 +46,16 @@
             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",
         },
+        {
+            title: "Art Feed",
+            description: "<b>[major update]</b> My creative side lives here",
+            img: "feed/banner.webp",
+            altText: "A rainbow-like holographic effect produced by bending a reflective sheet of cardboard.",
+            link: "feed",
+        },
+    ];
+
+    const galleryBottomRow: GalleryRowEntry[] = [
         {
             title: "Blog",
             description: `A place where I write about random things. <i>latest post: ${latestBlogDate}</i>`,
@@ -53,9 +63,6 @@
             altText: "View at a tram bridge rising and then curving to the left.",
             link: "blog",
         },
-    ];
-
-    const galleryBottomRow: GalleryRowEntry[] = [
         {
             title: "Projects",
             description: "An overview of my more technical projects",
@@ -63,13 +70,6 @@
             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",
@@ -114,8 +114,12 @@
         <div>
             <div class="sidebox-container blurred-background">
                 <h4 class="sidebox-header">heads-up</h4>
-                <p>This website works best on Firefox and other Gecko-based browsers! All pages <i>should</i> be responsive and work on mobile.</p>
-                <p>This website is 100% mobile-friendly – or at least trying to be!</p>
+                
+                <p>This website works best on Firefox and other Gecko-based browsers! It is also 100% mobile-friendly – or at least trying to be!</p>
+                
+                <p>All pages are functional without JavaScript but I recommend you enable it (some elements won't work without it)!</p>
+
+                <p>Links may change but I will set up redirects, promise.</p>
 
                 <hr>
 

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

@@ -1,137 +0,0 @@
-<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've mostly drawn on paper so far (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 got into digital art with Krita recently!</p>
-
-    <p>Why have I created this page, 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/+page.ts

@@ -0,0 +1,5 @@
+import { redirect } from "@sveltejs/kit";
+
+export function load() {
+    redirect(308, '/feed');
+}

src/routes/art/drawings/drawings.ts

@@ -1,90 +0,0 @@
-export interface Drawing {
-    title: string;
-    date: string;
-    notes: string[];
-    img: string;
-    imgAlt: string;
-}
-
-export let drawings: Drawing[] = [
-    {
-        title: "Krita #1",
-        date: "2026-03-10",
-        notes: [
-            "ok i changed my mind on digital art. it's awesome.",
-            "My first drawing using Krita! I went with my usual methods but tried refining some things and adding (hopefully not overly misplaced) shadows too. I ended up really liking the ability to use layers, and colour in digital art just pops so nicely.",
-            "Initially, I drew the left arm in front of her body but later changed this to avoid drawing the hand.",
-        ],
-        img: "2026/0310.webp",
-        imgAlt: "A digital drawing of a girl with long brown hair in a ponytail. She has green eyes and is wearing a cropped shirt with stripes, an orange spaghetti top underneath, and dark trousers. She is holding her hands behind her back.",
-    },
-    {
-        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: "A drawing of a girl with her head tilted towards her right shoulder. She is smiling with her eyes closed and is holding up a victory sign with her left hand. She has her hair in a ponytail and is wearing jeans with shoulder straps, and there is a scrunchie on her left wrist as well.",
-    },
-    {
-        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: "A pencil sketch of a girl with a ponytail, crop top, and track pants with a slightly shocked look on her face. She is looking at her right arm, which is a cyborg part.",
-    },
-    {
-        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: "Two pencil sketches traced over with a black fineliner. The left one is of a hand with a cube in its palm, sketched after the hand on the cover of Porter Robinson's album Worlds. Beneath it is an emoticon used on the same cover. To the right is a manga-style head with green eyes and wavy hair, meant to resemble Porter Robinson's Vocaloid mascot Po-Uta.",
-    },
-    {
-        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: "A pencil sketch of a girl holding up a V sign with her left arm. She is wearing a long-sleeve shirt, jeans, and her hair is tied up in a ponytail. She is winking, the other eye is coloured green. Her body is tilted towards the right side of the paper. In the top right corner is a lightly-drawn sketch of the girl's pose.",
-    },
-    {
-        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: "A pencil drawing of a girl looking to the left. She is wearing a cropped loose tee and jeans, while her right hand is hinted to rest on her hip.",
-    },
-    {
-        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: "A small drawing of an anime-style girl's head. She has a ponytail and is looking towards the left with a concentrated gaze.",
-    },
-];

src/routes/feed/+page.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+    import Content from "$lib/viewport/content.svelte";
+    import Banner2 from "$lib/banner2.svelte";
+    import TableOfContents from "$lib/components/table-of-contents.svelte";
+    import SubtitledImage from "$lib/components/subtitled-image.svelte";
+    import ImageGallery from "$lib/lists/image-gallery.svelte";
+</script>
+
+<svelte:head>
+    <title>Art Feed | denizk0461</title>
+</svelte:head>
+
+<Content>
+    <Banner2
+        title="Art Feed"
+        banner="banner.webp"
+        bannerAlt="Mirror picture of me, pixelated beyond recognition"
+        subtitle="subtitle missing"
+        date="2026-04-06"
+        pixelated
+    />
+
+    <TableOfContents />
+
+    <h2>My First Month Drawing</h2>
+    <p class="subtitle">self-imposed drawing challenge</p>
+    <p class="subtitle">February – March 2026</p>
+
+    <p>Back in January, I was thinking to myself that I'd really like to learn to draw. It would have some practical benefits like potentially being able to draw concept art for my game, but ultimately I just liked the idea of drawing as a hobby. I doodled a few small things before deciding that I should challenge myself to draw something every single day for an entire month (4 weeks); <a href="/blog/2026/0205">I documented the entire thing here</a>, but spoiler alert: I think I succeeded in learning to draw and I am now able to sketch like I was never able to before!</p>
+
+    <p>Here are some of my favourite drawings from around that time, in reverse chronological order:</p>
+
+    <ImageGallery
+        images={[
+            {
+                src: "drawings/2026/0310.webp",
+                alt: "A digital drawing of a girl with long brown hair in a ponytail. She has green eyes and is wearing a cropped shirt with stripes, an orange spaghetti top underneath, and dark trousers. She is holding her hands behind her back.",
+                desc: [
+                    "<b>2026-03-10</b>",
+                    "ok i changed my mind on digital art. it's awesome.",
+                    "My first drawing using Krita! I went with my usual methods but tried refining some things and adding (hopefully not overly misplaced) shadows too. I ended up really liking the ability to use layers, and colour in digital art just pops so nicely.",
+                    "Initially, I drew the left arm in front of her body but later changed this to avoid drawing the hand.",
+                ],
+            },
+            {
+                src: "/blog/2026/0205/27-1.webp",
+                alt: "A drawing of a girl with her head tilted towards her right shoulder. She is smiling with her eyes closed and is holding up a victory sign with her left hand. She has her hair in a ponytail and is wearing jeans with shoulder straps, and there is a scrunchie on her left wrist as well.",
+                desc: [
+                    "<b>2026-03-04</b>",
+                    "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!",
+                ],
+            },
+            {
+                src: "/blog/2026/0205/22.webp",
+                alt: "A pencil sketch of a girl with a ponytail, crop top, and track pants with a slightly shocked look on her face. She is looking at her right arm, which is a cyborg part.",
+                desc: [
+                    "<b>2026-02-27</b>",
+                    "Possibly my favourite sketch from the drawing challenge, because she looks cool, but also because her design deviates from the other characters a bit.",
+                ],
+            },
+            {
+                src: "/blog/2026/0205/21.webp",
+                alt: "Two pencil sketches traced over with a black fineliner. The left one is of a hand with a cube in its palm, sketched after the hand on the cover of Porter Robinson's album Worlds. Beneath it is an emoticon used on the same cover. To the right is a manga-style head with green eyes and wavy hair, meant to resemble Porter Robinson's Vocaloid mascot Po-Uta.",
+                desc: [
+                    "<b>2026-02-26</b>",
+                    "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.",
+                ],
+            },
+            {
+                src: "/blog/2026/0205/18.webp",
+                alt: "A pencil sketch of a girl holding up a V sign with her left arm. She is wearing a long-sleeve shirt, jeans, and her hair is tied up in a ponytail. She is winking, the other eye is coloured green. Her body is tilted towards the right side of the paper. In the top right corner is a lightly-drawn sketch of the girl's pose.",
+                desc: [
+                    "<b>2026-02-23</b>",
+                    "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.",
+                ],
+            },
+            {
+                src: "/blog/2026/0205/13-2.webp",
+                alt: "A pencil drawing of a girl looking to the left. She is wearing a cropped loose tee and jeans, while her right hand is hinted to rest on her hip.",
+                desc: [
+                    "<b>2026-02-18</b>",
+                    "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!",
+                ],
+            },
+            {
+                src: "drawings/2026/breadgirl.webp",
+                alt: "An anime-style girl chewing on a piece of bread. She wears a ponytail and a sleeveless top.",
+                desc: [
+                    "<b>2026-01-30</b>",
+                    "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.",
+                ],
+            },
+            {
+                src: "/blog/2026/0129/girl.webp",
+                alt: "A small drawing of an anime-style girl's head. She has a ponytail and is looking towards the left with a concentrated gaze.",
+                desc: [
+                    "<b>2026-01-29</b>",
+                    "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!",
+                ],
+            },
+        ]}
+    />
+
+    <h2>3DS USB-C mod</h2>
+    <p class="subtitle">DIY charging port mod</p>
+    <p class="subtitle">October 2024</p>
+
+    <SubtitledImage
+        image="electronics/3ds-usb-c/showcase.mp4"
+        subtitle="it charges via USB-C! also do you like my A Hat in Time theme?"
+        video
+    />
+
+    <p>
+        I modded my New 3DS XL (SNES Edition) to give it a USB-C port to charge!
+    </p>
+
+    <ImageGallery
+        images={[
+            {
+                src: "electronics/3ds-usb-c/finished.webp",
+                alt: "A back view at a New Nintendo 3DS XL with a USB-C port added between the charging port and the right shoulder buttons.",
+                desc: ["the USB-C port in all its glory"],
+            },
+            {
+                src: "electronics/3ds-usb-c/hole.webp",
+                alt: "At the top is a view at a USB-C-shaped hole cut into the back half of a New 3DS XL. At the bottom is a look at the same hole from the inside of the case. There are rough cutouts where the stylus slides in.",
+                desc: [
+                    "a closer look at the holes I cut, and how they affect the stylus slot",
+                ],
+            },
+        ]}
+    />
+
+    <p>
+        I used a small USB-C breakout I had lying around that is wired straight
+        into the charging pads of the original charging port, which is left
+        completely intact. The breakout board also has a 5.1kΩ resistor between
+        ground and one of the CC pins (which I had to manually find because it's
+        unlabelled) to allow for using C-to-C cables.
+    </p>
+
+    <p>
+        What I wrecked in turn was the wrist strap loop, which I completely cut
+        out to create the hole for the port. The stylus port also got cut down
+        to make space, but my stylus is kind of broken and doesn't stay put when
+        I put it into the system, so I didn't really care about that.
+    </p>
+
+    <p>
+        It works well! The hole isn't the prettiest but it was pretty simple to
+        pull off, and extremely cheap as well. In turn I got a 3DS that I can
+        charge using any USB-C cable and I no longer need to lug around the
+        proprietary 3DS charger!
+    </p>
+
+    <h2>deej0461</h2>
+    <p class="subtitle">PC companion audio source controller</p>
+    <p class="subtitle">August 2024</p>
+
+    <SubtitledImage
+        image="electronics/deej0461/finished.webp"
+        altText="A golden 3D printed shell with a slider on its left, two LEDs recessed, and four black buttons on its right. The buttons have symbols of speakers, monitors, and headphones printed on them. Three screws at the top are visible. A USB-C cable is plugged into the back of it."
+        subtitle="a handful of device for controlling a handful of other devices"
+        alignment="left"
+        smaller
+    />
+
+    <p>
+        This little device was inspired by one a friend of mine built his own
+        version of: a <a href="https://github.com/omriharel/deej">deej</a>
+        volume slider panel. This thing allows you to control different
+        applications with individual, <i>physical</i>, sliders. Super cool
+        thing.
+    </p>
+
+    <p>
+        Except – I didn't need all these sliders, really. A single slider would
+        be cool, I thought. You know what I really wanted? Buttons to control
+        the audio <i>source</i>, because I switch between speakers and
+        headphones constantly, and that's at least 3 clicks every time I want to
+        switch. So I built a device based on deej, but with some expansions.
+    </p>
+
+    <p>
+        I only used few components: a HID-enabled Arduino-compatible Pro Micro
+        with USB-C controls the whole thing. Hooked up to it are four Cherry
+        switches and a Soldering slider I had lying around from my <a
+            href="/projects/daisy">Daisy project</a
+        >, and I added two LEDs for good measure. It's all packaged into a
+        3D-printed enclosure I designed myself. The slider is screwed in
+        tightly, and so is the top of the case; the key switches are clipped in
+        from the top so they don't fall out; the Arduino and the LEDs are just
+        hot-glued in. For extra flair, the four output buttons are marked with
+        symbols for my outputs: two monitors, a pair of loudspeakers, and a pair
+        of headphones. In the final device, they're arranged so that my two most
+        frequently-used buttons are at the bottom for easier reach.
+    </p>
+
+    <p>
+        Software-wise, I set this up with the original deej software to control
+        main volume. For the audio, I used a program called <a
+            href="https://soundswitch.aaflalo.me/">SoundSwitch</a
+        >. The program listened to key presses for the <code>F21-F24</code> keys,
+        which the Arduino triggers when the output keys are pressed. The red LED
+        lights up when a key is pressed; the white LED has no assigned function.
+        This worked pretty well, but this is no longer the setup I use, since I switched
+        to Fedora Linux, as I needed to adapt/change the software for the new OS!
+    </p>
+
+    <ImageGallery
+        images={[
+            {
+                src: "electronics/deej0461/printing.webp",
+                alt: "A Bambu Lab A1 mini 3D printer in the middle of printing casing parts using a golden filament. The printer head has two googly eyes attached.",
+                desc: ["googly-eyed printer hard at work"],
+            },
+            {
+                src: "electronics/deej0461/soldering.webp",
+                alt: "An Arduino set into a 3D printed case with a slider, two LEDs, and four key switches soldered to it using wires. The components are spread out and hanging out the top of the case.",
+                desc: ["no PCB? no problem"],
+            },
+        ]}
+    />
+
+    <p>
+        When pressing a keyboard's volume button, Windows raises or lowers
+        volume in increments of 2. Fedora does 5. I found this much handier, so
+        I stopped reaching for the slider and just defaulted to using my
+        keyboard. This meant I didn't bother setting up the slider in Fedora.
+        The buttons work, though, but they needed some adjustment. I think (and
+        I might be wrong??) that Linux doesn't support function keys past F12,
+        so I changed the Arduino script so the buttons trigger <code
+            >Shift + F9-F12</code
+        >. Instead of a separate program (which kept asking to be updated...), I
+        now use KDE's built-in Shortcuts that trigger a script. The script is
+        one line: <code>pactl set-default-sink [sink-name]</code>. The sink name
+        is hard-coded into the file because, as extensive testing proved,
+        Shortcuts does not allow arguments when entering a command. I currently
+        only have two files set up: one for the primary monitor, one for the
+        headphones.
+    </p>
+
+    <p>
+        I much prefer the setup now because it doesn't rely on third-party
+        software anymore.
+    </p>
+
+    <p>
+        This thing is, no exaggeration, one of the handiest things I have ever
+        built, because I use it quite literally <i><b>every single day</b></i>.
+        I often switch between my monitor's speakers and my headphones, and
+        being able to do that with the press of a single button is
+        <i>unbelievably</i> handy. I don't even think about it anymore, I just reach
+        for the buttons whenever I switch. It's a part of my routine now and I wouldn't
+        want to miss it.
+    </p>
+</Content>
+
+<style>
+    .subtitle {
+        font-family: var(--font-mono);
+        margin: 0;
+        font-size: 1rem;
+        line-height: 1.4rem;
+        font-style: italic;
+        font-weight: 700;
+        color: var(--color-highlight-alt);
+    }
+
+    .subtitle::before {
+        content: "<!-- ";
+    }
+
+    .subtitle::after {
+        content: " -->";
+    }
+</style>

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

@@ -1,109 +0,0 @@
-<script>
-    import Banner2 from "$lib/banner2.svelte";
-    import SubtitledImage from "$lib/components/subtitled-image.svelte";
-    import TableOfContents from "$lib/components/table-of-contents.svelte";
-    import Content from "$lib/viewport/content.svelte";
-</script>
-
-<svelte:head>
-    <title>Small Projects | denizk0461</title> 
-</svelte:head>
-
-<Content>
-    <Banner2
-        title="My Small Projects"
-        subtitle="the ones that don't get the spotlight"
-        banner="crate.webp"
-        bannerAlt="A cardboard box filled with electronic components, tools, and screws. They are arranged in 3D printed Gridfinity containers." />
-
-    <p>Not all of my projects are big, month-long endeavours. Some of them are short and sweet. Sometimes, they're even more rewarding than the bigger ones, because you end up with a finished 'thing' much quicker! And because I like my small projects just as much as my bigger ones, I figured it would be nice to give them a space on my website as well.</p>
-
-    <p>There's more to come here! This page is very new and I will add things here gradually.</p>
-
-    <TableOfContents />
-
-    <h2>3DS USB-C mod</h2>
-    <p class="subtitle">DIY charging port mod</p>
-    <p class="subtitle">October 2024</p>
-
-    <SubtitledImage
-        image="3ds-usb-c/showcase.mp4"
-        subtitle="it charges via USB-C! also do you like my A Hat in Time theme?"
-        video />
-
-    <p>I modded my New 3DS XL (SNES Edition) to give it a USB-C port to charge!</p>
-
-    <SubtitledImage
-        image="3ds-usb-c/finished.webp"
-        altText="A back view at a New Nintendo 3DS XL with a USB-C port added between the charging port and the right shoulder buttons."
-        subtitle="the USB-C port in all its glory"
-        alignment="right" />
-
-    <p>I used a small USB-C breakout I had lying around that is wired straight into the charging pads of the original charging port, which is left completely intact. The breakout board also has a 5.1kΩ resistor between ground and one of the CC pins (which I had to manually find because it's unlabelled) to allow for using C-to-C cables.</p>
-
-    <SubtitledImage
-        image="3ds-usb-c/hole.webp"
-        altText="At the top is a view at a USB-C-shaped hole cut into the back half of a New 3DS XL. At the bottom is a look at the same hole from the inside of the case. There are rough cutouts where the stylus slides in."
-        subtitle="a closer look at the holes I cut, and how they affect the stylus slot"
-        alignment="left" />
-
-    <p>What I wrecked in turn was the wrist strap loop, which I completely cut out to create the hole for the port. The stylus port also got cut down to make space, but my stylus is kind of broken and doesn't stay put when I put it into the system, so I didn't really care about that.</p>
-
-    <p>It works well! The hole isn't the prettiest but it was pretty simple to pull off, and extremely cheap as well. In turn I got a 3DS that I can charge using any USB-C cable and I no longer need to lug around the proprietary 3DS charger!</p>
-
-    <h2>deej0461</h2>
-    <p class="subtitle">PC companion audio source controller</p>
-    <p class="subtitle">August 2024</p>
-
-    <SubtitledImage
-        image="deej0461/finished.webp"
-        altText="A golden 3D printed shell with a slider on its left, two LEDs recessed, and four black buttons on its right. The buttons have symbols of speakers, monitors, and headphones printed on them. Three screws at the top are visible. A USB-C cable is plugged into the back of it."
-        subtitle="a handful of device for controlling a handful of other devices" />
-    
-    <p>This little device was inspired by one a friend of mine built his own version of: a <a href="https://github.com/omriharel/deej">deej</a> volume slider panel. This thing allows you to control different applications with individual, <i>physical</i>, sliders. Super cool thing.</p>
-
-    <SubtitledImage
-        image="deej0461/printing.webp"
-        altText="A Bambu Lab A1 mini 3D printer in the middle of printing casing parts using a golden filament. The printer head has two googly eyes attached."
-        subtitle="googly-eyed printer hard at work"
-        alignment="left" />
-
-    <p>Except – I didn't need all these sliders, really. A single slider would be cool, I thought. You know what I really wanted? Buttons to control the audio <i>source</i>, because I switch between speakers and headphones constantly, and that's at least 3 clicks every time I want to switch. So I built a device based on deej, but with some expansions.</p>
-
-    <p>I only used few components: a HID-enabled Arduino-compatible Pro Micro with USB-C controls the whole thing. Hooked up to it are four Cherry switches and a Soldering slider I had lying around from my <a href="/projects/daisy">Daisy project</a>, and I added two LEDs for good measure. It's all packaged into a 3D-printed enclosure I designed myself. The slider is screwed in tightly, and so is the top of the case; the key switches are clipped in from the top so they don't fall out; the Arduino and the LEDs are just hot-glued in. For extra flair, the four output buttons are marked with symbols for my outputs: two monitors, a pair of loudspeakers, and a pair of headphones. In the final device, they're arranged so that my two most frequently-used buttons are at the bottom for easier reach.</p>
-
-    <p>Software-wise, I set this up with the original deej software to control main volume. For the audio, I used a program called <a href="https://soundswitch.aaflalo.me/">SoundSwitch</a>. The program listened to key presses for the <code>F21-F24</code> keys, which the Arduino triggers when the output keys are pressed. The red LED lights up when a key is pressed; the white LED has no assigned function. This worked pretty well, but this is no longer the setup I use, since I switched to Fedora Linux, as I needed to adapt/change the software for the new OS!</p>
-
-    <SubtitledImage
-        image="deej0461/soldering.webp"
-        altText="An Arduino set into a 3D printed case with a slider, two LEDs, and four key switches soldered to it using wires. The components are spread out and hanging out the top of the case."
-        subtitle="no PCB? no problem"
-        alignment="right" />
-
-    <p>When pressing a keyboard's volume button, Windows raises or lowers volume in increments of 2. Fedora does 5. I found this much handier, so I stopped reaching for the slider and just defaulted to using my keyboard. This meant I didn't bother setting up the slider in Fedora. The buttons work, though, but they needed some adjustment. I think (and I might be wrong??) that Linux doesn't support function keys past F12, so I changed the Arduino script so the buttons trigger <code>Shift + F9-F12</code>. Instead of a separate program (which kept asking to be updated...), I now use KDE's built-in Shortcuts that trigger a script. The script is one line: <code>pactl set-default-sink [sink-name]</code>. The sink name is hard-coded into the file because, as extensive testing proved, Shortcuts does not allow arguments when entering a command. I currently only have two files set up: one for the primary monitor, one for the headphones.</p>
-
-    <p>I much prefer the setup now because it doesn't rely on third-party software anymore.</p>
-
-    <p>This thing is, no exaggeration, one of the handiest things I have ever built, because I use it quite literally <i><b>every single day</b></i>. I often switch between my monitor's speakers and my headphones, and being able to do that with the press of a single button is <i>unbelievably</i> handy. I don't even think about it anymore, I just reach for the buttons whenever I switch. It's a part of my routine now and I wouldn't want to miss it.</p>
-
-</Content>
-
-<style>
-    .subtitle {
-        font-family: var(--font-mono);
-        margin: 0;
-        font-size: 1.0rem;
-        line-height: 1.4rem;
-        font-style: italic;
-        font-weight: 700;
-        color: var(--color-highlight-alt);
-    }
-
-    .subtitle::before {
-        content: '<!-- ';
-    }
-
-    .subtitle::after {
-        content: ' -->';
-    }
-</style>

src/routes/projects/small/+page.ts

@@ -0,0 +1,5 @@
+import { redirect } from "@sveltejs/kit";
+
+export function load() {
+    redirect(308, '/feed');
+}

src/routes/test/+page.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-    import Content from "$lib/viewport/content.svelte";
-    import ImageGallery, {
-        type GalleryImage,
-    } from "$lib/lists/image-gallery.svelte";
-
-    let i: GalleryImage[] = [
-        {
-            src: "/projects/projectn5/devlog/2025/0523/birds_eye.webp",
-            alt: "gawk",
-            desc: "gawk gawk gawk",
-        },
-        {
-            src: "/blog/robert.webp",
-            alt: "ROOOOBEEERT",
-            desc: "ROOOOBEEERT",
-        },
-        {
-            src: "/blog/2026/0208/sadstick.webp",
-            alt: ":(",
-            desc: ":(",
-        },
-        {
-            src: "/art/drawings/2026/0310.webp",
-            alt: "girl",
-            desc: "girl girl girl girl girlgirlgirl vgirl",
-        },
-    ];
-</script>
-
-<Content>
-    <h1>TEST</h1>
-
-    test page go brr
-
-    <ImageGallery images={i} />
-</Content>