added table of contents generator

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
 }: {