added all content to projects page

src/routes/projects/+page.svelte

@@ -1,13 +1,32 @@
 <script lang="ts">
+    import BannerTitle from "$lib/banner-title.svelte";
     import Header from "$lib/header.svelte";
-    import type { Project, Link } from './projects';
+    import type { Project } from './projects';
     import { projects } from './projects';
+
+    let getActiveProjects = function(projects: Project[], isActive: boolean): Project[] {
+        var result: Project[] = [];
+        projects.forEach(project => {
+            if (project.isActive == isActive) {
+                result.push(project);
+            }
+        });
+        return result;
+    }
 </script>
 
 <Header />
 
-{#each projects as project}
-    {@render projectSummary({ project })}
+<BannerTitle title="My Disordered Projects" banner="projects/banner.webp" />
+
+<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}
 
 {#snippet projectSummary({
@@ -17,6 +36,15 @@
 })}
     <div>
         <h3 id="{project.id}">{project.title}</h3>
+        {#if project.subtitle}
+        <p class="subtitle">» {project.subtitle}</p>
+        {/if}
+        {#if project.banner}
+        <img class="banner" src="{project.banner}">
+        {/if}
+        {#if project.icon}
+        <img class="icon" src="{project.icon}">
+        {/if}
         {#each project.paragraphs as paragraph}
             <p>{@html paragraph}</p>
         {/each}
@@ -26,4 +54,26 @@
             {/each}
         </ul>
     </div>
-{/snippet}
+{/snippet}
+
+<style>
+    .subtitle {
+        color: var(--color-highlight);
+        font-weight: 700;
+        font-style: italic;
+        margin-top: 0;
+    }
+    
+    .banner {
+        width: 80%;
+        margin-left: auto;
+        margin-right: auto;
+        display: flex;
+    }
+
+    .icon {
+        float: left;
+        margin: 16px 16px 16px 0;
+        width: 20%;
+    }
+</style>