jazz

Author: vivCoding

pages/_includes/index/about.liquid

@@ -65,7 +65,7 @@
     >
       <a
         href="https://en.wikipedia.org/wiki/Bogosort"
-        class="m-0 border-b-4 border-solid border-transparent font-semibold text-[#00C2FF] transition duration-200 hover:border-[#00C2FF] hover:opacity-60"
+        class="animate-border-bottom m-0 font-semibold text-[#00C2FF] transition duration-150 after:h-[3px] after:bg-[#00C2FF] after:duration-200 hover:opacity-60 motion-reduce:after:duration-0"
         target="_blank"
         rel="noreferrer noopener"
         >bogosort</a

pages/_includes/index/contact.liquid

@@ -1,4 +1,4 @@
-<section id="contact" class="my-24 px-10 sm:px-20 lg:my-36 2xl:px-32">
+<section id="contact" class="mt-24 px-10 pb-16 sm:px-20 lg:mt-36 lg:pb-24 2xl:px-32">
   <h1 class="group mb-4 w-fit text-4xl font-medium sm:mb-6 sm:text-5xl xl:mb-10 xl:text-7xl">
     <span class="contact-line-word inline-block opacity-0 motion-reduce:animate-none motion-reduce:opacity-100"
       >Contact</span
@@ -36,7 +36,7 @@
     >
       <a
         href="https://forms.gle/ThEVfFZfQopvp1929"
-        class="m-0 border-b-2 border-solid border-transparent font-semibold text-[#00C2FF] transition duration-200 hover:border-[#00C2FF] hover:opacity-60"
+        class="animate-border-bottom m-0 font-semibold text-[#00C2FF] transition duration-150 after:-bottom-1 after:h-[2px] after:bg-[#00C2FF] after:duration-200 hover:opacity-60 motion-reduce:after:duration-0"
         target="_blank"
         rel="noreferrer noopener"
         >form</a

pages/_includes/index/projects.liquid

@@ -25,15 +25,18 @@
     {% for project in projects %}
       {% assign delay = delay | plus: 50 %}
       <a
-        class="projectCard group flex w-full select-text flex-col items-center rounded-2xl bg-white text-black opacity-0 transition hover:z-10 hover:scale-105 motion-reduce:opacity-100 motion-reduce:hover:scale-100 sm:flex-row animation-delay-[{{ delay }}ms] hover:bg-slate-200 "
+        class="projectCard group flex w-full select-text flex-col items-center rounded-2xl bg-white text-black opacity-0 transition hover:z-10 hover:scale-105 motion-reduce:opacity-100 motion-reduce:hover:scale-100 sm:flex-row animation-delay-[{{ delay }}ms] hover:bg-slate-300"
         draggable="false"
         href="{{ project.link }}"
         title="{{ project.title }}"
         target="_blank"
         rel="noreferrer noopener"
       >
         <div class="flex w-full flex-col items-center p-5 pb-0 sm:flex-row sm:pb-5 sm:pr-0">
-          <img src="{{ project.image }}" class="max-h-32 w-32 rounded border-2 border-solid border-slate-200">
+          <img
+            src="{{ project.image }}"
+            class="max-h-32 w-32 rounded border-2 border-solid border-slate-200 group-hover:border-slate-300"
+          >
           <div class="projectCardContent mt-2 text-center sm:ml-5 sm:text-left">
             <h6 class="text-lg font-medium">{{ project.title }}</h6>
             <p class="mt-1 text-sm sm:mt-2 xl:text-base">{{ project.description }}</p>

scripts/section-transitions/about.ts

@@ -30,9 +30,10 @@ export function initTransition() {
     }
   })
 
-  // accouting for large screens, where there is very minimal scrolling
   useScrollPosition(({ yPercentage }) => {
-    if (yPercentage >= 0.99) show()
+    if (yPercentage >= 0.99) {
+      show()
+    }
   })
 }
 

scripts/section-transitions/contact.ts

@@ -1,11 +1,11 @@
-import { useScrollPosition, useYPercentageOnScreen } from "../utils/hooks"
+import { usePercentageSeen, useScrollPosition } from "@/utils/hooks"
 
 const contactSection = document.getElementById("contact")
 const projectsSection = document.getElementById("projects")
 const words = [...document.getElementsByClassName("contact-line-word")] as HTMLElement[]
 const emoji = document.getElementById("contact-line-emoji")
 
-const PERCENTAGE_TRIGGER = 0.45
+const PERCENTAGE_TRIGGER = 0.9
 
 const WORD_ANIMATION = "animate-rise-word"
 const EMOJI_ANIMATION = "animate-swoosh"
@@ -16,12 +16,12 @@ export function initTransition() {
   // initial
   hide()
 
-  // relate the position/visibility of previous section to this section
-  useYPercentageOnScreen(projectsSection, (percentage) => {
+  // a lil different for last section
+  usePercentageSeen(contactSection, (percentage) => {
     if (percentage >= PERCENTAGE_TRIGGER) {
       show()
     } else {
-      const opacity = 1 - (PERCENTAGE_TRIGGER - percentage) / 0.1
+      const opacity = 1 - (PERCENTAGE_TRIGGER - percentage) / 0.3
       contactSection.style.opacity = `${opacity}`
       if (opacity <= 0) {
         hide()
@@ -31,7 +31,9 @@ export function initTransition() {
 
   // accouting for large screens, where there is very minimal scrolling
   useScrollPosition(({ yPercentage }) => {
-    if (yPercentage >= 0.99) show()
+    if (yPercentage >= 0.99) {
+      show()
+    }
   })
 }
 

scripts/section-transitions/navbar.ts

@@ -32,10 +32,15 @@ export function initTransition() {
     }
     if (percentage > SETTINGS_TRIGGER) {
       settingsBtnOverlay.classList.remove(GROUP_HOVER_CLASS)
-      settingsBtnOverlayContainer.style.opacity = `${1 - (percentage - SETTINGS_TRIGGER) / 0.1}`
+      const opacity = 1 - (percentage - SETTINGS_TRIGGER) / 0.1
+      settingsBtnOverlayContainer.style.opacity = `${opacity}`
+      if (opacity <= 0) {
+        settingsBtnOverlayContainer.style.display = "none"
+      }
     } else {
       settingsBtnOverlay.classList.add(GROUP_HOVER_CLASS)
       settingsBtnOverlayContainer.style.opacity = "1"
+      settingsBtnOverlayContainer.style.display = "block"
     }
   })
 }

scripts/section-transitions/projects.ts

@@ -1,15 +1,15 @@
 // TODO this is basically copy paste from aboutSection
 // dont repeat urself?
 
-import { useScrollPosition, useYPercentageOnScreen } from "../utils/hooks"
+import { usePercentageSeen, useScrollPosition, useYPercentageOnScreen } from "../utils/hooks"
 
 const projectsSection = document.getElementById("projects")
 const aboutSection = document.getElementById("about")
 const words = [...document.getElementsByClassName("projects-line-word")] as HTMLElement[]
 const emoji = document.getElementById("projects-line-emoji")
 const projectCards = [...document.getElementsByClassName("projectCard")] as HTMLElement[]
 
-const PERCENTAGE_TRIGGER = 0.6
+const PERCENTAGE_TRIGGER = 0.57
 
 const WORD_ANIMATION = "animate-rise-word"
 const EMOJI_ANIMATION = "animate-bop"
@@ -35,8 +35,13 @@ export function initTransition() {
   })
 
   // accouting for large screens, where there is very minimal scrolling
+  usePercentageSeen(projectsSection, (percentage) => {
+    if (percentage >= 0.99) show()
+  })
   useScrollPosition(({ yPercentage }) => {
-    if (yPercentage >= 0.99) show()
+    if (yPercentage >= 0.99) {
+      show()
+    }
   })
 }
 

scripts/utils/hooks.ts

@@ -32,12 +32,14 @@ export function usePercentageSeen(element: HTMLElement | null, onChange: (percen
     const overTopEdge = elementOffsetTop < topEdge
 
     // calculate the percentage on screen
-    // NOTE could divide by min(elementHeight, viewportHeight) instead.
+    // NOTE we divide by min(elementHeight, viewportHeight).
     // That way, if element is larger than screen, will return 100% when element covers entire screen
     const calcPercentage =
-      (overTopEdge ? elementOffsetTop + elementHeight - topEdge : bottomEdge - elementOffsetTop) / elementHeight
+      (overTopEdge ? elementOffsetTop + elementHeight - topEdge : bottomEdge - elementOffsetTop) /
+      Math.min(elementHeight, viewportHeight)
     // Restrict the range to between 0 and 1
-    const percentage = Math.round(clampValue(0, 1, calcPercentage) * 100) / 100
+    const percentage = clampValue(0, 1, calcPercentage)
+
     onChange(percentage)
   })
 
@@ -67,7 +69,7 @@ export function useYPercentageOnScreen(
     const trigger = elementPos - viewportHeight
     // now calculate the element's position y on screen, and get percentage y
     // also restrict range to between 0 and 1
-    const percentage = Math.round(clampValue(0, 1, (scrollPos - trigger) / viewportHeight) * 100) / 100
+    const percentage = clampValue(0, 1, (scrollPos - trigger) / viewportHeight)
     onChange(percentage)
   })
 
@@ -80,11 +82,8 @@ export function useScrollPosition(onChange: ({ yPos, yPercentage }: { yPos: numb
   scrollHooks.push(() => {
     const yPos = window.scrollY
     const yPercentage =
-      Math.round(
-        (document.documentElement.scrollTop /
-          (document.documentElement.scrollHeight - document.documentElement.clientHeight)) *
-          100
-      ) / 100
+      document.documentElement.scrollTop /
+      (document.documentElement.scrollHeight - document.documentElement.clientHeight)
     onChange({ yPos, yPercentage })
   })
 

styles/index.css

@@ -50,3 +50,29 @@
 
   /* #endregion font */
 }
+
+@layer utilities {
+  .animate-border-bottom {
+    position: relative;
+  }
+
+  .animate-border-bottom:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    /* spacing in bottom */
+    bottom: -4px;
+    /* border thickness */
+    height: 2px;
+    width: 100%;
+    transform-origin: left center;
+    background: white;
+    transform: scale3d(0, 1, 1);
+    transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
+    border-radius: 4px;
+  }
+
+  .animate-border-bottom:hover:after {
+    transform: scale3d(1, 1, 1);
+  }
+}