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 } 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>
    {#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}">
            {#if project.date}
                <p class="date-marker project-date-embed">{project.date}</p>
            {/if}
        </div>
    {:else}
        {#if project.date}
            <p class="date-marker">{project.date}</p>
        {/if}
    {/if}
    {#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;
    }
</style>