make age dynamic

package.json

@@ -14,6 +14,7 @@
 	"type": "module",
 	"dependencies": {
 		"@spotify/web-api-ts-sdk": "^1.1.2",
+		"date-fns": "^2.30.0",
 		"sk-lanyard": "^0.2.7"
 	},
 	"devDependencies": {

src/lib/stores.ts

@@ -1,9 +1,21 @@
+import { browser } from '$app/environment';
 import { readable } from 'svelte/store';
 
 export const now = readable(new Date(), set => {
 	const interval = setInterval(() => {
 		set(new Date());
-	}, 100);
+	}, 1000);
 
 	return () => clearInterval(interval);
 });
+
+export const fastNow = readable(new Date(), set => {
+	if (!browser) return;
+
+	let id = requestAnimationFrame(function update() {
+		set(new Date());
+		id = requestAnimationFrame(update);
+	});
+
+	return () => cancelAnimationFrame(id);
+});

src/routes/(home)/+page.svelte

@@ -1,4 +1,8 @@
 <script lang="ts">
+	import differenceInYears from 'date-fns/differenceInYears';
+
+	import { now } from '$lib/stores';
+
 	import Clock from './Clock.svelte';
 	import DiscordInfo from './DiscordInfo.svelte';
 	import SocialLink from './SocialLink.svelte';
@@ -11,6 +15,10 @@
 	import Spotify from '$lib/components/icons/Spotify.svelte';
 	import Twitter from '$lib/components/icons/Twitter.svelte';
 	import Meta from '$lib/components/Meta.svelte';
+
+	const birthday = new Date('2006-05-17T10:06:00.000Z');
+
+	$: age = differenceInYears($now, birthday);
 </script>
 
 <Meta title="Daniel" description="My portfolio and personal website." />
@@ -19,7 +27,9 @@
 	<h1 class="text-6xl font-black">Daniel!</h1>
 
 	<p class="mt-4 text-gray-400">
-		Hey! I'm <b>Daniel</b>, a 17-year-old developer from
+		Hey! I'm <b>Daniel</b>,
+		{age === 18 ? 'an' : 'a'}
+		{age}-year-old developer from
 		<b>Atlanta, Georgia</b>.
 	</p>
 

src/routes/(home)/SpotifyInfo.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import type { NowPlayingResponse } from '$lib/types';
+	import { fastNow } from '$lib/stores';
 
 	import MusicalNote from '$lib/components/icons/MusicalNote.svelte';
 	import Pause from '$lib/components/icons/Pause.svelte';
 	import Play from '$lib/components/icons/Play.svelte';
-	import { now } from '$lib/stores';
 
 	let data: NowPlayingResponse | undefined;
 	let lastFetched = 0;
@@ -31,7 +31,7 @@
 
 	$: progress = data?.track
 		? clamp(
-				(data.progessMs + ($now.getTime() - lastFetched)) /
+				(data.progessMs + ($fastNow.getTime() - lastFetched)) /
 					data.track.duration_ms
 		  )
 		: 0;