pages/src/routes/+page.svelte

<script lang="ts">
    import Content from "$lib/viewport/content.svelte";
    import SubtitledImage from "$lib/components/subtitled-image.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, 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: "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. Welcome to my website! I keep rewriting this introduction but I'm REALLY bad at this type of stuff.</p>
        <p>I made this website because I really don't like modern social media and I wanted a more creative way of expressing myself without giving in to the attention economy or submitting all my data including my soul to some megacorp. That's why you'll find a bunch of stuff here that interests me: programming, gamedev, 3D modelling, electronic music, drawing, electronics and microcontroller programming, Linux and self-hosting, and probably some other stuff too. I am currently developing at least one game and I am also posting random things on my blog, both of which you can find linked above and below.</p>
        <p>I listen to A LOT of music (fav artists: <a href="https://acloudyskye.bandcamp.com/">acloudyskye</a>, <a href="https://jaronsteele.bandcamp.com/">Jaron</a>, <a href="https://janeremover.bandcamp.com/">Jane Remover</a>) and I enjoy dabbling around in <a href="https://godotengine.org/">Godot</a> and <a href="https://blender.org/">Blender</a>. I also use <a href="https://fedoraproject.org/">Fedora KDE</a>... btw. Want to know more about me and this website? Firstly, <i>why?</i> But also, <a href="/meta/about">here</a>!</p>
        <p>irl I am from 🇩🇪 Northern Germany and studying to become a secondary school teacher.</p>
    </div>

    <div class="split-container">
        <div class="info-container">
            <h4 class="update-header">heads-up</h4>
            <p>This website works best on Firefox and other Gecko-based browsers! All pages <i>should</i> be responsive and work on mobile.</p>
            <p>Also, this place is a constant work-in-progress and things may move around. If anything's outright <a href="/blog/2026/0131">broken</a> though, please do let me know.</p>
        </div>
        <div class="update-container">
            <a class="update-header-link" href="/meta/updates"><h4 class="update-header">website updates <span class="small-supertext">(new!)</span></h4></a>
            {#each updateEntriesTrimmed as entry}
                <UpdateEntry {entry} />
            {/each}
        </div>
    </div>

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

    <hr>

    <div class="webring-container">
        <div class="webring">
            <iframe title="bucket webring" id="bucket-webring" style="width: 100%; height: 3rem; border: none;" src="https://webring.bucketfish.me/embed.html?name=denizk0461"></iframe>
        </div>

        <div class="webring">
            <a href="https://www.rainbowcemetery.com/devring/prev.php?id=18">
                <img src="/webrings/gamedev/ringprev.png" alt="previous">
            </a>
            <a href="https://www.rainbowcemetery.com/devring/list.php?id=18">
                <img src="/webrings/gamedev/88x31.png" alt="list">
            </a>
            <a href="https://www.rainbowcemetery.com/devring/next.php?id=18">
                <img src="/webrings/gamedev/ringnext.png" alt="next">
            </a>
        </div>

        <map name="w95widget">
            <area href="https://baccyflap.com/noai" target="_blank" shape="rect" coords="0,0,308,22" alt="no ai webring" title="no ai webring">
            <area href="https://baccyflap.com/noai/?prv&s=dzk" target="_top" shape="rect" coords="56,36,130,58" alt="previous" title="previous">
            <area href="https://baccyflap.com/noai/?rnd" target="_top" shape="rect" coords="137,36,211,58" alt="random" title="random">
            <area href="https://baccyflap.com/noai/?nxt&s=dzk" target="_top" shape="rect" coords="218,36,292,58" alt="next" title="next">
        </map>
        <img class="webring-img" usemap="#w95widget" src="/webrings/noai/w95widget.webp" alt="a gray Windows 95 style dialog box titled 'The No AI Webring' with a little icon showing a computer chip in a rubbish bin. beside it are three clickable buttons, labeled Previous, Random... and Next">
    </div>

</Content>

<style>
    .split-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 16px;
        margin-bottom: 16px;
    }

    @media screen and (max-width: 900px) {
        .split-container {
            flex-direction: column;
            gap: 8px;
        }
    }

    .webring {
        display: flex;
        flex-direction: row;
        margin-left: auto;
        margin-right: auto;
    }

    .webring-img {
        width: initial;
    }

    .me-img {
        width: 132px;
        min-width: 132px;
        float: left;
        margin-right: 12px;
    }

    .update-container, .info-container {
        padding: 8px 24px;
        backdrop-filter: blur(var(--blur-radius-background));
        flex: 2;
    }

    .update-container {
        border: var(--border-dash-size) var(--color-highlight) var(--border-style);
    }

    .info-container {
        border: var(--border-dash-size) var(--color-highlight-alt) var(--border-style);
        flex: 1;
    }
    .info-container > h4 {
        color: var(--color-highlight-alt);
    }
    .info-container p, .info-container a {
        font-size: 1.0rem;
        line-height: 1.4rem;
    }

    .webring-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        /* flex-wrap: wrap; */
        /* gap: 8px; */
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .update-header-link {
        text-decoration: none;
    }
    .update-header-link:hover {
        text-decoration: underline var(--border-style) var(--border-dash-size) var(--color-highlight);
    }
    
    .update-header {
        margin-top: 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>