From f2eed91109200d0d6b74f74bfbda9cc827bdc090 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Fri, 9 May 2025 14:25:03 +0100
Subject: [PATCH] feat: cool age counter

---
 src/components/Age.svelte | 22 ++++++++++++++++++++++
 src/pages/index.astro     |  5 ++++-
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Age.svelte

diff --git a/src/components/Age.svelte b/src/components/Age.svelte
new file mode 100644
index 0000000..6b71e4e
--- /dev/null
+++ b/src/components/Age.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	let age = $state("");
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			// only people who can read code can see my birthday
+			const birthday = new Date("03/02/2010");
+			const currentDate = new Date();
+
+			const diffInMs = currentDate.getTime() - birthday.getTime();
+			const msInYear = 365.25 * 24 * 60 * 60 * 1000;
+
+			age = (diffInMs / msInYear).toFixed(14);
+		}, 10);
+
+		return () => clearInterval(interval);
+	});
+</script>
+
+<span class="font-mono">{age}</span>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a15e08d..6852df0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
 
+import Age from "../components/Age.svelte";
 import Projects from "../components/Projects.svelte";
 import Tools from "../components/Tools.astro";
 
@@ -11,7 +12,9 @@ import LocationIcon from "../assets/icons/location.svg";
 <Layout>
 	<section>
 		<legend>about</legend>
-		<p>Hey there, I'm <strong class="text-peach">trafficlunar</strong>. I'm a 15 year old self-proclaimed full-stack developer and sysadmin.</p>
+		<p>
+			Hey there, I'm <strong class="text-peach">trafficlunar</strong>. I'm a <Age client:only /> year old self-proclaimed full-stack developer and sysadmin.
+		</p>
 		<p>You can view what I'm currently doing by going <a href="/status" class="link">here</a>.</p>
 
 		<div class="flex gap-1 mt-2">