pages/src/routes/+page.svelte

<script lang="ts">
    import { onMount } from "svelte";
    import Content from "$lib/viewport/content.svelte";
    import GamedevWebring from "$lib/webrings/gamedev.svelte";
    import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
    import LinkList from "$lib/lists/link-list.svelte";

    import { posts as devlogPosts } from "./projects/projectn5/devlog/posts";
    import { posts as blogPosts } from "./blog/posts";

    let meImg: string = $state("common/me/a.webp");

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

    const galleryEntries: GalleryEntry[] = [
        {
            title: "Project N5 – devlog",
            subtitle: `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",
            imgAlt: "Project N5 screenshot of Laura looking down at two cuboids",
            link: "projects/projectn5",
        },
        {
            title: "Projects",
            subtitle: "an overview of what I do and have done",
            img: "projects/project-mix.webp",
            imgAlt: "A collage of multiple projects: the Unity default third-person character and CJ from GTA San Andreas in the top left; purple protagonist from Project N5 holding a massive rocket launcher in the top right; two wizards in the bottom left; a breadboard with a microcontroller and input components in the bottom right",
            link: "projects",
        },
        {
            title: "Blog",
            subtitle: `A place where I write about random things. <i>latest post: ${latestBlogDate}</i>`,
            img: "blog/robert.webp",
            imgAlt: "View at a tram bridge rising and then curving to the left.",
            link: "blog",
        },
        {
            title: "Files",
            subtitle: "find things I've put for download on my copyparty instance",
            img: "common/hypertext.webp",
            imgAlt: "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: "//files.denizk0461.dev/",
        },
    ];

    onMount(() => {
        setPicture();
    });

    function getRandom(max: number): number {
        return Math.floor(Math.random() * max);
    }

    let setPicture = function() {
        var pictures = ["a", "b", "c", "e"];
        var selectedPicture = pictures[getRandom(pictures.length)];
        meImg = "common/me/" + selectedPicture + ".webp";
    };
</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>

    <h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} alt="Deniz, the website developer, small and pixelated">↫ me </h3>

    <p>Hi! I'm Deniz. I'm a programmer, sometimes a music producer, and student from Northern Germany. Welcome to my webpage! I mainly share my projects here. Check them out – the devlog of the game I'm working on especially!</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 />

    <Gallery entries={galleryEntries} />
</Content>

<style>
    .me-img {
        width: 32px;
        display: inline-block;
    }

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