added table of contents generator

src/lib/banner-title.svelte

@@ -13,8 +13,8 @@
 
 <div class="container">
     <img src="{banner}">
-    <h1>{title}</h1>
+    <h1 class="title">{title}</h1>
-    <h2>{subtitle}</h2>
+    <p class="subtitle">{subtitle}</p>
 </div>
 
 <style>
@@ -33,7 +33,7 @@
         object-fit: cover;
     }
 
-    .container h1 {
+    .title {
         position: absolute;
         width: 100%;
         box-sizing: border-box;
@@ -44,4 +44,8 @@
         bottom: 0px;
         background-image: linear-gradient(to right, #00000088, #000000AA);
     }
+
+    .subtitle {
+
+    }
 </style>

src/lib/footer.svelte

@@ -0,0 +1 @@
+<p>temporary footer</p>

src/lib/table-of-contents.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+    let {
+        document,
+        querySelector = "h2, h3, h4, h5",
+    }: {
+        document: Document;
+        querySelector?: string;
+    } = $props();
+
+    var idCounter: number = 0;
+
+    let getHeaders = function(): NodeList {
+        return document.querySelectorAll(querySelector);
+    }
+
+    let getHeaderId = function(header: Node): string {
+        var id = (header as HTMLElement).id;
+        if (!id) {
+            id = `header-${idCounter}`;
+            (header as HTMLElement).id = id;
+            idCounter += 1;
+        }
+        return id;
+    }
+
+    let getHeaderLevel = function(header: Node): string {
+        switch ((header as HTMLElement).tagName) {
+            case "H2":
+                return "0";
+            case "H3":
+                return "1";
+            case "H4":
+                return "2";
+            case "H5":
+                return "3";
+            default:
+                return "0";
+        }
+    }
+</script>
+
+<div class="toc-container">
+    <ul class="toc-list">
+        {#each getHeaders() as header}
+            <li class="toc-level-{getHeaderLevel(header)}"><a href="#{getHeaderId(header)}">{(header as HTMLElement).innerText}</a></li>
+        {/each}
+    </ul>
+</div>
+
+<style>
+    .toc-container {
+        width: 80%;
+        margin-left: auto;
+        margin-right: auto;
+
+        background-color: var(--color-background-highlight);
+        padding: 16px 0;
+    }
+
+    .toc-list {
+        padding: 0;
+        margin: 0;
+    }
+    .toc-list li {
+        list-style: none;
+    }
+    .toc-list li a {
+        width: 100%;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        padding-right: 24px;
+        display: inline-block;
+        color: var(--color-text);
+        text-decoration: none;
+        transition: all 0.2s ease-in-out;
+        transition-property: color background-color;
+        box-sizing: border-box;
+    }
+
+    .toc-list li a:hover {
+        color: var(--color-text-dark);
+        background-color: var(--color-highlight);
+    }
+
+    .toc-level-0 a {
+    padding-left: 44px;
+    }
+    .toc-level-1 a {
+        padding-left: 68px;
+    }
+    .toc-level-2 a {
+        padding-left: 92px;
+    }
+    .toc-level-3 a {
+        padding-left: 116px;
+    }
+    .toc-level-1 a::before, .toc-level-2 a::before, .toc-level-3 a::before {
+        content: "↳ ";
+    }
+</style>

src/routes/+layout.svelte

@@ -11,11 +11,21 @@
 
         :root {
             --color-text: #e0e0e0;
+            --color-text-dark: #1e1e1e;
             --color-highlight: #72b175;
+
             --color-background: #1b1b1b;
+            --color-background-highlight: color-mix(in srgb, var(--color-highlight) 10%, transparent);
+            
             --color-waters: #2b2b2b;
         }
 
+        html {
+            scroll-behavior: smooth;
+            position: relative;
+            min-height: 100%;
+        }
+
         body {
             margin: 0 auto 228px;
             max-width: 1200px;

src/routes/projects/+page.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
     import BannerTitle from "$lib/banner-title.svelte";
     import Header from "$lib/header.svelte";
+    import Footer from "$lib/footer.svelte";
+    import TableOfContents from "$lib/table-of-contents.svelte";
     import type { Project } from './projects';
     import { projects } from './projects';
+    import { browser } from '$app/environment';
 
     let getActiveProjects = function(projects: Project[], isActive: boolean): Project[] {
         var result: Project[] = [];
@@ -19,6 +22,12 @@
 
 <BannerTitle title="My Disordered Projects" banner="projects/banner.webp" />
 
+<p>This is a listing of some of my more noteworthy projects that can be found on the web.</p>
+
+{#if browser}
+    <TableOfContents {document}/>
+{/if}
+
 <h2>Active Projects</h2>
 {#each getActiveProjects(projects, true) as activeProject}
     {@render projectSummary({ project: activeProject })}
@@ -29,6 +38,8 @@
     {@render projectSummary({ project: pastProject })}
 {/each}
 
+<Footer />
+
 {#snippet projectSummary({
     project
 }: {