pages/src/routes/about/music/+page.svelte

<script lang="ts">
    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
    import Content from "$lib/content.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import LinkList, { type LinkEntry } from "$lib/link-list.svelte";

    interface AlbumEntry {
        artist: string;
        title: string;
        year: number;
        img: string;
        description: string[];
    };

    const albums: AlbumEntry[] = [
        {
            artist: "acloudyskye",
            title: "What Do You Want!",
            year: 2022,
            img: "acloudyskye_02_wdyw.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "acloudyskye",
            title: "There Must Be Something Here",
            year: 2024,
            img: "acloudyskye_03_tmbsh.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "acloudyskye",
            title: "This Won't Be The Last Time",
            year: 2025,
            img: "acloudyskye_04_twbtlt.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Avicii",
            title: "True",
            year: 2013,
            img: "avicii_01_true.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Avicii",
            title: "True (Avicii by Avicii)",
            year: 2014,
            img: "avicii_02_trueaba.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Avicii",
            title: "Avīci (01)",
            year: 2017,
            img: "avicii_04_avici01.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Ben Böhmer",
            title: "Breathing",
            year: 2019,
            img: "benboehmer_01_breathing.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "bitbird artists",
            title: "create together vol. 3",
            year: 2022,
            img: "bitbird_ct3.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "bitbird artists",
            title: "Gouldian Finch 4",
            year: 2021,
            img: "bitbird_gf4.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "brakence",
            title: "hypochondriac",
            year: 2022,
            img: "brakence_04_hypochondriac.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Duskus",
            title: "Healers Vol. 1",
            year: 2023,
            img: "duskus_02_healersvol1.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "FROMTHEHEART",
            title: '"things happen, it\'s ok!"',
            year: 2020,
            img: "fromtheheart_thiok.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "gabby start",
            title: "alex",
            year: 2022,
            img: "gabbystart_02_alex.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "ILLENIUM",
            title: "Ashes",
            year: 2016,
            img: "illenium_01_ashes.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "ILLENIUM",
            title: "Awake",
            year: 2017,
            img: "illenium_02_awake.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "ILLENIUM",
            title: "ASCEND",
            year: 2019,
            img: "illenium_03_ascend.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Jane Remover",
            title: "Teen Week",
            year: 2021,
            img: "janeremover_01_teenweek.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Jane Remover",
            title: "Frailty",
            year: 2021,
            img: "janeremover_02_frailty.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Jane Remover",
            title: "Census Designated",
            year: 2023,
            img: "janeremover_03_censusdesignated.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Jane Remover",
            title: "Revengeseekerz",
            year: 2025,
            img: "janeremover_04_revengeseekerz.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Jaron",
            title: "it's hard to see color [When You're So Impossibly Far Away*]",
            year: 2022,
            img: "jaron_02_ihtsc.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Jaron",
            title: "LIGHTYEARS",
            year: 2024,
            img: "jaron_03_lightyears.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Kasbo",
            title: "Places We Don't Know",
            year: 2018,
            img: "kasbo_01_pwdk.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Kasbo",
            title: "The Making of a Paracosm",
            year: 2020,
            img: "kasbo_02_tmoap.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Kaskade",
            title: "Kaskade Christmas Deluxe",
            year: 2018,
            img: "kaskade_christmas.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "kmoe",
            title: "K1",
            year: 2025,
            img: "kmoe_01_k1.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Knapsack",
            title: "futura",
            year: 2018,
            img: "knapsack_02_futura.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
        {
            artist: "Knapsack",
            title: "Stem",
            year: 2025,
            img: "knapsack_04_stem.webp",
            description: [
                "test 1",
                "test 2",
                "test 3",
            ],
        },
    ];
</script>

<svelte:head>
    <title>My Liked Music | denizk0461</title>
</svelte:head>

<BannerTitleAlt
    title="My Liked Music"
    banner="/common/me/.webp"
    subtitle="A look into my music taste"
/>

<Content>
    <div class="album-button-container">
        {#each albums as album}
        {@render albumButton({ album })}
        {/each}
    </div>
</Content>

{#snippet albumButton({
    album
}: {
    album: AlbumEntry;
})}
    <div class="album-button">
        <input
            class="album-button-img"
            type="image"
            src="{album.img}"
            alt="Album art for {album.artist} – {album.title}" />
    </div>
{/snippet}

<style>
    .album-button-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .album-button {
        width: calc(100%/8);
        line-height: 0;
    }

    .album-button-img {
        width: 100%;
        padding: 2px;
        box-sizing: border-box;
    }
</style>