<script lang="ts">
    import Content from "$lib/viewport/content.svelte";
    import Webring from "$lib/components/ring.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 updateEntries } from "./meta/updates/updates";
    import UpdateEntry from "$lib/components/update-entry.svelte";

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

    let updateEntriesTrimmed = updateEntries.slice(0, 3);

    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: "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",
        },
    ];

    const galleryBottomRow: GalleryRowEntry[] = [
        {
            title: "Projects",
            description: "An overview of what I do and have done",
            img: "projects/banner.webp",
            altText: "An upside-down New 3DS XL lying open on a desk with a small USB-C breakout board attached to it, and a USB-C cable plugged in. The 3DS is glowing to indicate that it is charging.",
            link: "projects",
        },
        {
            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: "https://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: "https://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="update-container">
        <a class="update-header-link" href="/meta/updates"><h6 class="update-header">website updates <span class="small-supertext">(new!)</span></h6></a>
        {#each updateEntriesTrimmed as entry}
            <UpdateEntry {entry} />
        {/each}
    </div>

    <div class="webring-container">
        <!-- bucket webring -->
        <Webring
            ringName="bucket webring"
            ringLink="https://webring.bucketfish.me"
            prevLink="https://webring.bucketfish.me/redirect.html?to=prev&name=denizk0461"
            nextLink="https://webring.bucketfish.me/redirect.html?to=next&name=denizk0461"
            randLink="https://webring.bucketfish.me/redirect.html?to=random&name=denizk0461"
            prevSymbol="⥼"
            nextSymbol="⥽"
            highlightEmojiLeft="🏳️‍🌈" />
        
        <!-- gamedev webring -->
        <Webring
            ringName="gamedev webring"
            ringLink="https://www.rainbowcemetery.com/devring"
            prevLink="https://www.rainbowcemetery.com/devring/prev.php?id=18"
            nextLink="https://www.rainbowcemetery.com/devring/next.php?id=18"
            randLink="https://www.rainbowcemetery.com/devring/rand.php?id=18"
            listLink="https://www.rainbowcemetery.com/devring/list.php?id=18"
            prevSymbol="&lt;"
            nextSymbol="&gt;"
            highlightEmojiLeft="👾"
            highlightEmojiRight="🎮" />
        
        <!-- no ai webring -->
        <Webring
            ringName="no ai webring"
            ringLink="https://baccyflap.com/noai"
            prevLink="https://baccyflap.com/noai/?prv&s=dzk"
            nextLink="https://baccyflap.com/noai/?nxt&s=dzk"
            randLink="https://baccyflap.com/noai/?rnd"
            prevSymbol="&lt;"
            nextSymbol="&gt;"
            highlightEmojiLeft="🚫"
            highlightEmojiRight="🤖" />
    </div>

    <GalleryRow entries={galleryTopRow} />
    <GalleryRow entries={galleryBottomRow} />
</Content>

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

    .update-container {
        padding: 8px 24px;
        border: var(--border-dash-size) var(--color-highlight) dashed;
        backdrop-filter: blur(var(--blur-radius-background));
    }

    .update-header-link {
        text-decoration: none;
    }
    .update-header-link:hover {
        text-decoration: underline dashed var(--border-dash-size) var(--color-highlight);
    }
    
    .update-header {
        margin-top: 8px;
    }

    .webring-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 16px 0;
        flex-wrap: wrap;
        gap: 8px;
    }

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