added 3DS USB-C mod to small projects page

src/lib/components/subtitled-image.svelte

@@ -1,21 +1,29 @@
 <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>
         <div class="subtitled-img-text-container">

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/small/+page.svelte

@@ -3,6 +3,7 @@
     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 Video from "$lib/video.svelte";
     import Content from "$lib/viewport/content.svelte";
 </script>
 
@@ -23,7 +24,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>