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 { quotes, type Quote } from "./quotes";

    import { posts } from "./projects/projectn5/devlog/posts";

    let meImg: string = $state("common/me/a.webp");
    let marqueeQuote: Quote = $state({
        author: "",
        content: "",
        source: "",
    });
    let latestDevlogDate = posts.values().next().value?.date ?? "could not fetch";

    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: "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();
        setMarqueeText();
    });

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

    let setMarqueeText = function() {
        marqueeQuote = quotes[getRandom(quotes.length)];
    };
</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 class="quote-marquee-container">
        {@render marqueeContent({quote: marqueeQuote, ignoreA11y: false})}
        {@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
        {@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
    </div> -->

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

{#snippet marqueeContent({quote, ignoreA11y}: {quote: Quote, ignoreA11y: boolean})}
    <span class="quote-marquee" aria-hidden="{ignoreA11y}"><i>{quote.content}</i> – {quote.author} [{quote.source}] ***</span>
{/snippet}

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

    .quote-marquee-container {
        width: 100%;
        background-color: var(--color-background-highlight);
        display: flex;
        overflow: hidden;
        white-space: nowrap;
    }

    .quote-marquee {
        animation: marquee-content 10s linear infinite;
        font-family: 'Space Mono';
        font-size: 1rem;
        font-weight: 600;
        padding: 6px 6px;
    }

    .quote-marquee-container:hover .quote-marquee {
        animation-play-state: paused;
    }

    @keyframes marquee-content {
        /* Element one fully ON screen at left-edge of container. */
        from {
            transform: translateX( 0% );
        }
        /* Element one fully OFF screen (just beyond left-ledge of container). */
        to {
            transform: translateX( -100% );
        }
    }
</style>