added content.svelte to handle page max width for specific elements; added alternative page banner

src/routes/projects/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-    import BannerTitle from "$lib/banner-title.svelte";
+    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
+    import Content from "$lib/content.svelte";
     import type { Project } from './projects';
     import { projects } from './projects';
     import LinkList from "$lib/link-list.svelte";
@@ -20,21 +21,25 @@
     <title>Projects | denizk0461</title> 
 </svelte:head>
 
-<BannerTitle title="My Disordered Projects" banner="/projects/banner.webp" />
+<BannerTitleAlt
+    title="My Disordered Projects"
+    banner="/projects/banner.webp"
+    subtitle="Here's a listing of some of my more noteworthy projects that can be found on the web."
+/>
 
-<p>This is a listing of some of my more noteworthy projects that can be found on the web.</p>
+<Content>
+    <TableOfContents />
+    
+    <h2>Active Projects</h2>
+    {#each getActiveProjects(projects, true) as activeProject}
+        {@render projectSummary({ project: activeProject })}
+    {/each}
 
-<TableOfContents />
-
-<h2>Active Projects</h2>
-{#each getActiveProjects(projects, true) as activeProject}
-    {@render projectSummary({ project: activeProject })}
-{/each}
-
-<h2>Past Projects</h2>
-{#each getActiveProjects(projects, false) as pastProject}
-    {@render projectSummary({ project: pastProject })}
-{/each}
+    <h2>Past Projects</h2>
+    {#each getActiveProjects(projects, false) as pastProject}
+        {@render projectSummary({ project: pastProject })}
+    {/each}
+</Content>
 
 {#snippet projectSummary({
     project
@@ -60,6 +65,10 @@
 {/snippet}
 
 <style>
+    .asdf {
+        display: flex;
+        flex-direction: row;
+    }
     .subtitle {
         color: var(--color-highlight);
         font-weight: 700;