From d199345981b8bab8e28e6370d9b75fc061e26486 Mon Sep 17 00:00:00 2001
From: Radison Akerman <radison@me.com>
Date: Sun, 15 Jun 2025 23:24:01 -0700
Subject: [PATCH] feat: added changelog links

---
 nuxt/app.vue                        | 21 -------
 nuxt/assets/css/tailwind.css        | 20 +++---
 nuxt/components/Home/About.vue      | 12 ++--
 nuxt/components/Home/Experience.vue | 96 +++++++++++++++--------------
 nuxt/components/Home/Hero.vue       | 49 +++++++++++----
 nuxt/components/Home/Projects.vue   | 13 +++-
 nuxt/pages/index.vue                | 11 ++--
 7 files changed, 122 insertions(+), 100 deletions(-)

diff --git a/nuxt/app.vue b/nuxt/app.vue
index a939b78..03afee5 100644
--- a/nuxt/app.vue
+++ b/nuxt/app.vue
@@ -9,30 +9,11 @@
 
   <Meta charset="utf-8" />
 
-  <!-- Critical resource hints -->
   <Link rel="preconnect" href="https://imagedelivery.net" crossorigin />
   <Link rel="dns-prefetch" href="//imagedelivery.net" />
 
-  <!-- Preload critical fonts-->
-  <Link
-    rel="preload"
-    href="/fonts/SF-Pro-Display/SF-Pro-Display-Regular.woff2"
-    as="font"
-    type="font/woff2"
-    crossorigin="anonymous"
-  />
-  <Link
-    rel="preload"
-    href="/fonts/SF-Pro-Display/SF-Pro-Display-Medium.woff2"
-    as="font"
-    type="font/woff2"
-    crossorigin="anonymous"
-  />
-
-  <!-- Optimized favicon with multiple sizes -->
   <FaviconLinks id="cbeec7ce-7b51-4cc2-81bb-e72289777900" />
 
-  <!-- DNS prefetch for external domains -->
   <Link rel="dns-prefetch" href="//chickens.rakerman.com" />
   <Link rel="dns-prefetch" href="//vistapower.com" />
   <Link rel="dns-prefetch" href="//spacex.com" />
@@ -40,7 +21,6 @@
   <Link rel="dns-prefetch" href="//uic.edu" />
   <Link rel="dns-prefetch" href="//radicalplatforms.org" />
 
-  <!-- PWA theme colors -->
   <Meta name="theme-color" content="#08090a" />
   <Meta name="apple-mobile-web-app-capable" content="yes" />
   <Meta
@@ -49,7 +29,6 @@
   />
   <Meta name="apple-mobile-web-app-title" content="Radison" />
 
-  <!-- Performance hints -->
   <Meta name="format-detection" content="telephone=no" />
   <Meta
     name="viewport"
diff --git a/nuxt/assets/css/tailwind.css b/nuxt/assets/css/tailwind.css
index 5e1c6eb..407ddc2 100644
--- a/nuxt/assets/css/tailwind.css
+++ b/nuxt/assets/css/tailwind.css
@@ -8,7 +8,7 @@
     src: url("/fonts/SF-Pro-Display/SF-Pro-Display-Light.woff2") format("woff2");
     font-weight: 300;
     font-style: normal;
-    font-display: block;
+    font-display: swap;
   }
 
   @font-face {
@@ -17,7 +17,7 @@
       format("woff2");
     font-weight: 400;
     font-style: normal;
-    font-display: block;
+    font-display: swap;
   }
 
   @font-face {
@@ -26,7 +26,7 @@
       format("woff2");
     font-weight: 500;
     font-style: normal;
-    font-display: block;
+    font-display: swap;
   }
 
   @font-face {
@@ -35,7 +35,7 @@
       format("woff2");
     font-weight: 600;
     font-style: normal;
-    font-display: block;
+    font-display: swap;
   }
 
   @font-face {
@@ -43,7 +43,7 @@
     src: url("/fonts/SF-Pro-Display/SF-Pro-Display-Bold.woff2") format("woff2");
     font-weight: 700;
     font-style: normal;
-    font-display: block;
+    font-display: swap;
   }
 
   @font-face {
@@ -51,7 +51,7 @@
     src: url("/fonts/SF-Mono/SF-Mono-Regular.woff2") format("woff2");
     font-weight: 400;
     font-style: normal;
-    font-display: block;
+    font-display: swap;
   }
 
   @font-face {
@@ -60,7 +60,7 @@
       format("woff2");
     font-weight: 400;
     font-style: normal;
-    font-display: block;
+    font-display: swap;
   }
 
   @font-face {
@@ -69,7 +69,7 @@
       format("woff2");
     font-weight: 500;
     font-style: normal;
-    font-display: block;
+    font-display: swap;
   }
 
   @font-face {
@@ -78,7 +78,7 @@
       format("woff2");
     font-weight: 600;
     font-style: normal;
-    font-display: block;
+    font-display: swap;
   }
 
   @font-face {
@@ -87,7 +87,7 @@
       format("woff2");
     font-weight: 700;
     font-style: normal;
-    font-display: block;
+    font-display: swap;
   }
 
   html {
diff --git a/nuxt/components/Home/About.vue b/nuxt/components/Home/About.vue
index 3da608b..8d5e55a 100644
--- a/nuxt/components/Home/About.vue
+++ b/nuxt/components/Home/About.vue
@@ -33,7 +33,7 @@
 
         <!-- Expandable content container -->
         <div
-          class="max-h-[40rem] overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-[5000px] md:max-h-none fade-in-expand"
+          class="fade-in-expand max-h-[40rem] overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-[5000px] md:max-h-none"
         >
           <slot />
         </div>
@@ -44,7 +44,7 @@
         >
           <!-- Gradient fade -->
           <div
-            class="h-full w-full bg-gradient-to-b from-transparent via-base-100/80 to-black"
+            class="h-full w-full bg-gradient-to-b from-transparent via-base-100/80 to-base-100"
           ></div>
 
           <!-- Gradual blur with mask -->
@@ -54,14 +54,14 @@
               mask-image: linear-gradient(
                 to bottom,
                 transparent 0%,
-                black 50%,
-                black 100%
+                oklch(var(--b1)) 50%,
+                oklch(var(--b1)) 100%
               );
               -webkit-mask-image: linear-gradient(
                 to bottom,
                 transparent 0%,
-                black 50%,
-                black 100%
+                oklch(var(--b1)) 50%,
+                oklch(var(--b1)) 100%
               );
             "
           ></div>
diff --git a/nuxt/components/Home/Experience.vue b/nuxt/components/Home/Experience.vue
index 1509753..85f2928 100644
--- a/nuxt/components/Home/Experience.vue
+++ b/nuxt/components/Home/Experience.vue
@@ -20,61 +20,67 @@
       description="I'm obsessed with building true end-to-end technical infrastructure and user interfaces."
       fade
     >
-      <div>
-        <!-- Resume download link -->
-        <NuxtLink
-          to="/radison-akerman-resume.pdf"
-          target="_blank"
-          class="mr-3 mt-4 inline-flex items-center"
-        >
-          <ButtonPillOutlineLarge>
-            Resume
-            <ArrowUpRightIcon class="-mr-1 mb-1.5 ml-0.5 h-3.5 w-3.5" />
-          </ButtonPillOutlineLarge>
-        </NuxtLink>
+      <!-- Resume download link -->
+      <a
+        href="/radison-akerman-resume.pdf"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="mr-3 mt-4 inline-flex items-center"
+      >
+        <ButtonPillOutlineLarge>
+          Resume
+          <ArrowUpRightIcon class="-mr-1 mb-1.5 ml-0.5 h-3.5 w-3.5" />
+        </ButtonPillOutlineLarge>
+      </a>
 
-        <!-- CV download link -->
-        <NuxtLink
-          to="/radison-akerman-cv.pdf"
-          target="_blank"
-          class="mt-4 inline-flex items-center"
-        >
-          <ButtonPillOutlineLarge>
-            Curriculum Vitae
-            <ArrowUpRightIcon class="-mr-1 mb-1.5 ml-0.5 h-3.5 w-3.5" />
-          </ButtonPillOutlineLarge>
-        </NuxtLink>
-      </div>
+      <!-- CV download link -->
+      <a
+        href="/radison-akerman-cv.pdf"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="mt-4 inline-flex items-center"
+      >
+        <ButtonPillOutlineLarge>
+          Curriculum Vitae
+          <ArrowUpRightIcon class="-mr-1 mb-1.5 ml-0.5 h-3.5 w-3.5" />
+        </ButtonPillOutlineLarge>
+      </a>
     </Header>
 
     <div class="mt-4">
       <!-- Floating resume preview (desktop only) -->
-      <div
-        class="relative z-10 float-right hidden max-w-md pb-5 pl-10 pt-[4.8px] lg:block"
-      >
-        <NuxtLink href="/radison-akerman-resume.pdf" target="_blank">
-          <!-- Resume preview container with styling -->
-          <div
-            class="-m-2 rounded-xl bg-base-200/60 p-2 ring-1 ring-inset ring-primary/10 lg:-m-4 lg:rounded-2xl lg:p-3"
+      <ClientOnly fallback-tag="div">
+        <div
+          class="relative z-10 float-right hidden max-w-md pb-5 pl-10 pt-[4.8px] lg:block"
+        >
+          <a
+            href="/radison-akerman-resume.pdf"
+            target="_blank"
+            rel="noopener noreferrer"
           >
+            <!-- Resume preview container with styling -->
             <div
-              data-theme="dark"
-              class="rounded-lg bg-base-200 p-6 shadow-2xl ring-1 ring-accent/10"
+              class="-m-2 rounded-xl bg-base-200/60 p-2 ring-1 ring-inset ring-primary/10 lg:-m-4 lg:rounded-2xl lg:p-3"
             >
-              <!-- Scaled resume component -->
-              <SummarizeResume
-                class="h-[30.3rem] origin-top-left scale-[41%]"
-              />
+              <div
+                data-theme="dark"
+                class="rounded-lg bg-base-200 p-6 shadow-2xl ring-1 ring-accent/10"
+              >
+                <!-- Scaled resume component -->
+                <SummarizeResume
+                  class="h-[30.3rem] origin-top-left scale-[41%]"
+                />
+              </div>
             </div>
-          </div>
 
-          <!-- Click instruction text -->
-          <div class="flex justify-center pt-6 text-xs text-neutral">
-            <CursorArrowRaysIcon class="h-4 pr-0.5" />
-            <i>Click to view a slick, light-mode version of this resume!</i>
-          </div>
-        </NuxtLink>
-      </div>
+            <!-- Click instruction text -->
+            <div class="flex justify-center pt-6 text-xs text-neutral">
+              <CursorArrowRaysIcon class="h-4 pr-0.5" />
+              <i>Click to view a slick, light-mode version of this resume!</i>
+            </div>
+          </a>
+        </div>
+      </ClientOnly>
 
       <!-- Professional disciplines section -->
       <div class="z-0">
diff --git a/nuxt/components/Home/Hero.vue b/nuxt/components/Home/Hero.vue
index 2ad9057..3e62f9e 100644
--- a/nuxt/components/Home/Hero.vue
+++ b/nuxt/components/Home/Hero.vue
@@ -3,7 +3,8 @@
   Primary landing component with introduction, portrait, and call-to-action button
   
   Props:
-  - buttonText (string, optional): Text for the call-to-action button
+  - buttonText (string, optional): Text for the call-to-action button (desktop)
+  - buttonTextShort (string, optional): Short text for mobile call-to-action button
   - buttonUrl (string, optional): URL for the call-to-action button
   
   Features:
@@ -60,13 +61,19 @@
 
           <!-- Call-to-action button -->
           <div
-            class="fade-in-hero mb-2 hidden items-center py-1 text-left text-accent sm:flex sm:py-2"
+            class="fade-in-hero mb-2 mt-1 flex items-center py-1 text-left text-accent sm:py-2"
             :style="{ 'transition-delay': (pageLoaded ? 0 : 600) + 'ms' }"
-            v-if="buttonText"
+            v-if="buttonText || buttonTextShort"
           >
             <NuxtLink :to="buttonUrl">
               <ButtonPillOutlineLarge>
-                {{ buttonText }}
+                <!-- Show short text on mobile, long text on desktop -->
+                <span class="sm:hidden">{{
+                  buttonTextShort || buttonText
+                }}</span>
+                <span class="hidden sm:inline">{{
+                  buttonText || buttonTextShort
+                }}</span>
                 <ChevronRightIcon class="-mr-1 h-5 w-5" />
               </ButtonPillOutlineLarge>
             </NuxtLink>
@@ -81,14 +88,32 @@
 import { ref, onMounted } from "vue";
 import { ChevronRightIcon } from "@heroicons/vue/16/solid";
 
-interface Props {
-  buttonText?: string;
-  buttonUrl?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  buttonText: undefined,
-  buttonUrl: undefined,
+// Component props with validation
+const props = defineProps({
+  buttonText: {
+    type: String,
+    default: undefined,
+    validator: (value: string | undefined) => {
+      if (!value) return true;
+      return value.trim().length > 0;
+    },
+  },
+  buttonTextShort: {
+    type: String,
+    default: undefined,
+    validator: (value: string | undefined) => {
+      if (!value) return true;
+      return value.trim().length > 0;
+    },
+  },
+  buttonUrl: {
+    type: String,
+    default: undefined,
+    validator: (value: string | undefined) => {
+      if (!value) return true;
+      return value.trim().length > 0;
+    },
+  },
 });
 
 const pageLoaded = ref(false);
diff --git a/nuxt/components/Home/Projects.vue b/nuxt/components/Home/Projects.vue
index 7213671..7be8bb1 100644
--- a/nuxt/components/Home/Projects.vue
+++ b/nuxt/components/Home/Projects.vue
@@ -22,7 +22,17 @@
         title="Projects make perfect."
         punchline="From prototype to powerhouse."
         description="Every project serves as a foundational learning experience, yielding pixel-perfect applications that solve real problems."
-      />
+      >
+        <NuxtLink
+          to="https://changelog.radison.io"
+          class="mt-4 inline-flex items-center"
+        >
+          <ButtonPillOutlineLarge>
+            Explore Changelog
+            <ArrowUpRightIcon class="-mr-1 mb-1.5 ml-0.5 h-3.5 w-3.5" />
+          </ButtonPillOutlineLarge>
+        </NuxtLink>
+      </Header>
       <ProjectsFeatured />
 
       <!-- Noteworthy projects header with view toggle -->
@@ -74,6 +84,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { Squares2X2Icon, Bars4Icon } from "@heroicons/vue/20/solid";
+import { ArrowUpRightIcon } from "@heroicons/vue/16/solid";
 import { z } from "zod";
 import { Project } from "~/summarize/models/Project";
 
diff --git a/nuxt/pages/index.vue b/nuxt/pages/index.vue
index efd4e75..1275ab9 100644
--- a/nuxt/pages/index.vue
+++ b/nuxt/pages/index.vue
@@ -21,21 +21,22 @@ defineOgImage({
 
 // Lazy load below-the-fold components for better performance
 const LazyHomeExperience = defineAsyncComponent(
-  () => import("~/components/Home/Experience.vue"),
+  () => import("../components/Home/Experience.vue"),
 );
 const LazyHomeProjects = defineAsyncComponent(
-  () => import("~/components/Home/Projects.vue"),
+  () => import("../components/Home/Projects.vue"),
 );
 const LazyHomeContact = defineAsyncComponent(
-  () => import("~/components/Home/Contact.vue"),
+  () => import("../components/Home/Contact.vue"),
 );
 </script>
 
 <template>
   <div>
     <HomeHero
-      buttonText="Exploding Chickens: Celebrating 1,750+ Games Played!"
-      buttonUrl="https://chickens.rakerman.com"
+      buttonText="Explore Changelog: What & How I Build"
+      buttonTextShort="Explore Changelog: How I Build"
+      buttonUrl="https://changelog.radison.io"
     >
       I lead and build exceptional software experiences. Currently, I'm
       responsible for all software initiatives at