From 0f5155811d7975eeddc15c26b746e982450c8087 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Thu, 5 Nov 2026 22:52:40 +0800
Subject: [PATCH] updated services

---
 .../ui/AnimatedTooltip/AnimatedTooltip.svelte | 198 +++----
 frontend/src/lib/api.ts                       |   1 +
 frontend/src/routes/Admin.svelte              | 545 ++++++++++--------
 frontend/src/routes/MediaKit.svelte           | 399 +++++++------
 frontend/src/routes/MediaKit_copy.svelte      | 236 ++++----
 5 files changed, 743 insertions(+), 636 deletions(-)

diff --git a/frontend/src/components/ui/AnimatedTooltip/AnimatedTooltip.svelte b/frontend/src/components/ui/AnimatedTooltip/AnimatedTooltip.svelte
index c4acf02..eb7bb8c 100644
--- a/frontend/src/components/ui/AnimatedTooltip/AnimatedTooltip.svelte
+++ b/frontend/src/components/ui/AnimatedTooltip/AnimatedTooltip.svelte
@@ -1,106 +1,106 @@
 <script lang="ts">
-    import {
-        Motion,
-        useTransform,
-        AnimatePresence,
-        useMotionValue,
-        useSpring,
-    } from "svelte-motion";
+	import {
+		Motion,
+		useTransform,
+		AnimatePresence,
+		useMotionValue,
+		useSpring,
+	} from "svelte-motion";
 
-    export let items: {
-        id: number;
-        name: string;
-        image: string;
-        url: string;
-    }[];
+	export let items: {
+		id: number;
+		name: string;
+		image: string;
+		url: string;
+	}[];
 
-    let hoveredIndex: number | null = null;
-    const springConfig = { stiffness: 100, damping: 5 };
-    const x = useMotionValue(0); // going to set this value on mouse move
-    // rotate the tooltip
-    const rotate = useSpring(
-        useTransform(x, [-100, 100], [-45, 45]),
-        springConfig,
-    );
-    // translate the tooltip
-    const translateX = useSpring(
-        useTransform(x, [-100, 100], [-50, 50]),
-        springConfig,
-    );
-    const handleMouseMove = (event: MouseEvent) => {
-        // @ts-ignore
-        const halfWidth = event.target?.offsetWidth / 2;
-        x.set(event.offsetX - halfWidth); // set the x value, which is then used in transform and rotate
-    };
+	let hoveredIndex: number | null = null;
+	const springConfig = { stiffness: 100, damping: 5 };
+	const x = useMotionValue(0); // going to set this value on mouse move
+	// rotate the tooltip
+	const rotate = useSpring(
+		useTransform(x, [-100, 100], [-45, 45]),
+		springConfig,
+	);
+	// translate the tooltip
+	const translateX = useSpring(
+		useTransform(x, [-100, 100], [-50, 50]),
+		springConfig,
+	);
+	const handleMouseMove = (event: MouseEvent) => {
+		// @ts-ignore
+		const halfWidth = event.target?.offsetWidth / 2;
+		x.set(event.offsetX - halfWidth); // set the x value, which is then used in transform and rotate
+	};
 </script>
 
 <div class="group flex flex-row pl-2">
-    {#each items as item, idx (item.name)}
-        <div class="relative mr-5">
-            <AnimatePresence show={true}>
-                {#if hoveredIndex === item.id}
-                    <Motion
-                        let:motion
-                        initial={{ opacity: 0, y: 20, scale: 0.6 }}
-                        animate={{
-                            opacity: 1,
-                            y: 0,
-                            scale: 1,
-                            transition: {
-                                type: "spring",
-                                stiffness: 260,
-                                damping: 10,
-                            },
-                        }}
-                        exit={{ opacity: 0, y: 20, scale: 0.6 }}
-                        style={{
-                            translateX: translateX,
-                            rotate: rotate,
-                            whiteSpace: "nowrap",
-                        }}
-                    >
-                        <div
-                            use:motion
-                            id="tooltip-{item.id}"
-                            role="tooltip"
-                            class="absolute left-1/2 -top-10 z-50 flex -translate-x-1/2 flex-col items-center justify-center rounded-md bg-gray-700 px-4 py-2 text-xs shadow-xl"
-                        >
-                            <div
-                                class="absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-linear-to-r from-transparent via-emerald-500 to-transparent"
-                            ></div>
-                            <div
-                                class="absolute -bottom-px left-10 z-30 h-px w-[40%] bg-linear-to-r from-transparent via-sky-500 to-transparent"
-                            ></div>
-                            <div
-                                class="relative z-30 whitespace-nowrap text-base font-bold text-white"
-                            >
-                                {item.name}
-                            </div>
-                        </div>
-                    </Motion>
-                {/if}
-            </AnimatePresence>
-            <a
-                href={item.url}
-                target="_blank"
-                class="relative m-0 h-14 w-14 cursor-pointer rounded-full border-0 bg-transparent p-0 transition duration-500 group-hover:z-30 group-hover:scale-105"
-                on:mousemove={handleMouseMove}
-                on:mouseenter={() => (hoveredIndex = item.id)}
-                on:mouseleave={() => (hoveredIndex = null)}
-                on:focus={() => (hoveredIndex = item.id)}
-                on:blur={() => (hoveredIndex = null)}
-                aria-describedby={hoveredIndex === item.id
-                    ? `tooltip-${item.id}`
-                    : undefined}
-            >
-                <img
-                    height={100}
-                    width={100}
-                    src={item.image}
-                    alt={item.name}
-                    class="m-0! h-10 w-10 rounded-lg object-cover object-top p-0!"
-                />
-            </a>
-        </div>
-    {/each}
+	{#each items as item, idx (item.name)}
+		<div class="relative mr-5">
+			<AnimatePresence show={true}>
+				{#if hoveredIndex === item.id}
+					<Motion
+						let:motion
+						initial={{ opacity: 0, y: 20, scale: 0.6 }}
+						animate={{
+							opacity: 1,
+							y: 0,
+							scale: 1,
+							transition: {
+								type: "spring",
+								stiffness: 260,
+								damping: 10,
+							},
+						}}
+						exit={{ opacity: 0, y: 20, scale: 0.6 }}
+						style={{
+							translateX: translateX,
+							rotate: rotate,
+							whiteSpace: "nowrap",
+						}}
+					>
+						<div
+							use:motion
+							id="tooltip-{item.id}"
+							role="tooltip"
+							class="absolute left-1/2 -top-10 z-50 flex -translate-x-1/2 flex-col items-center justify-center rounded-md bg-gray-700 px-4 py-2 text-xs shadow-xl"
+						>
+							<div
+								class="absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-linear-to-r from-transparent via-emerald-500 to-transparent"
+							></div>
+							<div
+								class="absolute -bottom-px left-10 z-30 h-px w-[40%] bg-linear-to-r from-transparent via-sky-500 to-transparent"
+							></div>
+							<div
+								class="relative z-30 whitespace-nowrap text-base font-bold text-white"
+							>
+								{item.name}
+							</div>
+						</div>
+					</Motion>
+				{/if}
+			</AnimatePresence>
+			<a
+				href={item.url}
+				target="_blank"
+				class="relative m-0 h-14 w-14 cursor-pointer rounded-full border-0 bg-transparent p-0 transition duration-500 group-hover:z-30 group-hover:scale-105"
+				on:mousemove={handleMouseMove}
+				on:mouseenter={() => (hoveredIndex = item.id)}
+				on:mouseleave={() => (hoveredIndex = null)}
+				on:focus={() => (hoveredIndex = item.id)}
+				on:blur={() => (hoveredIndex = null)}
+				aria-describedby={hoveredIndex === item.id
+					? `tooltip-${item.id}`
+					: undefined}
+			>
+				<img
+					height={100}
+					width={100}
+					src={item.image}
+					alt={item.name}
+					class="m-0! h-10 w-10 rounded-lg object-cover object-top p-0!"
+				/>
+			</a>
+		</div>
+	{/each}
 </div>
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 474207c..c89f328 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -83,3 +83,4 @@ export async function updatePlatforms(
   const data = await res.json();
   return data.platforms;
 }
+
diff --git a/frontend/src/routes/Admin.svelte b/frontend/src/routes/Admin.svelte
index 71c5b22..4be3b63 100644
--- a/frontend/src/routes/Admin.svelte
+++ b/frontend/src/routes/Admin.svelte
@@ -1,275 +1,316 @@
 <script lang="ts">
-  import { onMount } from 'svelte'
-  import {
-    clearStoredToken,
-    fetchAdminState,
-    getStoredToken,
-    updateContent,
-    updatePlatforms,
-    verifyAdmin,
-  } from '../lib/api'
-  import type { Platform } from '../lib/types'
+	import { onMount } from "svelte";
+	import {
+		clearStoredToken,
+		fetchAdminState,
+		getStoredToken,
+		updateContent,
+		updatePlatforms,
+		verifyAdmin,
+	} from "../lib/api";
+	import type { Platform } from "../lib/types";
 
-  let authed = $state(false)
-  let loading = $state(true)
-  let message = $state('')
-  let error = $state('')
-  let username = $state('')
-  let password = $state('')
+	let authed = $state(false);
+	let loading = $state(true);
+	let message = $state("");
+	let error = $state("");
+	let username = $state("");
+	let password = $state("");
 
-  let content = $state<Record<string, string>>({})
-  let platforms = $state<Platform[]>([])
+	let content = $state<Record<string, string>>({});
+	let platforms = $state<Platform[]>([]);
 
-  onMount(async () => {
-    if (getStoredToken()) {
-      await loadState()
-    } else {
-      loading = false
-    }
-  })
+	onMount(async () => {
+		if (getStoredToken()) {
+			await loadState();
+		} else {
+			loading = false;
+		}
+	});
 
-  function titleCase(key: string): string {
-    return key
-      .split('_')
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(' ')
-  }
+	function titleCase(key: string): string {
+		return key
+			.split("_")
+			.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+			.join(" ");
+	}
 
-  async function loadState() {
-    loading = true
-    error = ''
-    try {
-      const state = await fetchAdminState()
-      content = state.content
-      platforms = state.platforms
-      authed = true
-    } catch (err) {
-      authed = false
-      error = err instanceof Error ? err.message : 'Unable to load admin state'
-    } finally {
-      loading = false
-    }
-  }
+	async function loadState() {
+		loading = true;
+		error = "";
+		try {
+			const state = await fetchAdminState();
+			content = state.content;
+			platforms = state.platforms;
+			authed = true;
+		} catch (err) {
+			authed = false;
+			error =
+				err instanceof Error
+					? err.message
+					: "Unable to load admin state";
+		} finally {
+			loading = false;
+		}
+	}
 
-  async function handleLogin(event: SubmitEvent) {
-    event.preventDefault()
-    error = ''
-    message = ''
+	async function handleLogin(event: SubmitEvent) {
+		event.preventDefault();
+		error = "";
+		message = "";
 
-    if (await verifyAdmin(username, password)) {
-      password = ''
-      await loadState()
-    } else {
-      error = 'Invalid credentials'
-    }
-  }
+		if (await verifyAdmin(username, password)) {
+			password = "";
+			await loadState();
+		} else {
+			error = "Invalid credentials";
+		}
+	}
 
-  function handleLogout() {
-    clearStoredToken()
-    authed = false
-    content = {}
-    platforms = []
-    message = ''
-    error = ''
-  }
+	function handleLogout() {
+		clearStoredToken();
+		authed = false;
+		content = {};
+		platforms = [];
+		message = "";
+		error = "";
+	}
 
-  async function handleSaveContent() {
-    error = ''
-    message = ''
-    try {
-      content = await updateContent(content)
-      message = 'Content saved'
-    } catch (err) {
-      error = err instanceof Error ? err.message : 'Unable to save content'
-    }
-  }
+	async function handleSaveContent() {
+		error = "";
+		message = "";
+		try {
+			content = await updateContent(content);
+			message = "Content saved";
+		} catch (err) {
+			error =
+				err instanceof Error ? err.message : "Unable to save content";
+		}
+	}
 
-  async function handleSavePlatforms() {
-    error = ''
-    message = ''
-    try {
-      const payload = platforms.map((platform) => ({
-        ...platform,
-        followers: Number(platform.followers) || 0,
-      }))
-      platforms = await updatePlatforms(payload)
-      message = 'Platforms saved'
-    } catch (err) {
-      error = err instanceof Error ? err.message : 'Unable to save platforms'
-    }
-  }
+	async function handleSavePlatforms() {
+		error = "";
+		message = "";
+		try {
+			const payload = platforms.map((platform) => ({
+				...platform,
+				followers: Number(platform.followers) || 0,
+			}));
+			platforms = await updatePlatforms(payload);
+			message = "Platforms saved";
+		} catch (err) {
+			error =
+				err instanceof Error ? err.message : "Unable to save platforms";
+		}
+	}
 </script>
 
-<main class="mx-auto w-full max-w-[920px] px-6 pt-12 pb-[72px]">
-  <header class="flex items-start justify-between gap-6">
-    <div>
-      <p class="mb-3 text-xs font-semibold tracking-[0.14em] uppercase text-gray-500 dark:text-gray-400">CMS</p>
-      <h1 class="text-[clamp(36px,8vw,52px)] leading-[1.05] font-semibold tracking-tight">
-        RythonDev media kit
-      </h1>
-    </div>
-    <div class="flex items-center gap-3">
-      <a class="text-sm text-gray-500 hover:text-neutral-900 dark:text-gray-400 dark:hover:text-neutral-50" href="#/">
-        View media kit
-      </a>
-      {#if authed}
-        <button
-          class="cursor-pointer rounded-[10px] border border-gray-200 bg-transparent px-4 py-2.5 text-sm font-medium text-neutral-900 transition-opacity hover:opacity-85 dark:border-zinc-800 dark:text-neutral-50"
-          onclick={handleLogout}
-        >
-          Log out
-        </button>
-      {/if}
-    </div>
-  </header>
+<main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
+	<header class="flex items-start justify-between gap-6">
+		<div>
+			<p
+				class="mb-3 text-xs font-semibold tracking-[0.14em] uppercase text-gray-500 dark:text-gray-400"
+			>
+				CMS
+			</p>
+			<h1
+				class="text-[clamp(36px,8vw,52px)] leading-[1.05] font-semibold tracking-tight"
+			>
+				RythonDev media kit
+			</h1>
+		</div>
+		<div class="flex items-center gap-3">
+			<a
+				class="text-sm text-gray-500 hover:text-neutral-900 dark:text-gray-400 dark:hover:text-neutral-50"
+				href="#/"
+			>
+				View media kit
+			</a>
+			{#if authed}
+				<button
+					class="cursor-pointer rounded-[10px] border border-gray-200 bg-transparent px-4 py-2.5 text-sm font-medium text-neutral-900 transition-opacity hover:opacity-85 dark:border-zinc-800 dark:text-neutral-50"
+					onclick={handleLogout}
+				>
+					Log out
+				</button>
+			{/if}
+		</div>
+	</header>
 
-  {#if loading}
-    <div class="py-8 text-gray-500 dark:text-gray-400">Loading…</div>
-  {:else if !authed}
-    <form class="mt-10 max-w-[400px]" onsubmit={handleLogin}>
-      <h2 class="mb-2 text-xl font-semibold tracking-tight">Sign in</h2>
-      <p class="text-gray-500 dark:text-gray-400">Enter the admin credentials configured for this instance.</p>
+	{#if loading}
+		<div class="py-8 text-gray-500 dark:text-gray-400">Loading…</div>
+	{:else if !authed}
+		<form class="mt-10 max-w-100" onsubmit={handleLogin}>
+			<h2 class="mb-2 text-xl font-semibold tracking-tight">Sign in</h2>
+			<p class="text-gray-500 dark:text-gray-400">
+				Enter the admin credentials configured for this instance.
+			</p>
 
-      <label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400">
-        <span>Username</span>
-        <input
-          class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
-          bind:value={username}
-          autocomplete="username"
-          required
-        />
-      </label>
+			<label
+				class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
+			>
+				<span>Username</span>
+				<input
+					class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
+					bind:value={username}
+					autocomplete="username"
+					required
+				/>
+			</label>
 
-      <label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400">
-        <span>Password</span>
-        <input
-          class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
-          bind:value={password}
-          type="password"
-          autocomplete="current-password"
-          required
-        />
-      </label>
+			<label
+				class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
+			>
+				<span>Password</span>
+				<input
+					class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
+					bind:value={password}
+					type="password"
+					autocomplete="current-password"
+					required
+				/>
+			</label>
 
-      {#if error}
-        <div class="mt-6 rounded-[10px] bg-red-600/10 px-4 py-3 text-sm text-red-600 dark:text-red-400">
-          {error}
-        </div>
-      {/if}
+			{#if error}
+				<div
+					class="mt-6 rounded-[10px] bg-red-600/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"
+				>
+					{error}
+				</div>
+			{/if}
 
-      <button
-        class="cursor-pointer rounded-[10px] border border-transparent bg-neutral-900 px-4 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-85 dark:bg-neutral-50 dark:text-neutral-950"
-        type="submit"
-      >
-        Sign in
-      </button>
-    </form>
-  {:else}
-    <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 md:items-start">
-      <section class="border-t border-gray-200 pt-8 dark:border-zinc-800">
-        <div class="mb-5 flex items-center justify-between gap-4">
-          <h2 class="text-xl font-semibold tracking-tight">Text content</h2>
-          <button
-            class="cursor-pointer rounded-[10px] border border-transparent bg-neutral-900 px-4 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-85 dark:bg-neutral-50 dark:text-neutral-950"
-            onclick={handleSaveContent}
-          >
-            Save content
-          </button>
-        </div>
+			<button
+				class="cursor-pointer rounded-[10px] border border-transparent bg-neutral-900 px-4 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-85 dark:bg-neutral-50 dark:text-neutral-950"
+				type="submit"
+			>
+				Sign in
+			</button>
+		</form>
+	{:else}
+		<div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 md:items-start">
+			<section class="border-t border-gray-200 pt-8 dark:border-zinc-800">
+				<div class="mb-5 flex items-center justify-between gap-4">
+					<h2 class="text-xl font-semibold tracking-tight">
+						Text content
+					</h2>
+					<button
+						class="cursor-pointer rounded-[10px] border border-transparent bg-neutral-900 px-4 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-85 dark:bg-neutral-50 dark:text-neutral-950"
+						onclick={handleSaveContent}
+					>
+						Save content
+					</button>
+				</div>
 
-        <div class="grid grid-cols-1 gap-4">
-          {#each Object.keys(content) as key}
-            <label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400">
-              <span>{titleCase(key)}</span>
-              {#if key === 'about'}
-                <textarea
-                  class="w-full resize-y rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
-                  rows="4"
-                  bind:value={content[key]}
-                ></textarea>
-              {:else if key === 'profile_image_url'}
-                <div class="flex items-start gap-4">
-                  <input
-                    class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
-                    bind:value={content[key]}
-                  />
-                  {#if content[key]}
-                    <img
-                      class="h-16 w-16 shrink-0 rounded-full border border-gray-200 object-cover dark:border-zinc-800"
-                      src={content[key]}
-                      alt="Profile preview"
-                    />
-                  {/if}
-                </div>
-              {:else}
-                <input
-                  class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
-                  bind:value={content[key]}
-                />
-              {/if}
-            </label>
-          {/each}
-        </div>
-      </section>
+				<div class="grid grid-cols-1 gap-4">
+					{#each Object.keys(content) as key}
+						<label
+							class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
+						>
+							<span>{titleCase(key)}</span>
+							{#if key === "about" || key === "services"}
+								<textarea
+									class="w-full resize-y rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
+									rows={key === "services" ? 6 : 4}
+									bind:value={content[key]}></textarea>
+							{:else if key === "profile_image_url"}
+								<div class="flex items-start gap-4">
+									<input
+										class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
+										bind:value={content[key]}
+									/>
+									{#if content[key]}
+										<img
+											class="h-16 w-16 shrink-0 rounded-full border border-gray-200 object-cover dark:border-zinc-800"
+											src={content[key]}
+											alt="Profile preview"
+										/>
+									{/if}
+								</div>
+							{:else}
+								<input
+									class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
+									bind:value={content[key]}
+								/>
+							{/if}
+						</label>
+					{/each}
+				</div>
+			</section>
 
-      <section class="border-t border-gray-200 pt-8 dark:border-zinc-800">
-        <div class="mb-5 flex items-center justify-between gap-4">
-          <h2 class="text-xl font-semibold tracking-tight">Follower counts</h2>
-          <button
-            class="cursor-pointer rounded-[10px] border border-transparent bg-neutral-900 px-4 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-85 dark:bg-neutral-50 dark:text-neutral-950"
-            onclick={handleSavePlatforms}
-          >
-            Save platforms
-          </button>
-        </div>
+			<section class="border-t border-gray-200 pt-8 dark:border-zinc-800">
+				<div class="mb-5 flex items-center justify-between gap-4">
+					<h2 class="text-xl font-semibold tracking-tight">
+						Follower counts
+					</h2>
+					<button
+						class="cursor-pointer rounded-[10px] border border-transparent bg-neutral-900 px-4 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-85 dark:bg-neutral-50 dark:text-neutral-950"
+						onclick={handleSavePlatforms}
+					>
+						Save platforms
+					</button>
+				</div>
 
-        <div class="grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-5">
-          {#each platforms as platform, index (platform.name)}
-            <div
-              class="rounded-2xl border border-gray-200 bg-neutral-50 p-5 dark:border-zinc-800 dark:bg-neutral-900"
-            >
-              <div class="mb-4 text-sm font-semibold">{titleCase(platform.name)}</div>
-              <div class="grid grid-cols-1 gap-4">
-                <label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400">
-                  <span>Handle</span>
-                  <input
-                    class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
-                    bind:value={platform.handle}
-                  />
-                </label>
-                <label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400">
-                  <span>URL</span>
-                  <input
-                    class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
-                    bind:value={platform.url}
-                  />
-                </label>
-                <label class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400">
-                  <span>Followers</span>
-                  <input
-                    class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
-                    type="number"
-                    min="0"
-                    step="1"
-                    bind:value={platform.followers}
-                  />
-                </label>
-              </div>
-            </div>
-          {/each}
-        </div>
-      </section>
-    </div>
+				<div
+					class="grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-5"
+				>
+					{#each platforms as platform, index (platform.name)}
+						<div
+							class="rounded-2xl border border-gray-200 bg-neutral-50 p-5 dark:border-zinc-800 dark:bg-neutral-900"
+						>
+							<div class="mb-4 text-sm font-semibold">
+								{titleCase(platform.name)}
+							</div>
+							<div class="grid grid-cols-1 gap-4">
+								<label
+									class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
+								>
+									<span>Handle</span>
+									<input
+										class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
+										bind:value={platform.handle}
+									/>
+								</label>
+								<label
+									class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
+								>
+									<span>URL</span>
+									<input
+										class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
+										bind:value={platform.url}
+									/>
+								</label>
+								<label
+									class="flex flex-col gap-2 text-sm text-gray-500 dark:text-gray-400"
+								>
+									<span>Followers</span>
+									<input
+										class="w-full rounded-[10px] border border-gray-200 bg-white px-3 py-2.5 text-neutral-900 outline-none focus:border-violet-600 dark:border-zinc-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-violet-400"
+										type="number"
+										min="0"
+										step="1"
+										bind:value={platform.followers}
+									/>
+								</label>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</section>
+		</div>
 
-    {#if message}
-      <div class="mt-6 rounded-[10px] bg-green-600/10 px-4 py-3 text-sm text-green-600 dark:text-green-400">
-        {message}
-      </div>
-    {/if}
-    {#if error}
-      <div class="mt-6 rounded-[10px] bg-red-600/10 px-4 py-3 text-sm text-red-600 dark:text-red-400">
-        {error}
-      </div>
-    {/if}
-  {/if}
+		{#if message}
+			<div
+				class="mt-6 rounded-[10px] bg-green-600/10 px-4 py-3 text-sm text-green-600 dark:text-green-400"
+			>
+				{message}
+			</div>
+		{/if}
+		{#if error}
+			<div
+				class="mt-6 rounded-[10px] bg-red-600/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"
+			>
+				{error}
+			</div>
+		{/if}
+	{/if}
 </main>
diff --git a/frontend/src/routes/MediaKit.svelte b/frontend/src/routes/MediaKit.svelte
index afca832..069a9d9 100644
--- a/frontend/src/routes/MediaKit.svelte
+++ b/frontend/src/routes/MediaKit.svelte
@@ -1,196 +1,231 @@
 <script lang="ts">
-    import { onMount } from "svelte";
-    import { fetchMediaKit } from "../lib/api";
-    import type { MediaKit } from "../lib/types";
-    import Card from "../components/Card.svelte";
-    import Collabs from "../components/Collabs.svelte";
+	import { onMount } from "svelte";
+	import { fetchMediaKit } from "../lib/api";
+	import type { MediaKit } from "../lib/types";
+	import Card from "../components/Card.svelte";
+	import Collabs from "../components/Collabs.svelte";
 
-    let data = $state<MediaKit | null>(null);
-    let error = $state("");
+	let data = $state<MediaKit | null>(null);
+	let error = $state("");
 
-    onMount(async () => {
-        try {
-            data = await fetchMediaKit();
-        } catch (err) {
-            error = err instanceof Error ? err.message : "Something went wrong";
-        }
-    });
+	onMount(async () => {
+		try {
+			data = await fetchMediaKit();
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Something went wrong";
+		}
+	});
 
-    let content = $derived(data?.content ?? {});
-    let platforms = $derived(data?.platforms ?? []);
-    let twitch = $derived(data?.twitch);
-    // let twitchLogin = $derived(twitch?.login ?? "");
+	let content = $derived(data?.content ?? {});
+	let platforms = $derived(data?.platforms ?? []);
+	let services = $derived(
+		(content.services ?? "")
+			.split("\n")
+			.map((service) => service.trim())
+			.filter(Boolean)
+			.slice(0, 6),
+	);
+	let twitch = $derived(data?.twitch);
+	// let twitchLogin = $derived(twitch?.login ?? "");
 
-    type platformDecoType = {
-        image: string;
-        color?: string | null;
-    };
+	type platformDecoType = {
+		image: string;
+		color?: string | null;
+	};
 
-    let platformImageMap: Record<string, platformDecoType> = {
-        twitch: {
-            image: "/images/logos/twitch.svg",
-            color: "#8E60F5",
-        },
-        youtube: {
-            image: "/images/logos/youtube.svg",
-            color: "#FF0000",
-        },
-        instagram: {
-            image: "/images/logos/instagram.svg",
-            color: "#E1306C",
-        },
-        tiktok: {
-            image: "/images/logos/tiktok.svg",
-            color: "#FFFFFF",
-        },
-    };
-    function formatCount(value: number | undefined | null): string {
-        if (value == null) return "—";
-        if (value >= 1_000_000) {
-            const millions = value / 1_000_000;
-            return `${millions >= 100 ? Math.round(millions) : millions.toFixed(1).replace(/\.0$/, "")}M`;
-        }
-        if (value >= 1_000) {
-            const thousands = value / 1_000;
-            return `${thousands >= 100 ? Math.round(thousands) : thousands.toFixed(1).replace(/\.0$/, "")}K`;
-        }
-        return value.toLocaleString();
-    }
+	let platformImageMap: Record<string, platformDecoType> = {
+		twitch: {
+			image: "/images/logos/twitch.svg",
+			color: "#8E60F5",
+		},
+		youtube: {
+			image: "/images/logos/youtube.svg",
+			color: "#FF0000",
+		},
+		instagram: {
+			image: "/images/logos/instagram.svg",
+			color: "#E1306C",
+		},
+		tiktok: {
+			image: "/images/logos/tiktok.svg",
+			color: "#FFFFFF",
+		},
+	};
+	function formatCount(value: number | undefined | null): string {
+		if (value == null) return "—";
+		if (value >= 1_000_000) {
+			const millions = value / 1_000_000;
+			return `${millions >= 100 ? Math.round(millions) : millions.toFixed(1).replace(/\.0$/, "")}M`;
+		}
+		if (value >= 1_000) {
+			const thousands = value / 1_000;
+			return `${thousands >= 100 ? Math.round(thousands) : thousands.toFixed(1).replace(/\.0$/, "")}K`;
+		}
+		return value.toLocaleString();
+	}
 </script>
 
 {#if error}
-    <main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
-        <div
-            class="mt-6 rounded-[10px] bg-red-600/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"
-        >
-            {error}
-        </div>
-    </main>
+	<main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
+		<div
+			class="mt-6 rounded-[10px] bg-red-600/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"
+		>
+			{error}
+		</div>
+	</main>
 {:else if !data}
-    <main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
-        <div class="py-8 text-gray-500 dark:text-gray-400">Loading…</div>
-    </main>
+	<main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
+		<div class="py-8 text-gray-500 dark:text-gray-400">Loading…</div>
+	</main>
 {:else}
-    <main class="grid grid-cols-2 max-w-6xl mx-auto pt-20 pb-10 gap-10">
-        <div class="">
-            <div class="px-5">
-                <div class="flex justify-end items-start">
-                    {#if content.profile_image_url}
-                        <img
-                            class="shrink-0 rounded-xl object-cover shadow-cyan-300 shadow-lg"
-                            src={content.profile_image_url}
-                            alt={content.brand_name ?? "Profile image"}
-                            width="300"
-                        />
-                    {/if}
-                </div>
-                <div class="mt-6 grid grid-cols-2 gap-4">
-                    <!-- Twitch -->
-                    <Card
-                        className="flex flex-col gap-1 rounded-2xl border p-5 transition-colors border-zinc-800 bg-neutral-900"
-                        href={`https://twitch.tv/${twitch?.login}`}
-                        target="_blank"
-                        rel="noreferrer"
-                        color={platformImageMap["twitch"].color}
-                    >
-                        <div
-                            class="flex flex-row justify-start items-start gap-3"
-                        >
-                            <img
-                                src={platformImageMap["twitch"].image}
-                                alt="Twitch"
-                                width="40"
-                            />
-                            <div>
-                                <span
-                                    class="text-sm font-semibold tracking-[0.08em] uppercase text-white"
-                                >
-                                    Twitch
-                                </span>
-                                <br />
-                                <span class="text-base"
-                                    >{twitch?.display_name}</span
-                                >
-                                <div
-                                    class="mt-2 text-2xl font-semibold tracking-tight"
-                                >
-                                    {formatCount(twitch?.followers)}
-                                    <span class="text-sm">followers</span>
-                                </div>
-                            </div>
-                        </div>
-                    </Card>
-                    {#each platforms as platform (platform.name)}
-                        <Card
-                            className="flex flex-col gap-1 rounded-2xl border p-5 transition-colors border-zinc-800 bg-neutral-900"
-                            href={platform.url}
-                            target="_blank"
-                            rel="noreferrer"
-                            color={platformImageMap[platform.name]?.color}
-                        >
-                            <div
-                                class="flex flex-row justify-start items-start gap-3"
-                            >
-                                <img
-                                    src={platformImageMap[platform.name].image}
-                                    alt="Twitch"
-                                    width="48"
-                                />
-                                <div>
-                                    <span
-                                        class="text-sm font-semibold tracking-[0.08em] uppercase text-white"
-                                    >
-                                        {platform.name}
-                                    </span>
-                                    <br />
-                                    <span class="text-base"
-                                        >{platform.handle}</span
-                                    >
-                                    <div
-                                        class="mt-2 text-2xl font-semibold tracking-tight"
-                                    >
-                                        {formatCount(platform.followers)}
-                                        <span class="text-sm">
-                                            {#if platform.name != "youtube"}
-                                                followers
-                                            {:else}
-                                                subscribers
-                                            {/if}
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </Card>
-                    {/each}
-                </div>
-            </div>
-        </div>
-        <!-- 2nd column -->
-        <div class="flex flex-col justify-start items-start gap-5">
-            <div
-                class="border-cyan-300 border-2 rounded-lg translate-y-2 w-fit"
-            >
-                <div
-                    class="-translate-x-20 px-5 py-5 text-4xl bg-cyan-300 text-black rounded-xl -translate-y-2"
-                >
-                    Hi there, I'm <br />
-                    <b>RythonDev</b>
-                </div>
-            </div>
-            <div class="mt-5">
-                <div class="text-white font-bold text-4xl mb-2">About Me</div>
-                <p>
-                    {content.about ?? ""}
-                </p>
-            </div>
-            <div>
-                <div class="text-white font-bold text-4xl mb-2">
-                    Collaborations
-                </div>
-                <Collabs />
-            </div>
-        </div>
-    </main>
+	<main class="grid grid-cols-2 max-w-6xl mx-auto pt-20 pb-10 gap-10">
+		<div class="">
+			<div class="px-5">
+				<div class="flex justify-end items-start">
+					{#if content.profile_image_url}
+						<img
+							class="shrink-0 rounded-xl object-cover shadow-cyan-300 shadow-lg"
+							src={content.profile_image_url}
+							alt={content.brand_name ?? "Profile image"}
+							width="300"
+						/>
+					{/if}
+				</div>
+				<div class="mt-6 grid grid-cols-2 gap-4">
+					<!-- Twitch -->
+					<Card
+						className="flex flex-col gap-1 rounded-2xl border p-5 transition-colors border-zinc-800 bg-neutral-900"
+						href={`https://twitch.tv/${twitch?.login}`}
+						target="_blank"
+						rel="noreferrer"
+						color={platformImageMap["twitch"].color}
+					>
+						<div
+							class="flex flex-row justify-start items-start gap-3"
+						>
+							<img
+								src={platformImageMap["twitch"].image}
+								alt="Twitch"
+								width="40"
+							/>
+							<div>
+								<span
+									class="text-sm font-semibold tracking-[0.08em] uppercase text-white"
+								>
+									Twitch
+								</span>
+								<br />
+								<span class="text-base"
+									>{twitch?.display_name}</span
+								>
+								<div
+									class="mt-2 text-2xl font-semibold tracking-tight"
+								>
+									{formatCount(twitch?.followers)}
+									<span class="text-sm">followers</span>
+								</div>
+							</div>
+						</div>
+					</Card>
+					{#each platforms as platform (platform.name)}
+						<Card
+							className="flex flex-col gap-1 rounded-2xl border p-5 transition-colors border-zinc-800 bg-neutral-900"
+							href={platform.url}
+							target="_blank"
+							rel="noreferrer"
+							color={platformImageMap[platform.name]?.color}
+						>
+							<div
+								class="flex flex-row justify-start items-start gap-3"
+							>
+								<img
+									src={platformImageMap[platform.name].image}
+									alt="Twitch"
+									width="48"
+								/>
+								<div>
+									<span
+										class="text-sm font-semibold tracking-[0.08em] uppercase text-white"
+									>
+										{platform.name}
+									</span>
+									<br />
+									<span class="text-base"
+										>{platform.handle}</span
+									>
+									<div
+										class="mt-2 text-2xl font-semibold tracking-tight"
+									>
+										{formatCount(platform.followers)}
+										<span class="text-sm">
+											{#if platform.name != "youtube"}
+												followers
+											{:else}
+												subscribers
+											{/if}
+										</span>
+									</div>
+								</div>
+							</div>
+						</Card>
+					{/each}
+				</div>
+			</div>
+		</div>
+		<!-- 2nd column -->
+		<div class="flex flex-col justify-start items-start gap-5">
+			<div
+				class="border-cyan-300 border-2 rounded-lg translate-y-2 w-fit"
+			>
+				<div
+					class="-translate-x-20 px-5 py-5 text-4xl bg-cyan-300 text-black rounded-xl -translate-y-2"
+				>
+					Hi there, I'm <br />
+					<b>RythonDev</b>
+				</div>
+				{#if content.tagline}
+					<p class="text-xl px-5 text-cyan-300 pb-2">
+						{content.tagline}
+					</p>
+				{/if}
+			</div>
+			<div class="mt-5">
+				<div class="text-white font-bold text-4xl mb-2">About Me</div>
+				<p>
+					{content.about ?? ""}
+				</p>
+			</div>
+			<div>
+				<div class="text-white font-bold text-4xl mb-2">
+					Collaborations
+				</div>
+				<Collabs />
+			</div>
+			{#if services.length}
+				<section class="w-full">
+					<div class="mb-3 text-4xl font-bold text-white">
+						Services
+					</div>
+					<div class="grid grid-cols-2 gap-x-8">
+						<ul
+							class="list-disc space-y-2 pl-5 marker:text-cyan-300"
+						>
+							{#each services.slice(0, 3) as service}
+								<li>{service}</li>
+							{/each}
+						</ul>
+						<ul
+							class="list-disc space-y-2 pl-5 marker:text-cyan-300"
+						>
+							{#each services.slice(3, 6) as service}
+								<li>{service}</li>
+							{/each}
+						</ul>
+					</div>
+				</section>
+			{/if}
+		</div>
+	</main>
 {/if}
 
 <style>
diff --git a/frontend/src/routes/MediaKit_copy.svelte b/frontend/src/routes/MediaKit_copy.svelte
index 488e77c..1598ccf 100644
--- a/frontend/src/routes/MediaKit_copy.svelte
+++ b/frontend/src/routes/MediaKit_copy.svelte
@@ -1,117 +1,147 @@
 <script lang="ts">
-  import { onMount } from 'svelte'
-  import { fetchMediaKit } from '../lib/api'
-  import type { MediaKit } from '../lib/types'
+	import { onMount } from "svelte";
+	import { fetchMediaKit } from "../lib/api";
+	import type { MediaKit } from "../lib/types";
 
-  let data = $state<MediaKit | null>(null)
-  let error = $state('')
+	let data = $state<MediaKit | null>(null);
+	let error = $state("");
 
-  onMount(async () => {
-    try {
-      data = await fetchMediaKit()
-    } catch (err) {
-      error = err instanceof Error ? err.message : 'Something went wrong'
-    }
-  })
+	onMount(async () => {
+		try {
+			data = await fetchMediaKit();
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Something went wrong";
+		}
+	});
 
-  const content = $derived(data?.content ?? {})
-  const platforms = $derived(data?.platforms ?? [])
-  const twitch = $derived(data?.twitch ?? null)
-  const twitchLogin = $derived(twitch?.login ?? '')
+	const content = $derived(data?.content ?? {});
+	const platforms = $derived(data?.platforms ?? []);
+	const twitch = $derived(data?.twitch ?? null);
+	const twitchLogin = $derived(twitch?.login ?? "");
 
-  function formatCount(value: number | undefined | null): string {
-    if (value == null) return '—'
-    if (value >= 1_000_000) {
-      const millions = value / 1_000_000
-      return `${millions >= 100 ? Math.round(millions) : millions.toFixed(1).replace(/\.0$/, '')}M`
-    }
-    if (value >= 1_000) {
-      const thousands = value / 1_000
-      return `${thousands >= 100 ? Math.round(thousands) : thousands.toFixed(1).replace(/\.0$/, '')}K`
-    }
-    return value.toLocaleString()
-  }
+	function formatCount(value: number | undefined | null): string {
+		if (value == null) return "—";
+		if (value >= 1_000_000) {
+			const millions = value / 1_000_000;
+			return `${millions >= 100 ? Math.round(millions) : millions.toFixed(1).replace(/\.0$/, "")}M`;
+		}
+		if (value >= 1_000) {
+			const thousands = value / 1_000;
+			return `${thousands >= 100 ? Math.round(thousands) : thousands.toFixed(1).replace(/\.0$/, "")}K`;
+		}
+		return value.toLocaleString();
+	}
 </script>
 
 {#if error}
-  <main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
-    <div class="mt-6 rounded-[10px] bg-red-600/10 px-4 py-3 text-sm text-red-600 dark:text-red-400">
-      {error}
-    </div>
-  </main>
+	<main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
+		<div
+			class="mt-6 rounded-[10px] bg-red-600/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"
+		>
+			{error}
+		</div>
+	</main>
 {:else if !data}
-  <main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
-    <div class="py-8 text-gray-500 dark:text-gray-400">Loading…</div>
-  </main>
+	<main class="mx-auto w-full max-w-230 px-6 pt-12 pb-18">
+		<div class="py-8 text-gray-500 dark:text-gray-400">Loading…</div>
+	</main>
 {:else}
-  <main class="grid grid-cols-2">
-    <div class="flex flex-col items-start gap-6 pt-6 pb-2 sm:flex-row sm:items-center">
-      {#if content.profile_image_url}
-        <img
-          class="h-24 w-24 shrink-0 rounded-md object-cover"
-          src={content.profile_image_url}
-          alt={content.brand_name ?? 'Profile image'}
-        />
-      {/if}
-      <div>
-        <h1 class="text-[clamp(36px,8vw,52px)] leading-[1.05] font-semibold tracking-tight">
-          {content.brand_name ?? 'RythonDev'}
-        </h1>
-        {#if content.tagline}
-          <p class="mt-4 text-xl text-gray-500 dark:text-gray-400">{content.tagline}</p>
-        {/if}
-      </div>
-    </div>
+	<main class="grid grid-cols-2">
+		<div
+			class="flex flex-col items-start gap-6 pt-6 pb-2 sm:flex-row sm:items-center"
+		>
+			{#if content.profile_image_url}
+				<img
+					class="h-24 w-24 shrink-0 rounded-md object-cover"
+					src={content.profile_image_url}
+					alt={content.brand_name ?? "Profile image"}
+				/>
+			{/if}
+			<div>
+				<h1
+					class="text-[clamp(36px,8vw,52px)] leading-[1.05] font-semibold tracking-tight"
+				>
+					{content.brand_name ?? "RythonDev"}
+				</h1>
+				{#if content.tagline}
+					<p class="mt-4 text-xl text-gray-500 dark:text-gray-400">
+						{content.tagline}
+					</p>
+				{/if}
+			</div>
+		</div>
 
-    <section class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800">
-      <h2 class="text-xl font-semibold tracking-tight">About</h2>
-      <p class="mt-4 max-w-160 text-lg leading-relaxed text-gray-500 dark:text-gray-400">
-        {content.about ?? ''}
-      </p>
-      {#if content.email}
-        <a
-          class="mt-4 inline-block text-violet-600 dark:text-violet-400"
-          href="mailto:{content.email}">{content.email}</a
-        >
-      {/if}
-    </section>
+		<section
+			class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800"
+		>
+			<h2 class="text-xl font-semibold tracking-tight">About</h2>
+			<p
+				class="mt-4 max-w-160 text-lg leading-relaxed text-gray-500 dark:text-gray-400"
+			>
+				{content.about ?? ""}
+			</p>
+			{#if content.email}
+				<a
+					class="mt-4 inline-block text-violet-600 dark:text-violet-400"
+					href="mailto:{content.email}">{content.email}</a
+				>
+			{/if}
+		</section>
 
-    <section class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800">
-      <h2 class="text-xl font-semibold tracking-tight">Twitch</h2>
-      {#if twitch?.configured && twitch?.found}
-        <div class="mt-6 grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-4">
-          <div
-            class="flex flex-col gap-2 rounded-2xl border border-gray-200 bg-neutral-50 p-5 dark:border-zinc-800 dark:bg-neutral-900"
-          >
-            <span class="text-sm text-gray-500 dark:text-gray-400">Followers</span>
-            <span class="text-3xl font-semibold tracking-tight">{formatCount(twitch?.followers)}</span>
-          </div>
-        </div>
-      {:else}
-        <p class="text-gray-500 dark:text-gray-400">{twitch?.message ?? 'Twitch stats are unavailable.'}</p>
-      {/if}
-    </section>
+		<section
+			class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800"
+		>
+			<h2 class="text-xl font-semibold tracking-tight">Twitch</h2>
+			{#if twitch?.configured && twitch?.found}
+				<div
+					class="mt-6 grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-4"
+				>
+					<div
+						class="flex flex-col gap-2 rounded-2xl border border-gray-200 bg-neutral-50 p-5 dark:border-zinc-800 dark:bg-neutral-900"
+					>
+						<span class="text-sm text-gray-500 dark:text-gray-400"
+							>Followers</span
+						>
+						<span class="text-3xl font-semibold tracking-tight"
+							>{formatCount(twitch?.followers)}</span
+						>
+					</div>
+				</div>
+			{:else}
+				<p class="text-gray-500 dark:text-gray-400">
+					{twitch?.message ?? "Twitch stats are unavailable."}
+				</p>
+			{/if}
+		</section>
 
-    <section class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800">
-      <h2 class="text-xl font-semibold tracking-tight">Platforms</h2>
-      <div class="mt-6 grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
-        {#each platforms as platform (platform.name)}
-          <a
-            class="flex flex-col gap-1 rounded-2xl border border-gray-200 bg-neutral-50 p-5 transition-colors hover:border-violet-600 dark:border-zinc-800 dark:bg-neutral-900 dark:hover:border-violet-400"
-            href={platform.url}
-            target="_blank"
-            rel="noreferrer"
-          >
-            <span class="text-sm font-semibold tracking-[0.08em] uppercase text-gray-500 dark:text-gray-400">
-              {platform.name}
-            </span>
-            <span class="text-base">{platform.handle}</span>
-            <span class="mt-2 text-2xl font-semibold tracking-tight">
-              {formatCount(platform.followers)} followers
-            </span>
-          </a>
-        {/each}
-      </div>
-    </section>
-  </main>
+		<section
+			class="mt-14 border-t border-gray-200 pt-8 dark:border-zinc-800"
+		>
+			<h2 class="text-xl font-semibold tracking-tight">Platforms</h2>
+			<div
+				class="mt-6 grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4"
+			>
+				{#each platforms as platform (platform.name)}
+					<a
+						class="flex flex-col gap-1 rounded-2xl border border-gray-200 bg-neutral-50 p-5 transition-colors hover:border-violet-600 dark:border-zinc-800 dark:bg-neutral-900 dark:hover:border-violet-400"
+						href={platform.url}
+						target="_blank"
+						rel="noreferrer"
+					>
+						<span
+							class="text-sm font-semibold tracking-[0.08em] uppercase text-gray-500 dark:text-gray-400"
+						>
+							{platform.name}
+						</span>
+						<span class="text-base">{platform.handle}</span>
+						<span
+							class="mt-2 text-2xl font-semibold tracking-tight"
+						>
+							{formatCount(platform.followers)} followers
+						</span>
+					</a>
+				{/each}
+			</div>
+		</section>
+	</main>
 {/if}