From 04d6e0349f9725ec31de7e31a112fc49dbfdd60a Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Mon, 8 Sep 2025 19:23:38 +0100
Subject: [PATCH] added seconds alive to about page

---
 src/components/SecondsAlive.astro | 38 +++++++++++++++++++++++++++++++
 src/pages/about.astro             |  6 +++--
 2 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SecondsAlive.astro

diff --git a/src/components/SecondsAlive.astro b/src/components/SecondsAlive.astro
new file mode 100644
index 00000000..f599058d
--- /dev/null
+++ b/src/components/SecondsAlive.astro
@@ -0,0 +1,38 @@
+<span id="seconds-alive"></span>
+
+<script>
+    const birthDate = new Date("2004-11-04");
+    const birthDateSecs = Math.floor(birthDate.getTime() / 1000);
+    const currentTimeSecs = Math.floor(new Date().getTime() / 1000);
+
+    let secsElapsed = 0;
+
+    function updateSecondsAlive() {
+        let years = Math.floor(
+            (currentTimeSecs - birthDateSecs + secsElapsed) /
+                (60 * 60 * 24 * 365)
+        );
+        let days = Math.floor(
+            (currentTimeSecs - birthDateSecs + secsElapsed) / (60 * 60 * 24)
+        );
+        let hours = Math.floor(
+            (currentTimeSecs - birthDateSecs + secsElapsed) / (60 * 60)
+        );
+        let minutes = Math.floor(
+            (currentTimeSecs - birthDateSecs + secsElapsed) / 60
+        );
+        let seconds = currentTimeSecs - birthDateSecs + secsElapsed;
+
+        const element = document.getElementById("seconds-alive");
+        if (element) {
+            element.innerText = `AGE: ${years}y or ${days}d or ${hours}h or ${minutes}m or ${seconds}s (${birthDate.toDateString()})`;
+        }
+    }
+
+    updateSecondsAlive();
+
+    setInterval(() => {
+        secsElapsed++;
+        updateSecondsAlive();
+    }, 1000);
+</script>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index a591c435..487d507b 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,7 +1,9 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import SecondsAlive from "../components/SecondsAlive.astro";
 ---
 
 <Layout currentPage="about">
-	<h1 class="text-md">about page</h1>
-</Layout>
\ No newline at end of file
+    <h1 class="text-md">about page</h1>
+    <SecondsAlive client:react />
+</Layout>