导航栏与首页动画优化

src/layout/FullLayoutV1.astro

@@ -63,6 +63,11 @@ const { title = '小帕的小窝' } = Astro.props
     navMain?.classList.add('nav-container-hidden')
   }
 
+  const navOpen = () => {
+    const navMain = document.getElementById('nav-main')
+    navMain?.classList.remove('nav-container-hidden')
+  }
+
   document.getElementById('nav-main')?.addEventListener('click', (e) => {
     const target = e.target as HTMLElement
     if (target.id == 'nav-main') {
@@ -70,6 +75,18 @@ const { title = '小帕的小窝' } = Astro.props
     }
   })
 
+  document.getElementById('nav-main')?.addEventListener('focusin', navOpen)
+  document.getElementById('nav-main')?.addEventListener('focusout', (e) => {
+    if (
+      e.relatedTarget &&
+      !document
+        .getElementById('nav-main')
+        ?.contains(e.relatedTarget as HTMLElement)
+    ) {
+      navClose()
+    }
+  })
+
   document.addEventListener('astro:before-preparation', () => {
     document.getElementById('loading-indicator')?.classList.remove('hidden')
   })
@@ -78,6 +95,24 @@ const { title = '小帕的小窝' } = Astro.props
     requestAnimationFrame(navClose)
     document.getElementById('loading-indicator')?.classList.add('hidden')
   })
+
+  document.addEventListener('astro:page-load', () => {
+    document.querySelectorAll('#nav-main li:has(a)').forEach((li) => {
+      console.log(li)
+      const child = li.querySelector('a')
+      if (!child) {
+        li.classList.add('url-here')
+        return
+      }
+      if (
+        window.location.href.replace(/\/$/, '') == child.href.replace(/\/$/, '')
+      ) {
+        li.classList.add('url-here')
+      } else {
+        li.classList.remove('url-here')
+      }
+    })
+  })
 </script>
 
 <style>
@@ -160,6 +195,11 @@ const { title = '小帕的小窝' } = Astro.props
           background-color: rgb(from var(--color-fg-0) r g b / 0.1);
         }
 
+        &.url-here {
+          color: var(--color-blue);
+          background-color: rgb(from var(--color-blue) r g b / 0.1);
+        }
+
         & > a {
           padding-inline: 0.75rem;
           width: 100%;
@@ -211,6 +251,7 @@ const { title = '小帕的小窝' } = Astro.props
       align-items: center;
       justify-content: center;
       font-size: 2rem;
+      cursor: pointer;
 
       &:active,
       &:hover {

src/pages/index.astro

@@ -145,6 +145,7 @@ try {
 
   .slide {
     scroll-snap-align: start;
+    scroll-snap-stop: always;
     height: 100dvh;
     display: flex;
     align-items: center;
@@ -201,6 +202,24 @@ try {
     }
   }
 
+  @property --avatar-scalar {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+
+  @property --avatar-hover-scalar {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+
+  @property --avatar-rotation {
+    syntax: '<angle>';
+    inherits: true;
+    initial-value: 0deg;
+  }
+
   /* 自我介绍部分 */
   .self-introduction {
     display: flex;
@@ -217,16 +236,32 @@ try {
     & > .avatar {
       margin: 0;
       border-radius: 50%;
+
       --final-width: clamp(160px, 30vw, 240px);
-      transition: all cubic-bezier(0.4, 1, 0.4, 1) 1.2s;
-      transform: rotate(10deg);
+      --avatar-scalar: 0;
+      --avatar-hover-scalar: 1;
+      --avatar-rotation: 20deg;
+      transition:
+        --avatar-rotation cubic-bezier(0.2, 1, 0.4, 1) 1.8s,
+        --avatar-scalar cubic-bezier(0.2, 2, 0.3, 0.8) 1.2s,
+        --avatar-hover-scalar cubic-bezier(0.2, 3, 0.4, 0.6) 0.6s,
+        width cubic-bezier(0.4, 1, 0.4, 1) 0.9s;
+
+      transform: rotate(var(--avatar-rotation)) scale(var(--avatar-scalar))
+        scale(var(--avatar-hover-scalar));
       aspect-ratio: 1 / 1;
       overflow: hidden;
       width: 0;
 
       section.slide.slide-visible & {
+        --avatar-scalar: 1;
+        --avatar-rotation: 0deg;
         width: var(--final-width);
-        transform: rotate(0);
+      }
+
+      &:hover,
+      &:focus {
+        --avatar-hover-scalar: 1.05;
       }
     }
 
@@ -288,7 +323,8 @@ try {
     }
   }
 
-  section:has(.thsx:hover) .motto > p {
+  section:has(.thsx:hover) .motto > p,
+  section:has(.thsx:focus) .motto > p {
     &:nth-child(1)::before {
       transition-delay: 0;
     }