diff --git a/src/lib/banner-title.svelte b/src/lib/banner-title.svelte
index 02f4845..eed0079 100644
--- a/src/lib/banner-title.svelte
+++ b/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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..dbf3428
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 94e265c..2b229ba 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,4 +5,4 @@
 <Header />
 
 <h1><i>Moin!</i> ~ welcome to my website :)</h1>
-<p><a href="/projects/projectn5/devlog">projects</a></p>
+<p><a href="/projects/projectn5/devlog">projects</a></p>
\ No newline at end of file
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
new file mode 100644
index 0000000..cbe7f43
--- /dev/null
+++ b/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}
\ No newline at end of file
diff --git a/src/routes/projects/projectn5/devlog/+page.svelte b/src/routes/projects/projectn5/devlog/+page.svelte
index 6de3049..4e44385 100644
--- a/src/routes/projects/projectn5/devlog/+page.svelte
+++ b/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 />
\ No newline at end of file
+<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}
\ No newline at end of file
diff --git a/src/routes/projects/projectn5/devlog/posts.ts b/src/routes/projects/projectn5/devlog/posts.ts
new file mode 100644
index 0000000..b287de7
--- /dev/null
+++ b/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: "",
+    },
+];
\ No newline at end of file
diff --git a/src/routes/projects/projects.ts b/src/routes/projects/projects.ts
new file mode 100644
index 0000000..ee98029
--- /dev/null
+++ b/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",
+            },
+        ],
+    },
+];
\ No newline at end of file