added table of contents generator

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