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: "Homesick – devlog",
            description: `My active Godot game project about finding yourself in an unfamiliar future. <i>latest update: ${latestDevlogDate}</i>`,
            img: "projects/projectn5/banner2.webp",
            altText: "The protagonist Laura standing on a floating platform in the purple test level. Ziplines are all around her and the text 'When this text is spinning, the game is not paused' is frozen in the sky.",
            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 my more technical projects",
            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: "Art",
            description: "My creative side lives here",
            img: "art/banner.webp",
            altText: "A rainbow-like holographic effect produced by bending a reflective sheet of cardboard.",
            link: "art",
        },
        {
            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>