main page mostly finished

src/lib/link-list.svelte

@@ -1 +1,66 @@
-<ul></ul>
+<script lang="ts">
+    export interface LinkEntry {
+        icon?: string;
+        text: string;
+        link: string;
+    }
+
+    let {
+        entries,
+    } : {
+        entries: LinkEntry[];
+    } = $props();
+</script>
+
+<ul>
+    {#each entries as entry}
+    <li>
+        <a href={entry.link}>
+            {#if entry.icon}
+            <img height="24px" src={entry.icon}>
+            {/if}
+            {entry.text}
+        </a>
+    </li>
+    {/each}
+</ul>
+
+<style>
+    ul {
+        padding: 0;
+    }
+
+    li::before {
+        content: "–";
+        color: var(--color-highlight);
+        padding-right: 8px;
+    }
+    li {
+        display: flex;
+        padding-left: 0;
+        margin-top: 4px;
+        margin-bottom: 4px;
+        transition: background-color 0.2s ease-in-out;
+        padding: 2px 12px;
+    }
+    li:hover {
+        background-color: var(--color-background-highlight-hover);
+    }
+    a {
+        width: 100%;
+        transition: color 0.2s ease-in-out;
+    }
+    a:link, a:visited {
+        color: var(--color-text);
+        text-decoration: none;
+    }
+    a:hover {
+        color: var(--color-highlight);
+    }
+
+    img {
+        filter: var(--color-text-img);
+        margin-top: 4px;
+        margin-bottom: -4px;
+    }
+</style>

src/lib/lists/gallery-entry.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+    export interface GalleryEntry {
+        title: string;
+        subtitle: string;
+        fullWidth: boolean;
+        img: string;
+        link: string;
+    }
+
+    let {
+        entries,
+    }: {
+        entries: GalleryEntry[];
+    } = $props();
+</script>
+
+<div class="container">
+    {#each entries as entry}
+    {#if entry.fullWidth}
+    <div class="entry-parent full-width">
+        {@render galleryEntry({entry})}
+    </div>
+    {:else}
+    <div class="entry-parent half-width">
+        {@render galleryEntry({entry})}
+    </div>
+    {/if}
+    {/each}
+</div>
+
+{#snippet galleryEntry({entry}: {entry: GalleryEntry})}
+<a class="entry" href="{entry.link}">
+    <img src="{entry.img}">
+    <p>{entry.title}</p>
+    <p>{entry.subtitle}</p>
+</a>
+{/snippet}
+
+<style>
+    .container {
+        margin-left: auto;
+        margin-right: auto;
+        display: flex;
+        flex-wrap: wrap;
+        /* flex-flow: row wrap; */
+        justify-content: left;
+        margin: 4px;
+    }
+
+    .entry-parent {
+        display: flex;
+    }
+
+    .entry {
+        margin: 4px;
+        padding-bottom: 12px;
+        background-color: var(--color-background-highlight);
+        text-decoration: none; /* removes link underline */
+        transition: background-color 0.16s ease-in-out;
+    }
+    .entry:hover {
+        background-color: var(--color-background-highlight-hover);
+    }
+
+    .entry img {
+        width: 100%;
+        object-fit: cover;
+        max-height: 300px;
+    }
+    .entry p {
+        margin: 0 32px;
+    }
+    /* gallery entry header */
+    .entry p:nth-child(2) {
+        font-size: 20px;
+        margin-top: 12px;
+        font-weight: 800;
+        font-style: italic;
+    }
+
+    .half-width {
+        width: 50%;
+    }
+    .full-width {
+        width: 100%;
+    }
+</style>

src/routes/+layout.svelte

@@ -11,11 +11,13 @@
 
         :root {
             --color-text: #e0e0e0;
+            --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
             --color-text-dark: #1e1e1e;
             --color-highlight: #72b175;
 
             --color-background: #1b1b1b;
             --color-background-highlight: color-mix(in srgb, var(--color-highlight) 10%, transparent);
+            --color-background-highlight-hover: color-mix(in srgb, var(--color-highlight) 60%, transparent);
             
             --color-waters: #2b2b2b;
         }

src/routes/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
     import Header from "$lib/header.svelte";
+    import Footer from "$lib/footer.svelte";
     import GamedevWebring from "$lib/webrings/gamedev.svelte";
+    import Gallery from "$lib/lists/gallery-entry.svelte";
+    import LinkList from "$lib/link-list.svelte";
 
     var lastIndex = -1;
     let meImg: string = "common/me/a.webp";
@@ -24,11 +27,32 @@
 <Header />
 
 <h1><i>Moin!</i> ~ welcome to my website :)</h1>
-<p><a href="/projects/projectn5/devlog">projects</a></p>
 
 <div class="container">
     <div class="subcontainer">
-        
+        <Gallery entries={[
+            {
+                title: "Project N5 – devlog",
+                subtitle: "my active game project about a girl finding herself in an unfamiliar future",
+                fullWidth: true,
+                img: "projects/projectn5/devlog/20250316/fishmonger.webp",
+                link: "projects/projectn5/devlog",
+            },
+            {
+                title: "Projects",
+                subtitle: "an overview of what i do and have done",
+                fullWidth: false,
+                img: "projects/project-mix.webp",
+                link: "projects",
+            },
+            {
+                title: "idk",
+                subtitle: "idk",
+                fullWidth: false,
+                img: "projects/project-mix.webp",
+                link: "",
+            },
+        ]}/>
     </div>
     <div class="subcontainer">
         <h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} onclick={setPicture}>↫ me </h3>
@@ -37,14 +61,37 @@
 
         <p>Here you can find information on things I like sharing. check out my projects, especially the devlog of the game I'm working on!</p>
 
-        <h3>contact me: how to</h3>
+        <h3>where to find me</h3>
 
-        <p>Feel free to contact me via these means:</p>
+        <LinkList entries={[
+            {
+                icon: "icons/bluesky.svg",
+                text: "Bluesky",
+                link: "https://bsky.app/profile/denizk0461.bsky.social",
+            },
+            {
+                icon: "icons/codeberg.svg",
+                text: "Codeberg",
+                link: "https://codeberg.org/denizk0461",
+            },
+            {
+                icon: "icons/github.svg",
+                text: "GitHub",
+                link: "https://github.com/denizk0461",
+            },
+            {
+                icon: "icons/mailboxdotorg.svg",
+                text: "E-Mail: denizk0461@mailbox.org",
+                link: "",
+            },
+        ]}/>
 
         <GamedevWebring />
     </div>
 </div>
 
+<Footer />
+
 <style>
     .container {
         display: flex;

src/routes/projects/projectn5/devlog/[post]/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-    import Header from "$lib/header.svelte";
-</script>
-
-<Header />

static/icons/bluesky.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Bluesky</title><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"/></svg>

static/icons/codeberg.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Codeberg</title><path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467l4.416 16.553a12 12 0 0 0 5.137-4.213z"/></svg>

static/icons/github.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

static/icons/mailboxdotorg.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>mailbox.org</title><path d="M2.229 22.844H24V10.501l-8.628 5.882c-.613.419-1.226-.003-1.226-.003L0 6.646v13.969s0 2.229 2.229 2.229m12.558-9.273L24 7.261V1.156H2.229S0 1.156 0 3.384v.06l14.787 10.127Z"/></svg>