pages/src/routes/projects/+page.svelte

<script lang="ts">
    import Banner2 from "$lib/banner2.svelte";
    import TableOfContents from "$lib/components/table-of-contents.svelte";
    import { type Project, games, hardware, apps, music, getStatusText, getStatusCode } from './projects';
    import LinkList from "$lib/lists/link-list.svelte";
    import Content from "$lib/viewport/content.svelte";
</script>

<svelte:head>
    <title>Projects | denizk0461</title> 
</svelte:head>

<Content>
    <Banner2
        title="My Disordered Projects"
        banner="/projects/banner.webp"
        bannerAlt="An upside-down New 3DS XL lying open on a desk with a small USB-C breakout board attached to it, and a USB-C cable plugged in. The 3DS is glowing to indicate that it is charging."
        subtitle="Things I have worked on" />

    <TableOfContents />

    <h2 id="games">Games</h2>
    {#each games as project}
        {@render projectSummary({ project: project })}
    {/each}
    
    <h2 id="hardware">Hardware</h2>
    {#each hardware as project}
        {@render projectSummary({ project: project })}
    {/each}

    <h2 id="apps">Apps</h2>
    {#each apps as project}
        {@render projectSummary({ project: project })}
    {/each}

    <h2 id="music">Music</h2>

    <p>I made a lot of music in the past; over a hundred songs in total. There's at least a small story behind pretty much every one of them here, and I am chronicling my memories on a subpage.</p>

    <p>You can find this <a href="my-tracks">here</a>, if you're interested.</p>

    {#each music as project}
        {@render projectSummary({ project: project })}
    {/each}
</Content>

{#snippet projectSummary({
    project
}: {
    project: Project;
})}
    <h3 id="{project.id}">{project.title}</h3>
    {#if project.subtitle}
        <p class="project-subtitle">[ {project.subtitle} ]</p>
    {/if}
    {#if project.banner}
        <div class="project-banner-container">
            <img class="project-banner" src="{project.banner}" alt="Overview banner for {project.title}">
        </div>
    {/if}

    <p class="project-info project-status-c-{getStatusCode(project)}">
        {#if project.date}
            {project.date} | 
        {/if}
        {getStatusText(project)}
    </p>

    {#if project.icon}
        <img class="project-icon" src="{project.icon}" alt="Icon for {project.title}">
    {/if}
    {#each project.paragraphs as paragraph}
        <p>{@html paragraph}</p>
    {/each}
    <LinkList entries={project.links} />
{/snippet}

<style>
    .project-subtitle {
        font-family: var(--font-mono);
        font-size: 1.0rem;
        margin-top: 0;
    }

    .project-banner-container {
        position: relative;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    
    .project-banner {
        margin: 0; /* reset left/right margins */
        width: 100%;
        max-height: 300px;
    }

    .project-icon {
        float: left;
        margin: 16px 16px 16px 0;
        width: 20%;
    }

    .project-date-embed {
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .project-info {
        width: fit-content;
        display: flex;
        flex-direction: row;
        margin-top: 16px;
        background-color: color-mix(in srgb, var(--color-status) 6%, transparent);
        border: var(--border-style) var(--border-dash-size) var(--color-status);
        padding: 2px 8px;

        font-family: var(--font-mono);
        font-size: 1.0rem;
        font-weight: 700;
        color: var(--color-status);
    }

    /* #region Project Status Colours */
    .project-status-c-act {
        --color-status: var(--color-highlight);
    }

    .project-status-c-ina {
        --color-status: #B89751;
    }

    .project-status-c-aba {
        --color-status: #D15555;
    }

    .project-status-c-fin {
        --color-status: #5486D8;
    }

    .project-status-c-eol {
        --color-status: #C353C1;
    }
    /* #endregion */
</style>