pages/src/routes/+page.svelte

<script lang="ts">
    import Content from "$lib/content.svelte";
    import GamedevWebring from "$lib/webrings/gamedev.svelte";
    import Gallery from "$lib/lists/gallery-entry.svelte";
    import LinkList from "$lib/link-list.svelte";

    import type { DevlogPost } from "$lib/devlog-posts";
    import { posts } from "$lib/devlog-posts";

    var lastIndex = -1;
    let meImg: string = "common/me/a.webp";

    $: setPicture();

    function getRandom(to: number): number {
        var buf = new Uint8Array(1);
        crypto.getRandomValues(buf);
        if (buf[0] % to == lastIndex) {
            return getRandom(to);
        }
        lastIndex = buf[0] % to;
        return buf[0] % to;
    }
    let setPicture = function() {
        var pictures = ["a", "b", "c", "e", "f"];
        var selectedPicture = pictures[getRandom(pictures.length)];
        meImg = "common/me/" + selectedPicture + ".webp";
    };

    let latestDevlogDate = posts[0].date.substring(0, 7).replace("/", "-") + "-" + posts[0].date.substring(7);
</script>

<svelte:head>
    <title>denizk0461's website</title> 
</svelte:head>

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

    <div class="container">
        <div class="subcontainer">
            <Gallery entries={[
                {
                    title: "Project N5 – devlog",
                    subtitle: "my active Godot game project about finding yourself in an unfamiliar future.\n<i>latest update: " + latestDevlogDate + "</i>",
                    fullWidth: true,
                    img: "projects/projectn5/devlog/2025/0523/birds_eye.webp",
                    link: "projects/projectn5/devlog",
                },
                {
                    title: "Projects",
                    subtitle: "an overview of what I do and have done",
                    fullWidth: false,
                    img: "projects/project-mix.webp",
                    link: "projects",
                },
                {
                    title: "Games",
                    subtitle: "some small games I've made that are available online",
                    fullWidth: false,
                    img: "common/hypertext.webp",
                    link: "games",
                },
            ]}/>
        </div>
        <div class="subcontainer">
            <h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} alt="A mini picture of me">↫ me </h3>

            <p>Hi! I'm Deniz. I'm a programmer, sometimes a music producer, and rarely a hard-working student in Northern Germany. Welcome to my webpage!</p>

            <p>Here you can find information on things I like sharing. check out my projects, especially the devlog of the game I'm working on!</p>

            <h3>where to find me</h3>

            <LinkList entries={[
                {
                    icon: "icons/bluesky.svg",
                    text: "Bluesky",
                    link: "https://bsky.app/profile/denizk0461.dev",
                },
                {
                    icon: "icons/codeberg.svg",
                    text: "Codeberg",
                    link: "https://codeberg.org/denizk0461",
                },
                {
                    icon: "icons/github.svg",
                    text: "GitHub",
                    link: "https://github.com/denizk0461",
                },
            ]}/>

            <GamedevWebring />
        </div>
    </div>
</Content>

<style>
    .container {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .subcontainer {
        max-width: 50%;
    }
    .subcontainer:last-child {
        margin-left: 16px;
    }
    .me-img {
        width: 32px;
        display: inline-block;
    }

    .gradient-title {
        background: -webkit-linear-gradient(0deg, #96C9DC, #9CE391, #E03E59);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-bottom: 12px;
    }
</style>