Add auto updating age to website

src/pages/index.astro

@@ -5,6 +5,13 @@ import Greeting from "../components/Greeting";
 import Social from "../components/Social.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 const pageTitle = "Aria";
+
+const currentDate = new Date();
+const ariaBirthDate = new Date("2002-05-07");
+	
+const seconds = (currentDate.getTime() - ariaBirthDate.getTime()) / 1000;
+	
+const age = seconds/31556952;
 ---
 
 <BaseLayout pageTitle={pageTitle}>
@@ -12,7 +19,7 @@ const pageTitle = "Aria";
         <main>
             <h1 class="text-4xl">Welcome!~</h1>
             <p>
-                I'm Aria, a 22 year old software developer and electronics
+                I'm Aria, a <span class="tooltip">{Math.floor(age)}<span class="tooltiptext"><nobr>{age.toFixed(8)} years to be exact!</nobr></span></span> year old software developer and electronics
                 repair tech out of rural <span style="color: #D4F7CF;"
                     >Australia <span
                         class="backdrop-brightness-200 px-1 text-2xl rounded"
@@ -29,4 +36,23 @@ const pageTitle = "Aria";
         <h1>Socials:</h1>
         <Social />
     </Partition>
+    <script>
+        setInterval(() => {
+        	const currentDate = new Date();
+			const ariaBirthDate = new Date("2002-05-07");
+	
+			const seconds = (currentDate.getTime() - ariaBirthDate.getTime()) / 1000;
+	
+			const age = seconds/31556952;
+	
+			const ageElem = document.querySelector('.tooltip');
+
+            ageElem!.outerHTML = `<span class="tooltip">${Math.floor(age)}<span class="tooltiptext"><nobr>${age.toFixed(8)} years to be exact!</nobr></span></span>`;
+        }, 1000);
+    </script>
+
+<style is:inline>
+
+    </style>
 </BaseLayout>
+

src/styles/aria.css

@@ -13,7 +13,7 @@
 		format("opentype"), url("/static/fonts/comic shanns 2.ttf")
 		format("truetype"); */
 	font-display: swap;
-	}
+}
 
 @font-face {
 	font-family: "Comic Mono";
@@ -72,7 +72,7 @@ a {
 }
 
 a:hover {
-	text-decoration-color: #F5A8B7;
+	text-decoration-color: #f5a8b7;
 	transition: text-decoration-color 0.25s;
 }
 
@@ -132,3 +132,34 @@ a:hover {
 	height: 1em;
 	vertical-align: -0.125em;
 }
+
+.tooltip {
+	position: relative;
+	display: inline-block;
+	text-decoration: underline 2px;
+	text-underline-offset: 2px;
+	text-decoration-color: #fff;
+}
+
+.tooltip:hover {
+	text-decoration-color: #f5a8b7;
+	transition: text-decoration-color 0.25s;
+}
+
+.tooltip .tooltiptext {
+	visibility: hidden;
+	width: auto;
+	background-color: black;
+	color: #fff;
+	text-align: center;
+	border-radius: 6px;
+	padding: 5px 0;
+
+	/* Position the tooltip */
+	position: absolute;
+	z-index: 1;
+}
+
+.tooltip:hover .tooltiptext {
+	visibility: visible;
+}