pages/src/routes/+page.svelte

<script lang="ts">
    import { onMount } from "svelte";
    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 { quotes, type Quote } from "./quotes";

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

    let meImg: string = $state("common/me/a.webp");
    let marqueeQuote: Quote = $state({
        author: "",
        content: "",
        source: "",
    });

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

    let latestDevlogDate = posts.values().next().value?.date ?? "could not fetch";
</script>

<svelte:head>
    <title>denizk0461's website</title> 
    <meta name="description" content="German developer posting about gamedev, programming, electronics projects, and sometimes music too.">
</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",
                    imgAlt: "Project N5 screenshot of Laura looking down at two cuboids",
                    link: "projects/projectn5/devlog",
                },
                {
                    title: "Projects",
                    subtitle: "an overview of what I do and have done",
                    fullWidth: false,
                    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 <a href='https://github.com/9001/copyparty'>copyparty</a> instance",
                    fullWidth: false,
                    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/",
                },
            ]}/>
        </div>
        <div class="subcontainer">
            <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!</p>

            <p>I share my projects on this website. 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 />
        </div>
    </div>
</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>
    .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;
    }

    .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% );
        }
    }

    @media screen and (max-width: 800px) {
        .container {
            flex-direction: column-reverse;
        }
        
        .subcontainer {
            max-width: 100%;
        }

        .subcontainer:last-child {
            margin-left: 0px;
        }
    }
</style>