Add anime, shows and movies to about page

.env.example

@@ -1,3 +1,4 @@
 DISCORD_TOKEN=
 DISCORD_USER_ID=
 DISCORD_GUILD_ID=
+OMDB_API_KEY=

content/about.json

@@ -1,4 +1,5 @@
 {
+	"anilistUsername": "SirBlob",
 	"hobbies": [
 		{ "name": "Swimming", "icon": "proicons:person-swim", "description": "I enjoy swimming as a way to relax and stay active. It is my favorite sport." },
 		{ "name": "Baking", "icon": "proicons:cake", "description": "I love baking pastries and experimenting with new dessert recipes." },
@@ -23,6 +24,6 @@
 	],
 	"movies": [
 		{ "name": "Interstellar", "rating": 10, "url": "https://www.imdb.com/title/tt0816692/" },
-		{ "name": "How to Train Your Dragon", "rating": 10, "url": "https://www.imdb.com/title/tt1621800/" }
+		{ "name": "How to Train Your Dragon", "rating": 10, "url": "https://www.imdb.com/title/tt0892769/" }
 	]
 }

src/env.ts

@@ -14,5 +14,9 @@ export const variables = defineEnvVars({
 	DISCORD_GUILD_ID: {
 		schema: optional,
 		description: 'Guild shared by the bot and the user, needed to read presence'
+	},
+	OMDB_API_KEY: {
+		schema: optional,
+		description: 'OMDb API key used to load posters and details for shows and movies'
 	}
 });

src/lib/anime/types.ts

@@ -0,0 +1,31 @@
+export interface AnimeEntry {
+	id: number;
+	title: string;
+	url: string;
+	cover: string;
+	score: number;
+	progress: number;
+	episodes: number | null;
+}
+
+export interface AnimeStats {
+	count: number;
+	episodesWatched: number;
+	daysWatched: number;
+}
+
+export interface AnimeStatusCount {
+	status: string;
+	label: string;
+	count: number;
+}
+
+export interface AnimeProfile {
+	name: string;
+	profileUrl: string;
+	stats: AnimeStats;
+	statusCounts: AnimeStatusCount[];
+	watching: AnimeEntry[];
+	topRated: AnimeEntry[];
+	completedCount: number;
+}

src/lib/components/about/AnimeProfileHeader.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { AnimeProfile } from '#lib/anime/types';
+
+	let { anime }: { anime: AnimeProfile } = $props();
+
+	const hostName = 'anilist';
+
+	const statusColors: Record<string, string> = {
+		COMPLETED: 'green',
+		CURRENT: 'blue',
+		PLANNING: 'magenta',
+		PAUSED: 'yellow',
+		DROPPED: 'red'
+	};
+
+	const shownStatuses = $derived(anime.statusCounts.filter((item) => item.count > 0));
+	const listTotal = $derived(shownStatuses.reduce((total, item) => total + item.count, 0));
+	const rows = $derived([
+		['Anime', `${anime.stats.count}`],
+		['Episodes', `${anime.stats.episodesWatched}`],
+		['Watch time', `${anime.stats.daysWatched} days`]
+	]);
+</script>
+
+<div class="anime-fetch">
+	<a class="heading" href={anime.profileUrl} target="_blank" rel="noopener noreferrer">
+		<span class="user">{anime.name.toLowerCase()}</span><span class="at">@</span><span class="host">{hostName}</span>
+	</a>
+	<div class="separator">{'-'.repeat(anime.name.length + hostName.length + 1)}</div>
+
+	{#each rows as [label, value] (label)}
+		<div class="row"><span class="label">{label}</span>: {value}</div>
+	{/each}
+
+	{#each shownStatuses as item (item.status)}
+		<div class="row">
+			<span class="label">{item.label}</span>: <span style:color="var(--{statusColors[item.status]})">{item.count}</span>
+		</div>
+	{/each}
+
+	{#if listTotal > 0}
+		<div class="breakdown" role="img" aria-label="List breakdown by status">
+			{#each shownStatuses as item (item.status)}
+				<span
+					class="block"
+					style:flex-grow={item.count}
+					style:background="var(--{statusColors[item.status]})"
+					title="{item.label}: {item.count}"
+				></span>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.anime-fetch {
+		line-height: 1.5;
+	}
+
+	.user,
+	.host {
+		color: var(--accent);
+		font-weight: 700;
+	}
+
+	.heading:hover .user,
+	.heading:hover .host {
+		text-decoration: underline;
+	}
+
+	.at,
+	.separator {
+		color: var(--muted);
+	}
+
+	.label {
+		color: var(--blue);
+		font-weight: 700;
+	}
+
+	.breakdown {
+		display: flex;
+		margin-top: 0.75rem;
+	}
+
+	.block {
+		flex-basis: 0;
+		min-width: 0.5rem;
+		height: 1rem;
+	}
+</style>

src/lib/components/about/AnimeSection.svelte

@@ -0,0 +1,238 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import type { AnimeProfile } from '#lib/anime/types';
+	import LinkButton from '#lib/components/ui/LinkButton.svelte';
+	import Panel from '#lib/components/ui/Panel.svelte';
+	import AnimeProfileHeader from './AnimeProfileHeader.svelte';
+
+	let { anime }: { anime: AnimeProfile } = $props();
+
+	const collapsedCount = 12;
+
+	let showAll = $state(false);
+
+	const shownTopRated = $derived(showAll ? anime.topRated : anime.topRated.slice(0, collapsedCount));
+
+	function progressPercent(progress: number, episodes: number | null): number {
+		return episodes ? Math.min(100, (progress / episodes) * 100) : 0;
+	}
+</script>
+
+<div class="overview" class:single={!anime.watching.length}>
+	<Panel title="anilist" icon="simple-icons:anilist">
+		<AnimeProfileHeader {anime} />
+	</Panel>
+
+	{#if anime.watching.length}
+		<Panel title="Currently watching" icon="mdi:play-circle-outline">
+			<div class="watching">
+				{#each anime.watching as entry (entry.id)}
+					<a class="watching-row" href={entry.url} target="_blank" rel="noopener noreferrer">
+						<img src={entry.cover} alt={entry.title} loading="lazy" />
+						<div class="watching-text">
+							<span class="title">{entry.title}</span>
+							<div class="progress-track">
+								<div class="progress-fill" style:width="{progressPercent(entry.progress, entry.episodes)}%"></div>
+							</div>
+							<span class="muted episode">Episode {entry.progress} / {entry.episodes ?? '?'}</span>
+						</div>
+					</a>
+				{/each}
+			</div>
+		</Panel>
+	{/if}
+</div>
+
+<h3 class="subheading"><Icon icon="mdi:star" width="16" /> Top rated</h3>
+<div class="cover-grid">
+	{#each shownTopRated as entry (entry.id)}
+		<a class="cover-card" href={entry.url} target="_blank" rel="noopener noreferrer" title={entry.title}>
+			<div class="cover">
+				<img src={entry.cover} alt={entry.title} loading="lazy" />
+				<span class="score"><Icon icon="mdi:star" width="13" />{entry.score}</span>
+			</div>
+			<span class="cover-title">{entry.title}</span>
+		</a>
+	{/each}
+</div>
+
+<div class="actions">
+	{#if anime.topRated.length > collapsedCount}
+		<button class="toggle" onclick={() => (showAll = !showAll)}>
+			<Icon icon={showAll ? 'mdi:chevron-up' : 'mdi:chevron-down'} width="16" />
+			{showAll ? 'Show less' : `Show all ${anime.topRated.length}`}
+		</button>
+	{/if}
+	<LinkButton href={anime.profileUrl} icon="simple-icons:anilist">Full list on AniList ({anime.completedCount} completed)</LinkButton>
+</div>
+
+<style>
+	.subheading {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		margin: 1.25rem 0 0.6rem;
+		color: var(--foreground);
+		font-size: 0.9rem;
+	}
+
+	.overview {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+		gap: 0.75rem;
+	}
+
+	.overview.single {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.watching {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.watching-row {
+		display: flex;
+		gap: 0.75rem;
+		padding: 0.4rem;
+		border: 1px solid transparent;
+	}
+
+	.watching-row:hover,
+	.cover-card:hover .cover {
+		border-color: var(--accent);
+	}
+
+	.watching-row img {
+		flex-shrink: 0;
+		width: 52px;
+		height: 74px;
+		object-fit: cover;
+	}
+
+	.watching-text {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		justify-content: center;
+		gap: 0.4rem;
+		min-width: 0;
+	}
+
+	.title {
+		overflow: hidden;
+		font-size: 0.9rem;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.progress-track {
+		height: 4px;
+		background: color-mix(in srgb, var(--foreground) 15%, transparent);
+	}
+
+	.progress-fill {
+		height: 100%;
+		background: var(--accent);
+	}
+
+	.episode {
+		font-size: 0.75rem;
+	}
+
+	.cover-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+		gap: 0.9rem 0.75rem;
+	}
+
+	.cover-card {
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+		min-width: 0;
+	}
+
+	.cover {
+		position: relative;
+		aspect-ratio: 2 / 3;
+		overflow: hidden;
+		border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
+		transition: border-color 0.15s ease;
+	}
+
+	.cover img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		transition: transform 0.3s ease;
+	}
+
+	.cover-card:hover img {
+		transform: scale(1.05);
+	}
+
+	.score {
+		position: absolute;
+		top: 0.35rem;
+		right: 0.35rem;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.15rem;
+		padding: 0 0.35rem;
+		background: var(--background);
+		color: var(--yellow);
+		font-size: 0.75rem;
+	}
+
+	.cover-title {
+		display: -webkit-box;
+		overflow: hidden;
+		font-size: 0.8rem;
+		line-height: 1.3;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	.cover-card:hover .cover-title {
+		color: var(--accent);
+	}
+
+	.actions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.6rem;
+		margin-top: 1rem;
+	}
+
+	.toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0.3rem 0.7rem;
+		background: none;
+		border: 1px solid color-mix(in srgb, var(--foreground) 30%, transparent);
+		color: var(--foreground);
+		font-size: 0.85rem;
+	}
+
+	.toggle:hover {
+		border-color: var(--accent);
+		color: var(--accent);
+	}
+
+	@container (max-width: 800px) {
+		.overview {
+			grid-template-columns: minmax(0, 1fr);
+		}
+	}
+
+	@container (max-width: 520px) {
+		.cover-grid {
+			grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+		}
+	}
+</style>

src/lib/components/about/MediaCard.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import type { RatedTitle } from '#lib/content';
+	import type { MediaDetails } from '#lib/media/types';
+
+	let { item, details, kind }: { item: RatedTitle; details?: MediaDetails; kind: 'show' | 'movie' } = $props();
+
+	const placeholderIcon = $derived(kind === 'show' ? 'mdi:television-classic' : 'mdi:movie-open-outline');
+	const metaParts = $derived([details?.year, details?.runtime].filter(Boolean));
+</script>
+
+<a class="media-card" href={item.url} target="_blank" rel="noopener noreferrer" title={item.name}>
+	<div class="poster">
+		{#if details?.poster}
+			<img src={details.poster} alt="" loading="lazy" />
+		{:else}
+			<span class="placeholder"><Icon icon={placeholderIcon} width="36" /></span>
+		{/if}
+
+		<span class="rating"><Icon icon="mdi:star" width="13" />{item.rating}/10</span>
+
+		{#if details?.plot}
+			<p class="plot">{details.plot}</p>
+		{/if}
+	</div>
+
+	<div class="text">
+		<span class="title">{item.name}</span>
+		{#if metaParts.length}
+			<span class="meta">{metaParts.join(' · ')}</span>
+		{/if}
+		{#if details?.genre}
+			<span class="genre">{details.genre}</span>
+		{/if}
+	</div>
+</a>
+
+<style>
+	.media-card {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		min-width: 0;
+	}
+
+	.poster {
+		position: relative;
+		aspect-ratio: 2 / 3;
+		overflow: hidden;
+		background: var(--dark-background);
+		border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
+		transition: border-color 0.15s ease;
+	}
+
+	.media-card:hover .poster {
+		border-color: var(--accent);
+	}
+
+	.poster img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		transition: transform 0.3s ease;
+	}
+
+	.media-card:hover .poster img {
+		transform: scale(1.05);
+	}
+
+	.placeholder {
+		display: grid;
+		place-items: center;
+		height: 100%;
+		color: var(--muted);
+	}
+
+	.rating {
+		position: absolute;
+		top: 0.4rem;
+		right: 0.4rem;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.2rem;
+		padding: 0 0.4rem;
+		background: var(--background);
+		color: var(--yellow);
+		font-size: 0.78rem;
+	}
+
+	.plot {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		margin: 0;
+		padding: 0.6rem;
+		background: color-mix(in srgb, var(--background) 92%, transparent);
+		border-top: 1px solid var(--accent);
+		font-size: 0.75rem;
+		line-height: 1.45;
+		transform: translateY(100%);
+		transition: transform 0.25s ease;
+	}
+
+	.media-card:hover .plot,
+	.media-card:focus-visible .plot {
+		transform: translateY(0);
+	}
+
+	.text {
+		display: flex;
+		flex-direction: column;
+		gap: 0.15rem;
+		min-width: 0;
+	}
+
+	.title {
+		overflow: hidden;
+		color: var(--accent);
+		font-weight: 700;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.meta,
+	.genre {
+		overflow: hidden;
+		color: var(--muted);
+		font-size: 0.75rem;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.poster img,
+		.plot {
+			transition: none;
+		}
+	}
+</style>

src/lib/media/types.ts

@@ -0,0 +1,7 @@
+export interface MediaDetails {
+	poster: string | null;
+	year: string | null;
+	genre: string | null;
+	runtime: string | null;
+	plot: string | null;
+}

src/lib/server/anilist.ts

@@ -0,0 +1,119 @@
+import type { AnimeEntry, AnimeProfile } from '#lib/anime/types';
+
+const cacheDuration = 60 * 60 * 1000;
+const minutesPerDay = 60 * 24;
+const topRatedMinimumScore = 9;
+const statusLabels: Record<string, string> = {
+	COMPLETED: 'Completed',
+	CURRENT: 'Watching',
+	PLANNING: 'Planning',
+	PAUSED: 'Paused',
+	DROPPED: 'Dropped'
+};
+
+const animeQuery = `
+	query ($userName: String) {
+		User(name: $userName) {
+			name
+			siteUrl
+			statistics { anime { count episodesWatched minutesWatched } }
+		}
+		MediaListCollection(userName: $userName, type: ANIME) {
+			lists {
+				status
+				entries {
+					score(format: POINT_10)
+					progress
+					media { id siteUrl episodes title { english romaji } coverImage { large } }
+				}
+			}
+		}
+	}
+`;
+
+interface AniListEntry {
+	score: number;
+	progress: number;
+	media: {
+		id: number;
+		siteUrl: string;
+		episodes: number | null;
+		title: { english: string | null; romaji: string };
+		coverImage: { large: string };
+	};
+}
+
+interface AniListResponse {
+	data: {
+		User: {
+			name: string;
+			siteUrl: string;
+			statistics: { anime: { count: number; episodesWatched: number; minutesWatched: number } };
+		};
+		MediaListCollection: { lists: { status: string; entries: AniListEntry[] }[] };
+	};
+}
+
+const profileCache = new Map<string, { profile: AnimeProfile; fetchedAt: number }>();
+
+function toAnimeEntry({ score, progress, media }: AniListEntry): AnimeEntry {
+	return {
+		id: media.id,
+		title: media.title.english ?? media.title.romaji,
+		url: media.siteUrl,
+		cover: media.coverImage.large,
+		score,
+		progress,
+		episodes: media.episodes
+	};
+}
+
+function entriesWithStatus(response: AniListResponse, status: string): AnimeEntry[] {
+	const list = response.data.MediaListCollection.lists.find((item) => item.status === status);
+	return (list?.entries ?? []).map(toAnimeEntry);
+}
+
+function toAnimeProfile(response: AniListResponse): AnimeProfile {
+	const { name, siteUrl, statistics } = response.data.User;
+	const completed = entriesWithStatus(response, 'COMPLETED');
+	const statusCounts = Object.entries(statusLabels).map(([status, label]) => ({
+		status,
+		label,
+		count: entriesWithStatus(response, status).length
+	}));
+
+	return {
+		name,
+		profileUrl: siteUrl,
+		statusCounts,
+		stats: {
+			count: statistics.anime.count,
+			episodesWatched: statistics.anime.episodesWatched,
+			daysWatched: Math.round((statistics.anime.minutesWatched / minutesPerDay) * 10) / 10
+		},
+		watching: entriesWithStatus(response, 'CURRENT'),
+		topRated: completed.filter((entry) => entry.score >= topRatedMinimumScore).sort((first, second) => second.score - first.score),
+		completedCount: completed.length
+	};
+}
+
+export async function getAnimeProfile(userName: string): Promise<AnimeProfile | null> {
+	const cached = profileCache.get(userName);
+	if (cached && Date.now() - cached.fetchedAt < cacheDuration) return cached.profile;
+
+	try {
+		const response = await fetch('https://graphql.anilist.co', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+			body: JSON.stringify({ query: animeQuery, variables: { userName } })
+		});
+		if (!response.ok) throw new Error(`AniList returned ${response.status}`);
+
+		const profile = toAnimeProfile(await response.json());
+		profileCache.set(userName, { profile, fetchedAt: Date.now() });
+		return profile;
+	} catch (error) {
+		console.error(`AniList lookup failed for ${userName}:`, error);
+		return cached?.profile ?? null;
+	}
+}

src/lib/server/omdb.ts

@@ -0,0 +1,70 @@
+import { OMDB_API_KEY } from '$app/env/private';
+import type { MediaDetails } from '#lib/media/types';
+
+const cacheDuration = 24 * 60 * 60 * 1000;
+const imdbIdPattern = /tt\d+/;
+const missingValue = 'N/A';
+
+interface OmdbResponse {
+	Response: 'True' | 'False';
+	Error?: string;
+	Year?: string;
+	Genre?: string;
+	Runtime?: string;
+	Plot?: string;
+	Poster?: string;
+}
+
+const detailsCache = new Map<string, { details: MediaDetails | null; fetchedAt: number }>();
+
+function imdbIdFromUrl(url: string): string | null {
+	return url.match(imdbIdPattern)?.[0] ?? null;
+}
+
+function presentValue(value: string | undefined): string | null {
+	return value && value !== missingValue ? value : null;
+}
+
+function toMediaDetails(result: OmdbResponse): MediaDetails {
+	return {
+		poster: presentValue(result.Poster),
+		year: presentValue(result.Year),
+		genre: presentValue(result.Genre),
+		runtime: presentValue(result.Runtime),
+		plot: presentValue(result.Plot)
+	};
+}
+
+async function fetchDetails(imdbId: string): Promise<MediaDetails | null> {
+	const cached = detailsCache.get(imdbId);
+	if (cached && Date.now() - cached.fetchedAt < cacheDuration) return cached.details;
+
+	try {
+		const params = new URLSearchParams({ apikey: OMDB_API_KEY ?? '', i: imdbId, plot: 'short' });
+		const response = await fetch(`https://www.omdbapi.com/?${params}`);
+		if (!response.ok) throw new Error(`OMDb returned ${response.status}`);
+
+		const result: OmdbResponse = await response.json();
+		if (result.Response === 'False') throw new Error(result.Error ?? 'OMDb found no result');
+
+		const details = toMediaDetails(result);
+		detailsCache.set(imdbId, { details, fetchedAt: Date.now() });
+		return details;
+	} catch (error) {
+		console.error(`OMDb lookup failed for ${imdbId}:`, error);
+		return cached?.details ?? null;
+	}
+}
+
+export async function getMediaDetails(urls: string[]): Promise<Record<string, MediaDetails>> {
+	if (!OMDB_API_KEY) return {};
+
+	const results = await Promise.all(
+		urls.map(async (url) => {
+			const imdbId = imdbIdFromUrl(url);
+			const details = imdbId ? await fetchDetails(imdbId) : null;
+			return [url, details] as const;
+		})
+	);
+	return Object.fromEntries(results.filter((result): result is readonly [string, MediaDetails] => result[1] !== null));
+}

src/routes/about/+page.server.ts

@@ -0,0 +1,15 @@
+import { about } from '#lib/content';
+import { getAnimeProfile } from '#lib/server/anilist';
+import { getMediaDetails } from '#lib/server/omdb';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+	const mediaUrls = [...about.shows, ...about.movies].map((item) => item.url);
+
+	const [anime, mediaDetails] = await Promise.all([
+		about.anilistUsername ? getAnimeProfile(about.anilistUsername) : null,
+		getMediaDetails(mediaUrls)
+	]);
+
+	return { anime, mediaDetails };
+};

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>