Add anime, shows and movies to about page

src/routes/about/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
 	import { about, profile } from '#lib/content';
 	import PageHeader from '#lib/components/ui/PageHeader.svelte';
 	import ProfileIntro from '#lib/components/ui/ProfileIntro.svelte';
@@ -7,21 +6,31 @@
 	import Section from '#lib/components/ui/Section.svelte';
 	import Panel from '#lib/components/ui/Panel.svelte';
 	import LinkButton from '#lib/components/ui/LinkButton.svelte';
+	import AnimeSection from '#lib/components/about/AnimeSection.svelte';
+	import MediaCard from '#lib/components/about/MediaCard.svelte';
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
 
 	const byRating = (first: { rating: number }, second: { rating: number }) => second.rating - first.rating;
 	const shows = [...about.shows].sort(byRating);
 	const movies = [...about.movies].sort(byRating);
+	const mediaGroups = [
+		{ id: 'shows', title: 'TV Shows', items: shows, kind: 'show' as const },
+		{ id: 'movies', title: 'Movies', items: movies, kind: 'movie' as const }
+	];
 
-	const sections = [
+	const sections = $derived([
 		{ id: 'hobbies', label: 'Hobbies', color: 'blue' },
 		{ id: 'games', label: 'Games', color: 'orange' },
 		{ id: 'shows', label: 'Shows', color: 'yellow' },
-		{ id: 'movies', label: 'Movies', color: 'green' }
-	];
+		{ id: 'movies', label: 'Movies', color: 'green' },
+		...(data.anime ? [{ id: 'anime', label: 'Anime', color: 'magenta' }] : [])
+	]);
 </script>
 
 <div class="page">
-	<PageHeader command="cat ~/about.md" title="About" subtitle="About {profile.displayName}: hobbies, games, shows and movies." />
+	<PageHeader command="cat ~/about.md" title="About" />
 
 	<ProfileIntro heading={profile.displayName} subheading={profile.title} text={profile.bio} />
 	<SectionNav {sections} />
@@ -37,7 +46,7 @@
 	</Section>
 
 	<Section title="Games" id="games">
-		<div class="card-grid">
+		<div class="card-grid" data-image-group>
 			{#each about.games as game (game.name)}
 				<Panel title={game.name}>
 					<img class="game-image" src={game.image} alt={game.name} loading="lazy" />
@@ -47,20 +56,21 @@
 		</div>
 	</Section>
 
-	{#each [{ id: 'shows', title: 'TV Shows', items: shows }, { id: 'movies', title: 'Movies', items: movies }] as group (group.id)}
+	{#each mediaGroups as group (group.id)}
 		<Section title={group.title} id={group.id}>
-			<div class="card-grid">
+			<div class="media-grid">
 				{#each group.items as item (item.name)}
-					<Panel title={item.name} href={item.url}>
-						<div class="rating">
-							<Icon icon="mdi:star" width="16" />
-							<span>{item.rating}/10</span>
-						</div>
-					</Panel>
+					<MediaCard {item} details={data.mediaDetails[item.url]} kind={group.kind} />
 				{/each}
 			</div>
 		</Section>
 	{/each}
+
+	{#if data.anime}
+		<Section title="Anime" id="anime">
+			<AnimeSection anime={data.anime} />
+		</Section>
+	{/if}
 </div>
 
 <style>
@@ -68,16 +78,21 @@
 		margin: 0;
 	}
 
+	.media-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+		gap: 1rem 0.85rem;
+	}
+
+	@container (max-width: 520px) {
+		.media-grid {
+			grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+		}
+	}
+
 	.game-image {
 		width: 100%;
 		aspect-ratio: 16 / 9;
 		object-fit: cover;
 	}
-
-	.rating {
-		display: flex;
-		align-items: center;
-		gap: 0.35rem;
-		color: var(--yellow);
-	}
 </style>