added more prominent links to subpages to projects page; added banner for small projects page

src/lib/components/subtitled-image.svelte

@@ -1,20 +1,28 @@
 <script lang="ts">
+    import Video from '$lib/video.svelte';
+
     let {
         image,
         altText,
         subtitle,
         // options: left, right. leaving empty means centred
         alignment,
+        video,
     }: {
         image: string;
-        altText: string;
+        altText?: string;
         subtitle?: string;
         alignment?: string;
+        video?: boolean;
     } = $props();
 </script>
 
 {#snippet subtitledImageContent()}
-    <img class="subtitled-img" src="{image}" alt="{altText}">
+    {#if video}
+        <Video src={image} />
+    {:else}
+        <img class="subtitled-img" src="{image}" alt="{altText}">
+    {/if}
 
     {#if subtitle}
         <hr>

src/lib/components/table-of-contents.svelte

@@ -83,6 +83,7 @@
             width: 70%;
             margin-left: auto;
             margin-right: auto;
+            margin-top: 12px;
             background-color: var(--color-background-highlight);
             padding: 16px 0;
             border: var(--border-style) var(--border-dash-size) var(--color-highlight);

src/routes/+layout.svelte

@@ -296,7 +296,6 @@
         }
 
         img, video {
-            width: var(--media-width);
             margin-left: auto;
             margin-right: auto;
             display: flex;
@@ -304,6 +303,19 @@
             object-fit: contain;
         }
 
+        img {
+            width: var(--media-width);
+        }
+
+        video {
+            max-width: var(--media-width);
+            margin-top: 12px;
+            margin-bottom: 12px;
+            /* padding: 8px;
+            backdrop-filter: blur(var(--blur-radius-background));
+            border: var(--border-dash-size) var(--border-style) var(--color-highlight); */
+        }
+
         .horizontally-centre-aligned {
             width: var(--media-width);
             display: flex;
@@ -433,30 +445,5 @@
             font-family: var(--font-sans-serif);
             padding: 4px;
         }
-
-        @media screen and (max-width: 800px) {
-            /* h1 {
-                font-size: 2.3rem;
-                line-height: 2.4rem;
-            }
-
-            h2 {
-                font-size: 1.8rem;
-                line-height: 1.8rem;
-            }
-
-            h3 {
-                font-size: 1.6rem;
-                line-height: 1.6rem;
-            }
-
-            h4, h5, h6 {
-                font-size: 1.4rem;
-                line-height: 1.4rem;
-            } */
-
-            /* p, span, li, pre, a {
-            } */
-        }
     }
 </style>

src/routes/projects/+page.svelte

@@ -4,6 +4,24 @@
     import { type Project, games, hardware, apps, music, getStatusText, getStatusCode } from './projects';
     import LinkList from "$lib/lists/link-list.svelte";
     import Content from "$lib/viewport/content.svelte";
+    import GalleryRow, { type GalleryRowEntry } from "$lib/lists/gallery-row.svelte";
+
+    const subpages: GalleryRowEntry[] = [
+        {
+            title: "Small Projects",
+            description: "Showing off the projects that don't get the spotlight",
+            img: "small/crate.webp",
+            altText: "A cardboard box filled with electronic components, tools, and screws. They are arranged in 3D printed Gridfinity containers.",
+            link: "small",
+        },
+        {
+            title: "Discography",
+            description: "Small stories about my past music",
+            img: "/main/hypertext.webp",
+            altText: "",
+            link: "my-tracks",
+        },
+    ];
 </script>
 
 <svelte:head>
@@ -19,7 +37,9 @@
 
     <p>Welcome to my projects page! Here I show off all the things I have done. Projects are ordered by general topic, sorted reverse-chronologically, and have a status marker assigned that shows whether they are active or not. have fun browsing~!</p>
 
-    <p>The projects page also has <a href="small">a sister page</a> where I document some of my smaller projects, if that interests you.</p>
+    <p>The projects page also has two sister pages that go into detail about specific subgroups of projects:</p>
+
+    <GalleryRow entries={subpages} />
 
     <TableOfContents />
 
@@ -39,11 +59,6 @@
     {/each}
 
     <h2 id="music">Music</h2>
-
-    <p>I made a lot of music in the past; over a hundred songs in total. There's at least a small story behind pretty much every one of them here, and I am chronicling my memories on a subpage.</p>
-
-    <p>You can find this <a href="my-tracks">here</a>, if you're interested.</p>
-
     {#each music as project}
         {@render projectSummary({ project: project })}
     {/each}

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

@@ -2,7 +2,6 @@
     import Banner2 from "$lib/banner2.svelte";
     import SubtitledImage from "$lib/components/subtitled-image.svelte";
     import TableOfContents from "$lib/components/table-of-contents.svelte";
-    import ImageSubtitle from "$lib/image-subtitle.svelte";
     import Content from "$lib/viewport/content.svelte";
 </script>
 
@@ -14,8 +13,8 @@
     <Banner2
         title="My Small Projects"
         subtitle="the ones that don't get the spotlight"
-        banner=""
+        banner="crate.webp"
-        bannerAlt="" />
+        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>
 
@@ -23,7 +22,36 @@
 
     <TableOfContents />
 
-    <h2>Deej0461</h2>
+    <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>