updates

package-lock.json

@@ -19,6 +19,7 @@
         "@typescript-eslint/eslint-plugin": "^7.3.1",
         "@typescript-eslint/parser": "^7.3.1",
         "astro": "^4.5.6",
+        "canvas-confetti": "^1.9.3",
         "clsx": "^2.1.0",
         "eslint": "^8.57.0",
         "eslint-plugin-astro": "^0.32.0",
@@ -3134,6 +3135,16 @@
         }
       ]
     },
+    "node_modules/canvas-confetti": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.3.tgz",
+      "integrity": "sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==",
+      "license": "ISC",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
+      }
+    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",

package.json

@@ -24,6 +24,7 @@
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
     "astro": "^4.5.6",
+    "canvas-confetti": "^1.9.3",
     "clsx": "^2.1.0",
     "eslint": "^8.57.0",
     "eslint-plugin-astro": "^0.32.0",

src/components/EmojiScroller.astro

@@ -0,0 +1,20 @@
+<script>
+    const update_interval = 10 * 1000;
+    const emojis = ["👋", "🚀", "🛸"];
+    let idx = -1;
+
+    function update_emoji() {
+        const emoji_element = document.getElementById("emoji");
+        idx += 1;
+
+        if (idx == emojis.length) idx = 0;
+        if (emoji_element) emoji_element.innerHTML = emojis[idx];
+    }
+
+    setInterval(update_emoji, update_interval);
+    update_emoji();
+
+
+</script>
+
+<span class="text-4xl" id="emoji">👋</span>

src/components/Footer.astro

@@ -4,7 +4,7 @@ import { SITE } from "@consts";
 import BackToTop from "@components/BackToTop.astro";
 ---
 
-<footer class="animate">
+<footer class="animate border-b-4">
   <Container>
     <div class="relative">
       <div class="absolute right-0 -top-20">

src/components/Link.astro

@@ -5,9 +5,10 @@ type Props = {
   href: string;
   external?: boolean;
   underline?: boolean;
+  confetti?: boolean;
 }
 
-const { href, external, underline = true, ...rest } = Astro.props;
+const { href, external, underline = true, confetti, ...rest } = Astro.props;
 ---
 
 <a 

src/content/work/standard.md

@@ -1,6 +0,0 @@
----
-company: "Standard"
-role: "Software Engineer | Director"
-dateStart: "03/16/2018"
-dateEnd: "present"
----

src/pages/blog/index.astro

@@ -28,7 +28,7 @@ const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a));
 <PageLayout title={BLOG.TITLE} description={BLOG.DESCRIPTION}>
   <Container>
     <div class="space-y-10">
-      <div class="animate font-semibold text-black dark:text-white">
+      <div class="animate font-semibold text-black dark:text-white text-4xl font-serif">
         Blog
       </div>
       <div class="space-y-4">

src/pages/index.astro

@@ -6,6 +6,7 @@ import ArrowCard from "@components/ArrowCard.astro";
 import Link from "@components/Link.astro";
 import { dateRange } from "@lib/utils";
 import { SITE, HOME, SOCIALS } from "@consts";
+import EmojiScroller from "@components/EmojiScroller.astro";
 
 const blog = (await getCollection("blog"))
   .filter(post => !post.data.draft)
@@ -30,16 +31,17 @@ const work = await Promise.all(
 
 ---
 
+
 <PageLayout title={HOME.TITLE} description={HOME.DESCRIPTION}>
   <Container>
     <h4 class="animate font-semibold text-black dark:text-white text-4xl font-serif">
-      Hi, I'm Michael <span class="text-4xl">👋🏻</span> 
+      Hi, I'm Michael <EmojiScroller client:load transition:persist/>
     </h4>
     <div class="space-y-16">
       <section>
         <article class="space-y-4">
           <p class="animate">
-            I'm a lead software engineer at the University of Canterbury, working on <Link href="https://uconline.ac.nz" external>Tuihono UC | UC Online</Link>.
+            I'm a software engineer at the University of Canterbury, working on <Link href="https://uconline.ac.nz" external>Tuihono UC | UC Online</Link>.
             
             I specialize in full-stack development. While my primary expertise is in software engineering, I also have a strong interest in cloud infrastructure and DevOps. Based in Christchurch, New Zealand
             <br/><br/>
@@ -133,7 +135,7 @@ const work = await Promise.all(
             </li>
           ))}
           <li class="line-clamp-1">
-            <Link href={`mailto:${SITE.EMAIL}`} aria-label={`Email ${SITE.NAME}`}>
+            <Link href={`mailto:${SITE.EMAIL}`} aria-label={`Email ${SITE.NAME}`} confetti>
               {SITE.EMAIL}
             </Link>
           </li>

src/pages/projects/index.astro

@@ -13,7 +13,7 @@ const projects = (await getCollection("projects"))
 <PageLayout title={PROJECTS.TITLE} description={PROJECTS.DESCRIPTION}>
   <Container>
     <div class="space-y-10">
-      <div class="animate font-semibold text-black dark:text-white">
+      <div class="animate font-semibold text-black dark:text-white text-4xl font-serif">
         Projects
       </div>
       <ul class="animate flex flex-col gap-4">

src/pages/work/index.astro

@@ -19,7 +19,7 @@ const work = await Promise.all(
 <PageLayout title={WORK.TITLE} description={WORK.DESCRIPTION}>
   <Container>
     <div class="space-y-10">
-      <div class="animate font-semibold text-black dark:text-white">
+      <div class="animate font-semibold text-black dark:text-white text-4xl font-serif">
         Work
       </div>
       <ul class="flex flex-col space-y-4">