pages/src/routes/+page.svelte

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

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

    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";
    };
</script>

<h1><i>Moin!</i> ~ welcome to my website :)</h1>

<div class="container">
    <div class="subcontainer">
        <Gallery entries={[
            {
                title: "Project N5 – devlog",
                subtitle: "my active game project about a girl finding herself in an unfamiliar future",
                fullWidth: true,
                img: "projects/projectn5/devlog/20250316/fishmonger.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: "idk",
                subtitle: "idk",
                fullWidth: false,
                img: "projects/project-mix.webp",
                link: "",
            },
        ]}/>
    </div>
    <div class="subcontainer">
        <h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} onclick={setPicture}>↫ 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.bsky.social",
            },
            {
                icon: "icons/codeberg.svg",
                text: "Codeberg",
                link: "https://codeberg.org/denizk0461",
            },
            {
                icon: "icons/github.svg",
                text: "GitHub",
                link: "https://github.com/denizk0461",
            },
            {
                icon: "icons/mailboxdotorg.svg",
                text: "E-Mail: denizk0461@mailbox.org",
                link: "",
            },
        ]}/>

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

<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;
    }
</style>