From d4bb1fc126f9a8ce6fcdc23e33aa1bad8cf7e671 Mon Sep 17 00:00:00 2001
From: Radison Akerman <radison@me.com>
Date: Thu, 11 Apr 2024 04:35:14 -0500
Subject: [PATCH] feat: polished home hero, added scroll indicators

---
 nuxt/components/Navbar.vue             |   2 +-
 nuxt/components/content/DocsHero.vue   |   9 ++-
 nuxt/components/content/DocsNavbar.vue | 108 -------------------------
 nuxt/components/content/HomeHero.vue   |  17 ++--
 nuxt/layouts/home.vue                  |   2 +-
 5 files changed, 22 insertions(+), 116 deletions(-)
 delete mode 100644 nuxt/components/content/DocsNavbar.vue

diff --git a/nuxt/components/Navbar.vue b/nuxt/components/Navbar.vue
index a48ecb7..d7d6f6b 100644
--- a/nuxt/components/Navbar.vue
+++ b/nuxt/components/Navbar.vue
@@ -16,7 +16,7 @@
           <div class="flex w-full items-center justify-between md:w-auto">
             <NuxtLink to="/" class="fade-in-nav flex items-center">
               <NuxtImg
-                class="mb-[1px] h-[1.3rem] w-auto"
+                class="mb-[1.5px] h-[1.3rem] w-auto"
                 src="https://imagedelivery.net/5zM6Rdl2uV8Hmr9WxRh20g/874f0866-25fb-4224-cc22-205d60921800/sm"
                 alt="RAkerman Logo"
               />
diff --git a/nuxt/components/content/DocsHero.vue b/nuxt/components/content/DocsHero.vue
index b468aa3..9b6ede9 100644
--- a/nuxt/components/content/DocsHero.vue
+++ b/nuxt/components/content/DocsHero.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto flex min-h-screen items-center" id="hero">
+  <div class="container relative mx-auto flex min-h-screen items-center" id="hero">
     <div class="w-full">
       <h6
         class="fade-in-hero pb-1 pt-1 text-left text-5xl font-bold text-primary md:text-6xl"
@@ -14,5 +14,12 @@
         <ContentSlot :use="$slots.desc" unwrap="p" />
       </h6>
     </div>
+    <div class="absolute bottom-[7%] left-0 right-0 w-full flex justify-center">
+      <ChevronDoubleDownIcon class="text-neutral h-7 w-7 md:h-8 md:w-8" />
+    </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import {ChevronDoubleDownIcon} from "@heroicons/vue/24/solid";
+</script>
\ No newline at end of file
diff --git a/nuxt/components/content/DocsNavbar.vue b/nuxt/components/content/DocsNavbar.vue
deleted file mode 100644
index 6e280bf..0000000
--- a/nuxt/components/content/DocsNavbar.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <div
-    class="fixed left-0 right-0 top-0 z-50 border-b-[1px] border-accent/[0.15] bg-base-200/[0.8] backdrop-blur-xl backdrop-saturate-150 transition delay-100 duration-300 ease-in"
-  >
-    <div class="mx-auto max-w-7xl px-4 py-2 sm:px-6">
-      <nav
-        class="relative flex items-center justify-between text-[13px] sm:h-10 md:justify-center"
-      >
-        <div
-          class="flex flex-1 items-center md:absolute md:inset-y-0 md:left-0"
-        >
-          <div class="flex w-full items-center justify-between md:w-auto">
-            <NuxtLink to="/" class="fade-in-nav">
-              <span class="sr-only">RAkerman</span>
-              <NuxtImg
-                class="h-5 w-auto"
-                src="https://imagedelivery.net/5zM6Rdl2uV8Hmr9WxRh20g/7ed7598b-5520-4e18-5159-daa458739b00/sm"
-                alt="RAkerman Logo"
-              />
-            </NuxtLink>
-            <div
-              class="fade-in-nav my-1 -mr-1 flex items-center md:hidden"
-              :style="{ 'transition-delay': 100 + 'ms' }"
-            >
-              <NuxtLink href="/radison-akerman-resume.pdf" target="_blank">
-                <ButtonPillSolidSmall>Resume</ButtonPillSolidSmall>
-              </NuxtLink>
-            </div>
-          </div>
-        </div>
-        <div
-          class="hidden md:absolute md:inset-y-0 md:right-0 md:flex md:items-center md:justify-end"
-        >
-          <div class="space-x-9 pr-7">
-            <NuxtLink
-              v-for="(item, index) in navigation"
-              :key="item.name"
-              :to="item.href"
-              :style="{
-                'transition-delay': (navLoaded ? 50 : index * 100 + 300) + 'ms',
-              }"
-              class="fade-in-nav text-accent hover:text-secondary"
-              :class="{ 'text-primary': '#' + activeSection === item.href }"
-            >
-              {{ item.name }}
-            </NuxtLink>
-          </div>
-          <span
-            class="fade-in-nav inline-flex"
-            :style="{
-              'transition-delay':
-                (navLoaded ? 50 : navigation.length * 100 + 300) + 'ms',
-            }"
-          >
-            <NuxtLink href="/">
-              <ButtonPillSolidSmall>Home</ButtonPillSolidSmall>
-            </NuxtLink>
-          </span>
-        </div>
-      </nav>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const navigation = [];
-
-const activeSection = ref("hero");
-const navLoaded = ref(false);
-
-let observer = null;
-let elements = [];
-
-onMounted(() => {
-  const targets = [{ href: "#hero" }];
-
-  observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          activeSection.value = entry.target.id;
-        }
-      });
-    },
-    {
-      //      threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
-      rootMargin: "-300px",
-    },
-  );
-
-  elements = targets.map((target) => {
-    const el = document.querySelector(target.href);
-    observer.observe(el);
-    return el;
-  });
-
-  setTimeout(
-    () => {
-      navLoaded.value = true;
-    },
-    navigation.length * 100 + 300,
-  );
-});
-
-onBeforeUnmount(() => {
-  elements.forEach((el) => observer.unobserve(el));
-});
-</script>
diff --git a/nuxt/components/content/HomeHero.vue b/nuxt/components/content/HomeHero.vue
index 5c7548f..d3c9019 100644
--- a/nuxt/components/content/HomeHero.vue
+++ b/nuxt/components/content/HomeHero.vue
@@ -18,13 +18,13 @@
           />
           <div class="flex w-full flex-col justify-center overflow-y-hidden">
             <h6
-              class="fade-in-hero py-2 text-left font-mono text-lg leading-normal text-secondary md:text-xl"
+              class="fade-in-hero py-1 text-left font-mono text-[17px] leading-normal text-secondary md:py-2 md:text-xl"
               :style="{ 'transition-delay': 300 + 'ms' }"
             >
               Hi there, my name is
             </h6>
             <h6
-              class="fade-in-hero pb-1 pt-1 text-left text-4xl font-bold leading-tight text-primary md:text-6xl"
+              class="fade-in-hero py-0 text-left text-4xl font-bold leading-tight text-primary md:py-1 md:text-6xl"
               :style="{ 'transition-delay': 400 + 'ms' }"
             >
               Radison Akerman.
@@ -37,22 +37,29 @@
             </h6>
             <NuxtLink
               to="https://chickens.rakerman.com"
-              class="fade-in-hero flex max-w-2xl items-center py-2"
+              class="fade-in-hero flex max-w-2xl text-left hover:text-accent items-center py-1 sm:py-2 text-warning"
               :style="{ 'transition-delay': 600 + 'ms' }"
             >
               <ButtonPillOutlineLarge
-                class="border-warning text-warning hover:border-accent hover:text-accent"
-                >Exploding Chickens: Celebrating 1,250+ Games Played!
+                class="border-warning hover:border-accent hidden sm:flex"
+                >Exploding Chickens: Celebrating 1,400+ Games Played!
                 <ChevronRightIcon class="-mr-1 h-5 w-5" />
               </ButtonPillOutlineLarge>
+<!--              <h6 class="overflow-hidden text-[1.1rem] leading-normal sm:hidden">-->
+<!--                Exploding Chickens: Celebrating 1,400+ Games Played!-->
+<!--              </h6>-->
             </NuxtLink>
           </div>
         </div>
       </div>
     </div>
+    <div class="absolute bottom-[7%] left-0 right-0 w-full flex justify-center">
+      <ChevronDoubleDownIcon class="text-neutral h-7 w-7 md:h-8 md:w-8" />
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ChevronRightIcon } from "@heroicons/vue/16/solid";
+import { ChevronDoubleDownIcon } from "@heroicons/vue/24/solid";
 </script>
\ No newline at end of file
diff --git a/nuxt/layouts/home.vue b/nuxt/layouts/home.vue
index 735ba78..180a7a6 100644
--- a/nuxt/layouts/home.vue
+++ b/nuxt/layouts/home.vue
@@ -9,7 +9,7 @@
             { name: 'Projects', href: '#projects' },
             { name: 'Contact', href: '#contact' },
             {
-              name: 'Resume',
+              name: 'Résumé',
               href: '/radison-akerman-resume.pdf',
               is_cta: true,
               target: '_blank'