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 GalleryRow, { type GalleryRowEntry } from "$lib/lists/gallery-row.svelte";

    import { posts as devlogPosts } from "./projects/projectn5/devlog/posts";
    import { posts as blogPosts } from "./blog/posts";
    import { entries as changelogEntries } from "./changelog/changelog";
    import ChangelogEntry from "$lib/components/changelog-entry.svelte";

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

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

    const galleryTopRow: GalleryRowEntry[] = [
        {
            title: "Project N5 – devlog",
            description: `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",
            altText: "Project N5 screenshot of Laura looking down at two cuboids.",
            link: "projects/projectn5",
        },
        {
            title: "Projects",
            description: "An overview of what I do and have done",
            img: "main/3ds.webp",
            altText: "An upside-down New 3DS XL lying open on a desk. A small USB-C breakout board is attached to the 3DS, and a USB-C cable is plugged in. The 3DS is glowing to indicate that it is charging.",
            link: "projects",
        },
    ];

    const galleryBottomRow: GalleryRowEntry[] = [
        {
            title: "Blog",
            description: `A place where I write about random things. <i>latest post: ${latestBlogDate}</i>`,
            img: "blog/robert.webp",
            altText: "View at a tram bridge rising and then curving to the left.",
            link: "blog",
        },
        {
            title: "Files",
            description: "Find things I've put for download on my Copyparty instance",
            img: "main/hypertext.webp",
            altText: "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/",
        },
        {
            title: "Gitea",
            description: "I now also self-host a Gitea instance where I am likely migrating all my projects to",
            img: "main/magic.webp",
            altText: "A 'magic' command written in Java. The command shuts down the computer when ran.",
            link: "//code.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>

<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! I'm also adding new things and seeing which things I enjoy maintaining. If anything's outright <a href="/blog/2026/0131">broken</a>, please do let me know.</p>
    </div>

    <div class="changelog-container">
        <a class="changelog-header-link" href="/changelog"><h6 class="changelog-header">website changelog <span class="small-supertext">(new!)</span></h6></a>
        {#each changelogEntriesTrimmed as entry}
            <ChangelogEntry {entry} />
        {/each}
    </div>

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

    <GalleryRow entries={galleryTopRow} />
    <GalleryRow entries={galleryBottomRow} />
</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-link {
        text-decoration: none;
    }
    .changelog-header-link:hover {
        text-decoration: underline dashed 2px var(--color-highlight);
    }
    
    .changelog-header {
        margin-top: 8px;
    }

    .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>