basic set-up; started work on projects page

src/lib/banner-title.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
     let {
-        bannerImg,
-        bannerImgAlt,
+        bannerImg = "",
+        bannerImgAlt = "",
         title,
-        subtitle,
+        subtitle = "",
     }: {
-        bannerImg: string,
-        bannerImgAlt: string,
-        title: string,
-        subtitle: string,
+        bannerImg?: string;
+        bannerImgAlt?: string;
+        title: string;
+        subtitle?: string;
     } = $props();
 
 </script>

src/routes/+layout.svelte

@@ -0,0 +1,48 @@
+<script>
+	let { children } = $props();
+</script>
+
+{@render children()}
+
+<style>
+    :global {
+        body {
+            margin: 0 auto 228px;
+            max-width: 1200px;
+        }
+
+        p, span, li, pre, a, h1, h2, h3, h4, h5, h6 {
+            font-family: 'Reddit Sans', 'Lato', sans-serif;
+        }
+
+        p, span, li, pre, a {
+            color: var(--color-text);
+            line-height: 1.6rem;
+        }
+
+        h1 {
+            font-size: 3rem;
+            line-height: 3.5rem;
+        }
+        h2 {
+            font-size: 2rem;
+            line-height: 2.2rem;
+        }
+        h3 {
+            font-size: 1.4rem;
+            line-height: 1.5rem;
+        }
+        h4, h5, h6 {
+            font-size: 1.2rem;
+            line-height: 1.3rem;
+        }
+
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: 900;
+            color: var(--color-highlight);
+            margin-top: 12px;
+            margin-bottom: 8px;
+            width: fit-content;
+        }
+    }
+</style>

src/routes/projects/+page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import Header from "$lib/header.svelte";
+    import type { Project, Link } from './projects';
+    import { projects } from './projects';
+</script>
+
+<Header />
+
+{#each projects as project}
+    {@render projectSummary({ project })}
+{/each}
+
+{#snippet projectSummary({
+    project
+}: {
+    project: Project;
+})}
+    <div>
+        <h3 id="{project.id}">{project.title}</h3>
+        {#each project.paragraphs as paragraph}
+            <p>{@html paragraph}</p>
+        {/each}
+        <ul>
+            {#each project.links as link}
+                <li><a href="{link.link}">{@html link.text}</a></li>
+            {/each}
+        </ul>
+    </div>
+{/snippet}

src/routes/projects/projectn5/devlog/+page.svelte

@@ -1,5 +1,29 @@
 <script lang="ts">
     import Header from "$lib/header.svelte";
+    import BannerTitle from "$lib/banner-title.svelte";
+    // import type { DevlogPost } from "./posts";
+    import { posts } from "./posts";
 </script>
 
 <Header />
+<BannerTitle title="Devlog Posts" />
+
+<main>
+    {#each posts as post}
+        {@render devlogPost({ imgSrc: "", title: "{post.title}" })}
+        <p>{post.date}</p>
+    {/each}
+</main>
+
+{#snippet devlogPost({
+    imgSrc,
+    title,
+}: {
+    imgSrc: string;
+    title: string;
+})}
+    <div>
+        <img src='{imgSrc}'>
+        <p>{title}</p>
+    </div>
+{/snippet}

src/routes/projects/projectn5/devlog/posts.ts

@@ -0,0 +1,23 @@
+export interface DevlogPost {
+    title: string;
+    date: Date;
+    imgSrc: string;
+};
+
+export const posts: DevlogPost[] = [
+    {
+        title: "title",
+        date: new Date("2025-01-01"),
+        imgSrc: "",
+    },
+    {
+        title: "titasdfle",
+        date: new Date("2025-02-03"),
+        imgSrc: "",
+    },
+    {
+        title: "titl435345e",
+        date: new Date("2025-01-01"),
+        imgSrc: "",
+    },
+];

src/routes/projects/projects.ts

@@ -0,0 +1,37 @@
+export interface Project {
+    id: string;
+    bannerImg: string;
+    iconImg: string;
+    title: string;
+    paragraphs: string[];
+    links: Link[];
+};
+
+export interface Link {
+    text: string;
+    link: string;
+}
+
+export const projects: Project[] = [
+    {
+        id: "weserplaner",
+        bannerImg: "",
+        iconImg: "",
+        title: "WeserPlaner",
+        paragraphs: [
+            "<b>WeserPlaner</b> is an app I developed to more easily view relevant information during my studies at the University of Bremen. It can download the user's timetable from the university's learning platform Stud.IP, and it can download the menus for all canteens managed by the Studierendenwerk Bremen, allowing the user to filter for dietary preferences as well as hiding items containing substances they are allergic against.",
+            "In developing this app, I took heavy inspiration from an earlier project of mine, <b>AvH-Vertretungsplan</b>, which was an app I developed for a school I used to attend, in order to view the substitution plan as well as the canteen offers more easily. Quite similar!",
+            "I stopped work on the app in favour of other projects, notably because I had no significant plans for it. The app was taken down from the Google Play Store after I refused to comply with their new developer guidelines, requiring me to publish my home address (what the actual fuck Google?), and after the Studierendenwerk Bremen updated their page around the start of 2025, the app became nonfunctional.",
+        ],
+        links: [
+            {
+                text: "View on <b>Codeberg</b>",
+                link: "https://codeberg.org/denizk0461/weserplaner/",
+            },
+            {
+                text: "View on <b>Google Play</b> (outdated)",
+                link: "https://play.google.com/store/apps/details?id=com.denizk0461.weserplaner",
+            },
+        ],
+    },
+];