Add setup section to about page

content/about.json

@@ -1,6 +1,39 @@
 {
 	"anilistUsername": "SirBlob",
 	"lastfmUsername": "Sir_Blob_",
+	"setup": {
+		"user": "blob",
+		"host": "blomarchy",
+		"steam": [
+			"        (   )  (",
+			"         ) (   )  )",
+			"        (   ) (  ("
+		],
+		"art": [
+			"    ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄",
+			"    ██               ██▄▄▄▄▄",
+			"    ██               ██   ██",
+			"    ██               ██   ██",
+			"    ██               ██▀▀▀▀▀",
+			"     ██             ██",
+			"      ▀█▄▄▄▄▄▄▄▄▄▄▄█▀",
+			"▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄",
+			" ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀"
+		],
+		"specs": [
+			{ "label": "host", "value": "Lenovo IdeaPad Flex 5i" },
+			{ "label": "os", "value": "Arch Linux x86_64" },
+			{ "label": "kernel", "value": "Linux (arch)" },
+			{ "label": "shell", "value": "bash" },
+			{ "label": "wm", "value": "Hyprland (Wayland)" },
+			{ "label": "term", "value": "foot" },
+			{ "label": "display", "value": "2x 1920x1080 24\", 60 Hz + 75 Hz" },
+			{ "label": "cpu", "value": "Intel Core i5-1335U (4+8) @ 4.60 GHz" },
+			{ "label": "gpu", "value": "Intel Iris Xe Graphics" },
+			{ "label": "memory", "value": "16 GB" }
+		],
+		"dotfilesUrl": "https://github.com/SirBlobby/dotfiles"
+	},
 	"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." },

src/lib/components/about/setup/SetupFetch.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import type { DesktopSetup } from '#lib/content/types';
+
+	let { setup }: { setup: DesktopSetup } = $props();
+
+	const title = $derived(`${setup.user}@${setup.host}`);
+	const dotfilesLabel = $derived(setup.dotfilesUrl.replace(/^https?:\/\//, ''));
+	const paletteColors = ['red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'foreground'];
+</script>
+
+<div class="fetch">
+	<div class="art" aria-hidden="true">
+		<pre class="steam">{#each setup.steam as line, index (index)}<span style:animation-delay="{index * 0.4}s">{line}</span>
+{/each}</pre>
+		<pre class="cup">{setup.art.join('\n')}</pre>
+	</div>
+
+	<div class="info">
+		<div class="heading">
+			<span class="accent">{setup.user}</span><span class="muted">@</span><span class="accent">{setup.host}</span>
+		</div>
+		<div class="muted">{'-'.repeat(title.length)}</div>
+		{#each setup.specs as spec (spec.label)}
+			<div class="row"><span class="label">{spec.label}</span><span>{spec.value}</span></div>
+		{/each}
+		<div class="row">
+			<span class="label">dotfiles</span>
+			<a class="link" href={setup.dotfilesUrl} target="_blank" rel="noopener noreferrer">{dotfilesLabel}</a>
+		</div>
+		<div class="palette" aria-hidden="true">
+			{#each paletteColors as color (color)}
+				<span style:background="var(--{color})"></span>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.fetch {
+		display: flex;
+		align-items: flex-start;
+		gap: 1.5rem;
+	}
+
+	.art {
+		flex-shrink: 0;
+		align-self: center;
+	}
+
+	.art pre {
+		margin: 0;
+		font-size: 1.2rem;
+		line-height: 1.2;
+	}
+
+	.steam {
+		color: var(--muted);
+	}
+
+	.steam span {
+		display: inline-block;
+		animation: steam-rise 2.4s ease-in-out infinite;
+	}
+
+	.steam {
+		font-weight: 700;
+	}
+
+	.cup {
+		color: var(--accent);
+		line-height: 1;
+	}
+
+	@keyframes steam-rise {
+		0%,
+		100% {
+			opacity: 0.35;
+			transform: translateY(2px);
+		}
+		50% {
+			opacity: 1;
+			transform: translateY(-2px);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.steam span {
+			animation: none;
+		}
+	}
+
+	.info {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		line-height: 1.5;
+	}
+
+	.accent {
+		color: var(--accent);
+		font-weight: 700;
+	}
+
+	.row {
+		display: grid;
+		grid-template-columns: 5.5rem minmax(0, 1fr);
+		gap: 0.5rem;
+	}
+
+	.label {
+		color: var(--blue);
+		font-weight: 700;
+	}
+
+	.link {
+		overflow: hidden;
+		color: var(--green);
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.link:hover {
+		text-decoration: underline;
+	}
+
+	.palette {
+		display: flex;
+		margin-top: 0.6rem;
+	}
+
+	.palette span {
+		width: 1.5rem;
+		height: 0.9rem;
+	}
+
+	@container (max-width: 700px) {
+		.art {
+			display: none;
+		}
+	}
+</style>

src/lib/components/about/setup/SetupSection.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { DesktopSetup } from '#lib/content/types';
+	import Panel from '../../ui/Panel.svelte';
+	import SetupFetch from './SetupFetch.svelte';
+
+	let { setup }: { setup: DesktopSetup } = $props();
+</script>
+
+<Panel title="fastfetch" icon="mdi:console">
+	<SetupFetch {setup} />
+</Panel>

src/lib/content/types.ts

@@ -138,9 +138,24 @@ export interface RatedTitle {
 }
 
 export interface AboutContent {
+export interface LabeledValue {
+	label: string;
+	value: string;
+}
+
+export interface DesktopSetup {
+	user: string;
+	host: string;
+	steam: string[];
+	art: string[];
+	specs: LabeledValue[];
+	dotfilesUrl: string;
+}
+
 	anilistUsername?: string;
 	lastfmUsername?: string;
 	hobbies: Hobby[];
+	setup?: DesktopSetup;
 	games: Game[];
 	shows: RatedTitle[];
 	movies: RatedTitle[];

src/routes/about/+page.svelte

@@ -8,6 +8,7 @@
 	import AnimeSection from '#lib/components/about/AnimeSection.svelte';
 	import MediaGrid from '#lib/components/about/MediaGrid.svelte';
 	import GameCard from '#lib/components/about/GameCard.svelte';
+	import SetupSection from '#lib/components/about/setup/SetupSection.svelte';
 	import ListeningSection from '#lib/components/about/listening/ListeningSection.svelte';
 	import type { PageProps } from './$types';
 
@@ -23,6 +24,7 @@
 
 	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' },
@@ -47,6 +49,12 @@
 		</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)}