added all content to projects page

src/lib/banner-title.svelte

@@ -1,20 +1,47 @@
 <script lang="ts">
     let {
-        bannerImg = "",
-        bannerImgAlt = "",
         title,
         subtitle = "",
+        banner = "",
     }: {
-        bannerImg?: string;
-        bannerImgAlt?: string;
         title: string;
         subtitle?: string;
+        banner?: string;
     } = $props();
 
 </script>
 
-<div>
+<div class="container">
-    <img src="{bannerImg}" alt="{bannerImgAlt}">
+    <img src="{banner}">
     <h1>{title}</h1>
     <h2>{subtitle}</h2>
-</div>
+</div>
+
+<style>
+    .container {
+        position: relative;
+        width: 100%;
+        height: 500px;
+    }
+
+    .container img {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 500px;
+        width: 100%;
+        object-fit: cover;
+    }
+
+    .container h1 {
+        position: absolute;
+        width: 100%;
+        box-sizing: border-box;
+        height: fit-content;
+        padding: 12px 24px;
+        left: 0;
+        right: 0;
+        bottom: 0px;
+        background-image: linear-gradient(to right, #00000088, #000000AA);
+    }
+</style>

src/routes/+layout.svelte

@@ -2,17 +2,43 @@
 	let { children } = $props();
 </script>
 
+<div class="waters"></div>
 {@render children()}
 
 <style>
     :global {
+        @import url('https://fonts.upset.dev/css2?family=Reddit+Mono:wght@200..900&family=Reddit+Sans+Condensed:wght@200..900&family=Reddit+Sans:ital,wght@0,200..900;1,200..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+        :root {
+            --color-text: #e0e0e0;
+            --color-highlight: #72b175;
+            --color-background: #1b1b1b;
+            --color-waters: #2b2b2b;
+        }
+
         body {
             margin: 0 auto 228px;
             max-width: 1200px;
+            
+            font-family: 'Reddit Sans', 'Lato', sans-serif;
+            font-size: 1.1rem;
+            color: var(--color-text); /* text colour */
+            
+            background-color: var(--color-background);
         }
 
-        p, span, li, pre, a, h1, h2, h3, h4, h5, h6 {
+        .waters {
-            font-family: 'Reddit Sans', 'Lato', sans-serif;
+            position: fixed;
+            z-index: -99;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            background-color: var(--color-waters);
+            mask-image: url('bremen-waters-white.svg');
+            mask-position: center;
+            background-position: center;
+            background-attachment: fixed;
         }
 
         p, span, li, pre, a {

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}
+<BannerTitle title="My Disordered Projects" banner="projects/banner.webp" />
-    {@render projectSummary({ project })}
+
+<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>

src/routes/projects/projects.ts

@@ -1,7 +1,8 @@
 export interface Project {
     id: string;
-    bannerImg: string;
+    isActive: boolean; // whether the project is currently active (true) or a past project (false)
-    iconImg: string;
+    banner: string;
+    icon: string;
     title: string;
     subtitle: string;
     paragraphs: string[];
@@ -16,8 +17,9 @@ export interface Link {
 export const projects: Project[] = [
     {
         id: "projectn5",
-        bannerImg: "",
+        isActive: true,
-        iconImg: "",
+        banner: "/projects/projectn5/banner.webp",
+        icon: "",
         title: "Project N5",
         subtitle: "",
         paragraphs: [
@@ -33,8 +35,9 @@ export const projects: Project[] = [
     },
     {
         id: "projektike",
-        bannerImg: "",
+        isActive: true,
-        iconImg: "",
+        banner: "/projects/projektike/banner.webp",
+        icon: "",
         title: "Projektike",
         subtitle: "Wizard Game",
         paragraphs: [
@@ -49,8 +52,9 @@ export const projects: Project[] = [
     },
     {
         id: "daisyfm",
-        bannerImg: "",
+        isActive: false,
-        iconImg: "",
+        banner: "/projects/daisyfm/banner.webp",
+        icon: "",
         title: "Daisy",
         subtitle: "Electro-Smith Daisy-based FM synth",
         paragraphs: [
@@ -73,8 +77,9 @@ export const projects: Project[] = [
     },
     {
         id: "swordsnstuff",
-        bannerImg: "",
+        isActive: false,
-        iconImg: "",
+        banner: "/projects/swordsnstuff/banner.webp",
+        icon: "",
         title: "Swords & Stuff",
         subtitle: "Unity 2D RPG",
         paragraphs: [
@@ -90,9 +95,10 @@ export const projects: Project[] = [
         ],
     },
     {
-        id: "",
+        id: "tads",
-        bannerImg: "",
+        isActive: false,
-        iconImg: "",
+        banner: "/projects/tads/banner.webp",
+        icon: "/projects/tads/icon.webp",
         title: "Totally Accurate Dating Simulator",
         subtitle: "HTML Text Adventure",
         paragraphs: [
@@ -111,8 +117,9 @@ export const projects: Project[] = [
     },
     {
         id: "weserplaner",
-        bannerImg: "",
+        isActive: false,
-        iconImg: "",
+        banner: "/projects/weserplaner/banner.webp",
+        icon: "/projects/weserplaner/icon.webp",
         title: "WeserPlaner",
         subtitle: "University Timetable & Canteen Info App",
         paragraphs: [
@@ -133,8 +140,9 @@ export const projects: Project[] = [
     },
     {
         id: "textbasic",
-        bannerImg: "",
+        isActive: false,
-        iconImg: "",
+        banner: "",
+        icon: "/projects/textbasic/icon.webp",
         title: "Text Basic",
         subtitle: "Extremely Basic Text Widget App",
         paragraphs: [
@@ -154,8 +162,9 @@ export const projects: Project[] = [
     },
     {
         id: "dreamworld",
-        bannerImg: "",
+        isActive: false,
-        iconImg: "",
+        banner: "",
+        icon: "/projects/dreamworld/icon.webp",
         title: "Dreamworld",
         subtitle: "My First Album",
         paragraphs: [
@@ -177,10 +186,11 @@ export const projects: Project[] = [
     },
     {
         id: "anewbeginning",
-        bannerImg: "",
+        isActive: false,
-        iconImg: "",
+        banner: "",
+        icon: "/projects/anewbeginning/icon.webp",
         title: "A New Beginning",
-        subtitle: "????",
+        subtitle: "",
         paragraphs: [
             "<b>A New Beginning</b> is an EP I wrote back in 2018 in an effort to change up my production style. Originally, this EP was released as <i>A New Beginning (3-Track)</i>, featuring A New Beginning as <i>Nowy Początek</i> and <i>Farewell</i> in two different versions, one being an instrumental titled <i>Trzymajcie Się</i>, and the other one being a bootleg of Kelly Clarkson's <i>Behind These Hazel Eyes</i> called <i>Behind These Hazel Eyes (D4rkn355 'Farewell' Bootleg)</i>! For copyright reasons, the bootleg never made it onto Spotify.",
             "This EP, to me, represents the start of a deviation in tone, production quality, and musical style from my previous works. While it was only a start, I am quite proud of the works I produced.",
@@ -198,8 +208,9 @@ export const projects: Project[] = [
     },
     {
         id: "qwark",
-        bannerImg: "",
+        isActive: false,
-        iconImg: "",
+        banner: "",
+        icon: "/projects/qwark/icon.webp",
         title: "Qwark Grade Log",
         subtitle: "Grade Logging App",
         paragraphs: [
@@ -215,9 +226,10 @@ export const projects: Project[] = [
         ],
     },
     {
-        id: "avh-plan",
+        id: "avhplan",
-        bannerImg: "",
+        isActive: false,
-        iconImg: "",
+        banner: "",
+        icon: "/projects/avhplan/icon.webp",
         title: "AvH-Vertretungsplan",
         subtitle: "Substitution Plan App",
         paragraphs: [
@@ -235,8 +247,9 @@ export const projects: Project[] = [
     },
     {
         id: "soundcloud",
-        bannerImg: "",
+        isActive: false,
-        iconImg: "",
+        banner: "",
+        icon: "/projects/soundcloud/icon.webp",
         title: "Soundcloud",
         subtitle: "Demo Dump & Archive",
         paragraphs: [

src/routes/uses/+page.svelte

@@ -0,0 +1,7 @@
+
+
+Here's a list of what I used to create this page
+
+svelte
+
+background: rivers of bremen and nearby area, made using QGIS and data from ???