pages/src/routes/+page.svelte

<script lang="ts">
    import Content from "$lib/viewport/content.svelte";
    import GamedevWebring from "$lib/webrings/gamedev.svelte";
    import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";

    import { posts as devlogPosts } from "./projects/projectn5/devlog/posts";
    import { posts as blogPosts } from "./blog/posts";
    import { entries as changelogEntries, type ChangelogEntry } from "./changelog";

    let latestDevlogDate = devlogPosts[0].post.date;
    let latestBlogDate = blogPosts[0].post.date;

    let changelogEntriesTrimmed = changelogEntries.slice(0, 4);

    const galleryEntries: GalleryEntry[] = [
        {
            title: "Project N5 – devlog",
            subtitle: `my active Godot game project about finding yourself in an unfamiliar future. <i>latest update: ${latestDevlogDate}</i>`,
            img: "projects/projectn5/devlog/2025/0523/birds_eye.webp",
            imgAlt: "Project N5 screenshot of Laura looking down at two cuboids",
            link: "projects/projectn5",
        },
        {
            title: "Projects",
            subtitle: "an overview of what I do and have done",
            img: "projects/project-mix.webp",
            imgAlt: "A collage of multiple projects: the Unity default third-person character and CJ from GTA San Andreas in the top left; purple protagonist from Project N5 holding a massive rocket launcher in the top right; two wizards in the bottom left; a breadboard with a microcontroller and input components in the bottom right",
            link: "projects",
        },
        {
            title: "Blog",
            subtitle: `A place where I write about random things. <i>latest post: ${latestBlogDate}</i>`,
            img: "blog/robert.webp",
            imgAlt: "View at a tram bridge rising and then curving to the left.",
            link: "blog",
        },
        {
            title: "Files",
            subtitle: "find things I've put for download on my copyparty instance",
            img: "common/hypertext.webp",
            imgAlt: "Screenshot of Hypertext Unity level. Crates are strewn across the floor, Waluigi is flying in front of the camera, and text such as 'COME AND TRY OUR ALL-NEW BLENDER' and 'omg! it's the brandenburg er tor!' is displayed",
            link: "//files.denizk0461.dev/",
        },
    ];
</script>

<svelte:head>
    <title>denizk0461's website</title> 
    <meta name="description" content="I'm a developer posting about my gamedev, programming, electronics, and sometimes music projects!">
</svelte:head>

{#snippet changelogEntry({ entry }: { entry: ChangelogEntry })}
    <div class="changelog-entry">    
        <span class="changelog-entry-timestamp">{entry.date}, {entry.time} ::</span>
        <p>
            {entry.content}
            {#if entry.link}
                <a class="changelog-entry-link" href="{entry.link}">»</a>
            {/if}
        </p>
    </div>
{/snippet}

<Content>
    <h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>

    <hr>

    <div>
        <img class="me-img pixelated-img" src="me.webp" alt="Pixelated mirror selfie of the website creator wearing a green shirt, fitting the website theme. The face is obscured." title="hi.">
        <p>Hi! I'm Deniz (he/him/they). I'm a hobbyist programmer based in 🇩🇪 Northern Germany who does coding, 3D modelling, and sometimes music too. I am also studying to become a secondary school teacher. Welcome to my webpage!</p>
        <p>Here I publish my projects in programming, electronics (Arduino, Raspberry Pi etc.), and gamedev specifically, but I also set up a blog to talk about random things on my mind. Feel free to explore.</p>
        <p>This place is a constant work-in-progress – while I try to keep URLs intact, a lot of stuff is being modified and moved around! If anything's <a href="/blog/2026/0131">broken</a>, please do let me know.</p>
    </div>

    <div class="changelog-container">
        <h6 class="changelog-header">website changelog <span class="small-supertext">(new!)</span></h6>
        {#each changelogEntriesTrimmed as entry}
            {@render changelogEntry({entry})}
        {/each}
    </div>

    <div class="webring-container">
        <GamedevWebring />
    </div>

    <Gallery entries={galleryEntries} />
</Content>

<style>
    .me-img {
        width: 110px;
        min-width: 110px;
        float: left;
        margin-right: 12px;
    }

    .changelog-container {
        padding: 8px 24px;
        border: 2px var(--color-highlight) dashed;
    }
    
    .changelog-header {
        margin-top: 8px;
    }

    .changelog-entry * {
        margin: 0;
    }

    .changelog-entry {
        display: flex;
        flex-direction: row;
        gap: 8px;
        margin: 4px 0;
    }

    .changelog-entry-timestamp {
        font-family: var(--font-mono);
        font-size: 0.9rem;
        color: var(--color-highlight);
        min-width: fit-content;
    }

    .changelog-entry-link {
        font-family: var(--font-mono);
        font-size: 1.3rem;
        color: var(--color-highlight);
        text-decoration: none;
        line-height: 1rem;
    }

    .changelog-entry-link:hover {
        font-weight: 700;
    }

    .webring-container {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .gradient-title {
        background: linear-gradient(
            90deg,
            var(--color-highlight) 30%,
            var(--color-highlight-alt) 90%
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-bottom: 12px;
    }
</style>