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

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