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

<script lang="ts">
    import Banner2 from "$lib/banner2.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import { type Project, projects } 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="Closeup of the purple protagonist from Project N5"
        subtitle="Things I have worked on" />

    <TableOfContents />

    <h2 id="games">Games</h2>
    {#each projects as project}
        {#if project.type == "game"}
            {@render projectSummary({ project: project })}
        {/if}
    {/each}
    <h2 id="hardware">Hardware</h2>
    {#each projects as project}
        {#if project.type == "hardware"}
            {@render projectSummary({ project: project })}
        {/if}
    {/each}
    <h2 id="apps">Apps</h2>
    {#each projects as project}
        {#if project.type == "app"}
            {@render projectSummary({ project: project })}
        {/if}
    {/each}
    <h2 id="music">Music</h2>
    {#each projects as project}
        {#if project.type == "music"}
            {@render projectSummary({ project: project })}
        {/if}
    {/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="project-date project-date-embed">{project.date}</p>
            {/if}
        </div>
    {:else}
        {#if project.date}
            <p class="project-date">{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 {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1rem;
        width: fit-content;
        margin: 0;
        padding: 0;
        
        color: var(--color-text-dark);
        background-color: var(--color-highlight);
        font-family: var(--font-sans-serif);
        padding: 4px;
    }

    .project-date-embed {
        position: absolute;
        left: 0;
        bottom: 0;
    }
</style>