Add in Graduation Countdown

src/components/countdown.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  const GRADUATION = new Date(1753797600000).valueOf();
+  let interval: NodeJS.Timer;
+
+  let timeTo = Math.abs(GRADUATION - Date.now().valueOf()) / 1000;
+
+  // Calculate time remaining from milliseconds to graduation (30 Jul, 2025)
+  $: years = Math.floor(timeTo / 31556926);
+  $: months = Math.floor(timeTo / 2629743) % 12;
+  $: days = Math.floor(timeTo / 86400) % 30;
+  $: hours = Math.floor(timeTo / 3600) % 24;
+  $: minutes = Math.floor(timeTo / 60) % 60;
+  $: seconds = Math.floor(timeTo % 60);
+
+  // Update the timeTo variable every 1000 milliseconds
+  // Don't go past 0 though! Stop the updates afterwards
+  function update() {
+    timeTo = (GRADUATION - Date.now().valueOf()) / 1000;
+    if (timeTo <= 0) {
+      clearInterval(interval);
+      timeTo = 0;
+    }
+  }
+
+  onMount(() => {
+    // Create a timer
+    interval = setInterval(update, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  });
+</script>
+
+<h3 class="p-5 text-4xl text-center">Time to Graduation</h3>
+<div class="grid grid-flow-col gap-5 text-center auto-cols-max justify-center">
+  <div class="flex flex-col">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:{years};"></span>
+    </span>
+    years
+  </div>
+  <div class="flex flex-col">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:{months};"></span>
+    </span>
+    months
+  </div>
+  <div class="flex flex-col">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:{days};"></span>
+    </span>
+    days
+  </div>
+  <div class="flex flex-col">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:{hours};"></span>
+    </span>
+    hours
+  </div>
+  <div class="flex flex-col">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:{minutes};"></span>
+    </span>
+    minutes
+  </div>
+  <div class="flex flex-col">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:{seconds};"></span>
+    </span>
+    seconds
+  </div>
+</div>

src/routes/portfolio/+page.svelte

@@ -1,12 +1,13 @@
 <script>
   import Divider from "../../components/divider.svelte";
+  import Countdown from "../../components/countdown.svelte";
 </script>
 
 <div
   class="hero height-minus-nav bg-gradient-to-br from-primary from-10% to-accent to-80%"
 >
   <div class="hero-overlay bg-opacity-30"></div>
-  <div class="hero-content text-left text-neutral-content flex-col lg:flex-row">
+  <div class="hero-content text-left text-accent-content flex-col lg:flex-row">
     <div class="skeleton w-48 h-64 shadow-2xl max-w-sm"></div>
     <div>
       <h1 class="mb-6 text-6xl font-bold">
@@ -17,7 +18,7 @@
         neat things.
       </p>
     </div>
-    <div class="hidden md:flex divider divider-horizontal divider-start">
+    <div class="hidden lg:flex divider divider-horizontal divider-start">
       Scoll
     </div>
   </div>
@@ -35,3 +36,6 @@
 </p>
 
 <Divider />
+
+<h1 class="my-6 text-6xl text-center text-base-content font-bold">Education</h1>
+<Countdown />