jazz

Author: vivCoding

pages/_includes/blog/nav.liquid

@@ -3,7 +3,7 @@
     <h4 class="text-center text-lg font-bold">Vincent V</h4>
     <div class="w-[2px] self-stretch rounded bg-white"></div>
     <a
-      class="flex w-fit flex-row items-center border-b-2 border-solid border-b-transparent text-sm font-semibold transition hover:border-b-white hover:opacity-60"
+      class="flex w-fit flex-row items-center border-b-2 border-solid border-b-transparent text-sm font-semibold transition duration-200 hover:border-b-white hover:opacity-60"
       href="/"
       title="Home"
     >
@@ -14,7 +14,7 @@
       <span>Home</span>
     </a>
     <a
-      class="flex w-fit flex-row items-center border-b-2 border-solid border-b-transparent text-sm font-semibold transition hover:border-b-white hover:opacity-60"
+      class="flex w-fit flex-row items-center border-b-2 border-solid border-b-transparent text-sm font-semibold transition duration-200 hover:border-b-white hover:opacity-60"
       href="/blog"
       title="Blog"
     >

pages/_includes/index/about.liquid

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

pages/_includes/index/contact.liquid

@@ -36,7 +36,7 @@
     >
       <a
         href="https://forms.gle/ThEVfFZfQopvp1929"
-        class="m-0 font-semibold text-[#00C2FF] transition duration-200 hover:text-blue-100"
+        class="m-0 border-b-2 border-solid border-transparent font-semibold text-[#00C2FF] transition duration-200 hover:border-[#00C2FF] hover:opacity-60"
         target="_blank"
         rel="noreferrer noopener"
         >form</a

pages/_includes/index/intro.liquid

@@ -3,7 +3,7 @@
     <svg
       id="logoInit"
       width="175"
-      class="invisible relative left-1/2 z-10 w-[110px] overflow-visible py-4 motion-reduce:visible motion-reduce:left-0 motion-reduce:z-0 motion-reduce:rotate-3 sm:w-[145px] lg:w-[175px]"
+      class="invisible relative left-1/2 z-50 w-[110px] overflow-visible py-4 motion-reduce:visible motion-reduce:left-0 motion-reduce:rotate-3 sm:w-[145px] lg:w-[175px]"
       viewBox="0 0 65 54"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

pages/_includes/index/nav.liquid

@@ -1,4 +1,4 @@
-<nav id="navbar" class="fixed z-10 w-full bg-[#0D0F20] p-6 sm:pl-9">
+<nav id="navbar" class="fixed z-40 w-full bg-[#0D0F20] p-6 sm:pl-9">
   <div class="flex flex-row justify-center gap-x-7 text-base font-medium sm:justify-start">
     <a
       class="navbarLink inline-block animate-fade-in-down opacity-0 transition animation-delay-[1.5s] animation-duration-500 hover:scale-125 motion-reduce:animate-none motion-reduce:opacity-100 motion-reduce:hover:scale-100"

pages/_includes/index/projects.liquid

@@ -25,7 +25,7 @@
     {% 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-50 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-200 "
         draggable="false"
         href="{{ project.link }}"
         title="{{ project.title }}"

tailwind.config.js

@@ -150,7 +150,7 @@ module.exports = {
               borderBottomWidth: "2px",
               transitionProperty: "border-color, opacity",
               transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-              transitionDuration: "150ms",
+              transitionDuration: "200ms",
               "&:hover": {
                 borderColor: "rgb(147 197 253 / var(--tw-text-opacity))",
                 opacity: 0.6,