114 lines
3.4 KiB
Svelte
114 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { about, books, profile } from '#lib/content';
|
|
import PageHeader from '#lib/components/ui/PageHeader.svelte';
|
|
import ProfileIntro from '#lib/components/ui/ProfileIntro.svelte';
|
|
import SectionNav from '#lib/components/ui/SectionNav.svelte';
|
|
import Section from '#lib/components/ui/Section.svelte';
|
|
import Panel from '#lib/components/ui/Panel.svelte';
|
|
import AniListSection from '#lib/components/about/AniListSection.svelte';
|
|
import MediaSection from '#lib/components/about/media/MediaSection.svelte';
|
|
import GameCard from '#lib/components/about/GameCard.svelte';
|
|
import BooksSection from '#lib/components/about/books/BooksSection.svelte';
|
|
import SetupSection from '#lib/components/about/setup/SetupSection.svelte';
|
|
import ListeningSection from '#lib/components/about/listening/ListeningSection.svelte';
|
|
import type { PageProps } from './$types';
|
|
|
|
let { data }: PageProps = $props();
|
|
|
|
const mediaGroups = [
|
|
{ id: 'shows', title: 'TV Shows', items: about.shows, kind: 'show' as const },
|
|
{ id: 'movies', title: 'Movies', items: about.movies, kind: 'movie' as const }
|
|
];
|
|
|
|
const sections = $derived([
|
|
{ id: 'hobbies', label: 'Hobbies', color: 'blue' },
|
|
...(about.setup ? [{ id: 'setup', label: 'Setup', color: 'cyan' }] : []),
|
|
{ id: 'games', label: 'Games', color: 'orange' },
|
|
{ id: 'shows', label: 'Shows', color: 'yellow' },
|
|
{ id: 'movies', label: 'Movies', color: 'green' },
|
|
...(books.length ? [{ id: 'books', label: 'Books', color: 'cyan' }] : []),
|
|
...(data.listening ? [{ id: 'music', label: 'Music', color: 'red' }] : []),
|
|
...(data.anime ? [{ id: 'anime', label: 'Anime', color: 'magenta' }] : []),
|
|
...(data.manga ? [{ id: 'manga', label: 'Manga', color: 'blue' }] : [])
|
|
]);
|
|
</script>
|
|
|
|
<div class="page">
|
|
<PageHeader command="cat ~/about.md" title="About" />
|
|
|
|
<ProfileIntro heading={profile.displayName} subheading={profile.title} text={profile.bio} />
|
|
<SectionNav {sections} />
|
|
|
|
<Section title="Hobbies" id="hobbies">
|
|
<div class="card-grid">
|
|
{#each about.hobbies as hobby (hobby.name)}
|
|
<Panel title={hobby.name} icon={hobby.icon}>
|
|
<p class="muted">{hobby.description}</p>
|
|
</Panel>
|
|
{/each}
|
|
</div>
|
|
</Section>
|
|
|
|
{#if about.setup}
|
|
<Section title="Setup" id="setup">
|
|
<SetupSection setup={about.setup} />
|
|
</Section>
|
|
{/if}
|
|
|
|
<Section title="Games" id="games">
|
|
<div class="game-grid">
|
|
{#each about.games as game (game.name)}
|
|
<GameCard {game} />
|
|
{/each}
|
|
</div>
|
|
</Section>
|
|
|
|
{#each mediaGroups as group (group.id)}
|
|
<Section title={group.title} id={group.id}>
|
|
<MediaSection items={group.items} mediaDetails={data.mediaDetails} kind={group.kind} />
|
|
</Section>
|
|
{/each}
|
|
|
|
{#if books.length}
|
|
<Section title="Books" id="books">
|
|
<BooksSection {books} />
|
|
</Section>
|
|
{/if}
|
|
|
|
{#if data.listening}
|
|
<Section title="Music" id="music">
|
|
<ListeningSection listening={data.listening} />
|
|
</Section>
|
|
{/if}
|
|
|
|
{#if data.anime}
|
|
<Section title="Anime" id="anime">
|
|
<AniListSection profile={data.anime} />
|
|
</Section>
|
|
{/if}
|
|
|
|
{#if data.manga}
|
|
<Section title="Manga" id="manga">
|
|
<AniListSection profile={data.manga} />
|
|
</Section>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
.game-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: 1rem 0.85rem;
|
|
}
|
|
|
|
@container (max-width: 520px) {
|
|
.game-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
}
|
|
}
|
|
</style>
|