fix some ui

Hetari · Sep 7, 2024 · f8eee62 · f8eee62
1 parent 19c8a0b
commit f8eee62
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 30 deletions.
diff --git a/src/components/Link.vue b/src/components/Link.vue
@@ -5,7 +5,7 @@
   >
     <a @click="gotoSection(url)" :href="url" class="group">
       <p
-        class="font-fancy -translate-y-0 transition-all duration-300 ease-in-out group-hover:translate-y-[-100%]"
+        class="font-fancy -translate-y-0 transition-all duration-300 ease-in-out will-change-auto group-hover:translate-y-[-100%]"
         :class="{ flex: icon }"
       >
         <svg
@@ -24,7 +24,7 @@
         {{ label }}
       </p>
       <p
-        class="font-fancy transition-all duration-300 ease-in-out group-hover:translate-y-[-100%]"
+        class="font-fancy transition-all duration-300 ease-in-out will-change-auto group-hover:translate-y-[-100%]"
         :class="{ flex: icon }"
       >
         <svg

diff --git a/src/components/MyEnName.vue b/src/components/MyEnName.vue
@@ -7,46 +7,46 @@
   >
     <g transform="matrix(1.26098, 0, 0, 1.26098, -74.435867, -304.372864)">
       <path
-        class="translate-y-full"
+        class="translate-y-full will-change-auto"
         d="M58.3,408.1v-57.7h14.2v57.7H58.3z M68.7,361.9v-11.5h34v11.5H68.7z M68.7,384.3v-10.4h29.9v10.4H68.7z M68.7,408.1v-11.5
 		h34.2v11.5H68.7z"
       ></path>
       <path
-        class="translate-y-full"
+        class="translate-y-full will-change-auto"
         d="M111.3,408.1v-57.7h24.5c3.6,0,6.8,0.3,9.7,0.9c2.9,0.6,5.3,1.5,7.3,2.8c2,1.3,3.5,2.8,4.6,4.8c1,1.9,1.6,4.2,1.6,6.9
 		c0,2.3-0.5,4.3-1.4,6c-1,1.7-2.5,3.1-4.5,4.2c-2.1,1-4.8,1.7-8.2,2.1v1.3c5.7,0.3,9.8,1.7,12.5,4.1c2.7,2.4,4,5.5,4,9.5
 		c0,3.4-0.9,6.2-2.7,8.4c-1.8,2.2-4.4,3.9-7.9,5c-3.5,1.1-7.7,1.7-12.8,1.7H111.3z M124.9,374.6h8.8c3.9,0,6.8-0.6,8.7-1.7
 		c1.9-1.1,2.8-2.8,2.8-5c0-2.2-0.9-3.7-2.6-4.8c-1.7-1-4.3-1.5-7.8-1.5h-9.9V374.6z M124.9,396.9h12.5c3.4,0,5.9-0.5,7.6-1.5
 		c1.7-1,2.5-2.6,2.5-4.8c0-2.4-1-4.2-3-5.3c-2-1.2-5-1.7-9-1.7h-10.6V396.9z"
       ></path>
       <path
-        class="translate-y-full"
+        class="translate-y-full will-change-auto"
         d="M169.8,408.1v-57.7h24.4c3,0,5.8,0.2,8.3,0.7c2.5,0.5,4.8,1.2,6.8,2.1c2,1,3.7,2.1,5.1,3.5c1.4,1.3,2.5,2.9,3.2,4.7
 		c0.7,1.8,1.1,3.8,1.1,6c0,2-0.3,3.8-1,5.4c-0.6,1.6-1.6,3-2.9,4.3c-1.3,1.3-3,2.3-4.9,3.1c-2,0.8-4.3,1.4-7,1.7v1.1
 		c3.4,0.3,6,1,7.9,2.2c1.9,1.2,3.3,2.7,4.3,4.6c1,1.9,1.8,4.1,2.5,6.6l3.2,11.7h-15.6l-2.4-10.8c-0.5-2.2-1.1-4-2-5.2
 		c-0.8-1.3-2-2.2-3.4-2.7c-1.4-0.5-3.1-0.7-5.2-0.7h-8.2v19.5H169.8z M183.9,378.1h9.1c3.5,0,6.2-0.7,8.1-2c1.9-1.3,2.8-3.4,2.8-6.3
 		c0-2.9-0.9-5-2.6-6.4c-1.7-1.4-4.4-2.1-8-2.1h-9.4V378.1z"
       ></path>
       <path
-        class="translate-y-full"
+        class="translate-y-full will-change-auto"
         d="M223.9,408.1l19.5-57.7h20.1l19.4,57.7h-15.3L254,361.5h-1.2l-13.6,46.6H223.9z M235.3,397.5v-9.6h38.2v9.6H235.3z"
       ></path>
       <path
-        class="translate-y-full"
+        class="translate-y-full will-change-auto"
         d="M289.3,408.1v-57.7h14.2v57.7H289.3z M298.4,384.8v-11.5h33.8v11.5H298.4z M326.1,408.1v-57.7h14.1v57.7H326.1z"
       ></path>
       <path
-        class="translate-y-full"
+        class="translate-y-full will-change-auto"
         d="M350.9,408.1v-57.7h14.2v57.7H350.9z M361.3,361.9v-11.5h34v11.5H361.3z M361.3,384.3v-10.4h29.9v10.4H361.3z M361.3,408.1
 		v-11.5h34.2v11.5H361.3z"
       ></path>
       <path
-        class="translate-y-full"
+        class="translate-y-full will-change-auto"
         d="M403.9,408.1v-57.7h14.2v57.7H403.9z M414.4,361.9v-11.5h34v11.5H414.4z M414.4,384.3v-10.4h29.9v10.4H414.4z M414.4,408.1
 		v-11.5h34.2v11.5H414.4z"
       ></path>
       <path
-        class="translate-y-full"
+        class="translate-y-full will-change-auto"
         d="M457,408.1v-57.7h21.2l14.2,41.3h0.3l13.9-41.3h20.1v57.7h-13.3l0.6-43.4h-0.8l-15.7,43.4h-11.7l-15.5-43.4h-0.8l0.6,43.4
 		H457z"
       ></path>
@@ -59,43 +59,43 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      class="translate-y-full"
+      class="translate-y-full will-change-auto"
       d="M0.728693 106.5V0.318179H72.277V18.8274H23.1783V44.1285H68.5959V62.6378H23.1783V87.9908H72.4844V106.5H0.728693Z"
     ></path>
     <path
-      class="translate-y-full"
+      class="translate-y-full will-change-auto"
       d="M90.1252 106.5V0.318179H132.639C140.451 0.318179 146.966 1.47609 152.186 3.7919C157.405 6.10772 161.328 9.32221 163.955 13.4354C166.582 17.514 167.895 22.2147 167.895 27.5376C167.895 31.6854 167.066 35.3319 165.406 38.4773C163.747 41.5881 161.466 44.1458 158.563 46.1506C155.694 48.1207 152.41 49.5206 148.712 50.3501V51.3871C152.756 51.5599 156.541 52.7005 160.066 54.8089C163.626 56.9174 166.512 59.8726 168.725 63.6747C170.937 67.4422 172.043 71.9356 172.043 77.1548C172.043 82.7888 170.643 87.8179 167.843 92.2422C165.078 96.6319 160.982 100.106 155.556 102.663C150.129 105.221 143.441 106.5 135.491 106.5H90.1252ZM112.575 88.1463H130.877C137.133 88.1463 141.695 86.9538 144.564 84.5689C147.433 82.1494 148.867 78.9349 148.867 74.9254C148.867 71.9875 148.159 69.3951 146.742 67.1484C145.325 64.9018 143.303 63.139 140.676 61.8601C138.083 60.5812 134.99 59.9418 131.395 59.9418H112.575V88.1463ZM112.575 44.7507H129.218C132.294 44.7507 135.024 44.215 137.409 43.1435C139.829 42.0374 141.73 40.482 143.112 38.4773C144.53 36.4725 145.238 34.0703 145.238 31.2706C145.238 27.4339 143.873 24.3404 141.142 21.9901C138.446 19.6397 134.61 18.4645 129.632 18.4645H112.575V44.7507Z"
     ></path>
     <path
-      class="translate-y-full"
+      class="translate-y-full will-change-auto"
       d="M186.651 106.5V0.318179H228.543C236.562 0.318179 243.405 1.7526 249.074 4.62145C254.777 7.45573 259.115 11.4825 262.087 16.7017C265.094 21.8864 266.598 27.987 266.598 35.0035C266.598 42.0547 265.077 48.1207 262.036 53.2017C258.994 58.2481 254.587 62.1193 248.815 64.8153C243.077 67.5114 236.129 68.8594 227.972 68.8594H199.923V50.8168H224.343C228.629 50.8168 232.189 50.2292 235.023 49.054C237.858 47.8788 239.966 46.116 241.349 43.7656C242.766 41.4152 243.474 38.4946 243.474 35.0035C243.474 31.478 242.766 28.5054 241.349 26.0859C239.966 23.6664 237.84 21.8345 234.972 20.5902C232.137 19.3113 228.56 18.6719 224.239 18.6719H209.1V106.5H186.651Z"
     ></path>
     <path
-      class="translate-y-full"
+      class="translate-y-full will-change-auto"
       d="M243.993 58.179L270.383 106.5H245.6L219.781 58.179H243.993Z"
     ></path>
     <path
-      class="translate-y-full"
+      class="translate-y-full will-change-auto"
       d="M300.765 106.5H276.708L313.364 0.318179H342.294L378.898 106.5H354.841L328.244 24.5824H327.414L300.765 106.5Z"
     ></path>
     <path
-      class="translate-y-full"
+      class="translate-y-full will-change-auto"
       d="M299.261 64.7635H356.085V82.2876H299.261V64.7635Z"
     ></path>
     <path
-      class="translate-y-full"
+      class="translate-y-full will-change-auto"
       d="M391.678 106.5V0.318179H414.127V44.1285H459.701V0.318179H482.098V106.5H459.701V62.6378H414.127V106.5H391.678Z"
     ></path>
     <path
-      class="translate-y-full"
+      class="translate-y-full will-change-auto"
       d="M500.608 106.5V0.318179H572.156V18.8274H523.057V44.1285H568.475V62.6378H523.057V87.9908H572.363V106.5H500.608Z"
     ></path>
     <path
-      class="translate-y-full"
+      class="translate-y-full will-change-auto"
       d="M590.004 106.5V0.318179H661.552V18.8274H612.454V44.1285H657.871V62.6378H612.454V87.9908H661.76V106.5H590.004Z"
     ></path>
     <path
-      class="translate-y-full"
+      class="translate-y-full will-change-auto"
       d="M679.401 0.318179H707.087L736.328 71.6591H737.572L766.814 0.318179H794.5V106.5H772.724V37.3885H771.843L744.364 105.982H729.536L702.058 37.1293H701.176V106.5H679.401V0.318179Z"
     />
   </svg> -->

diff --git a/src/components/common/Button.vue b/src/components/common/Button.vue
@@ -11,13 +11,13 @@
     :href="url"
   >
     <span
-      class="ease-expo flex-center absolute bottom-0 left-0 z-10 my-auto size-full w-full translate-y-full text-nowrap rounded-t-[15rem] bg-flax-smoke-500 font-fancy transition-all duration-700 group-hover:translate-y-0 group-hover:rounded-none"
+      class="ease-expo flex-center absolute bottom-0 left-0 z-10 my-auto size-full w-full will-change-auto translate-y-full text-nowrap rounded-t-[15rem] bg-flax-smoke-500 font-fancy transition-all duration-700 group-hover:translate-y-0 group-hover:rounded-none"
     >
       {{ label }}</span
     >
 
     <span
-      class="after:ease-expo flex-center relative z-20 overflow-hidden transition-all after:absolute after:left-0 after:inline-block after:translate-y-0 after:text-flax-smoke-200 after:transition-all after:duration-700 after:content-[attr(after)] group-hover:after:-translate-y-[100%]"
+      class="after:ease-expo flex-center relative z-20 overflow-hidden transition-all after:absolute after:left-0 after:inline-block after:will-change-auto after:translate-y-0 after:text-flax-smoke-200 after:transition-all after:duration-700 after:content-[attr(after)] group-hover:after:-translate-y-[100%]"
     >
       <span
         class="ease-expo text-nowrap font-fancy transition-all duration-700 group-hover:-translate-y-full"

diff --git a/src/components/common/Nav.vue b/src/components/common/Nav.vue
@@ -15,7 +15,7 @@
     tabindex="0"
     id="navbar"
     @keydown.esc="toggleBtnClickAnimation()"
-    class="fixed right-0 top-[1dvh] z-[9998] h-[98dvh] w-full translate-x-full select-none rounded-s-lg bg-flax-smoke-950 p-5 will-change-transform focus:outline-none max-md:w-[98%] sm:p-10 md:w-3/5 md:px-20 lg:w-2/5"
+    class="fixed right-0 top-[1dvh] z-[9998] h-[98dvh] w-full translate-x-full select-none rounded-s-lg bg-flax-smoke-950 p-5 will-change-auto focus:outline-none max-md:w-[98%] sm:p-10 md:w-3/5 md:px-20 lg:w-2/5"
   >
     <Circles id="circles" class="absolute right-0 top-0 opacity-25" />
     <div class="flex h-full flex-col items-center justify-between">
@@ -33,7 +33,7 @@
             <a
               :href="l.url"
               @click="gotoSection(l.url)"
-              class="group my-2 flex h-full w-fit translate-y-full cursor-pointer items-center justify-start leading-none"
+              class="group my-2 flex h-full w-fit translate-y-full cursor-pointer items-center justify-start leading-none will-change-auto"
             >
               <span
                 class="h-4 w-4 scale-0 rounded-full bg-flax-smoke-50 opacity-0 transition-all duration-300 ease-in-out group-hover:scale-100 group-hover:opacity-100"
@@ -73,7 +73,7 @@
 
   <header
     :class="$attrs.class"
-    class="padding-x absolute inset-0 z-20 h-fit -translate-y-full pt-6"
+    class="padding-x absolute inset-0 z-20 h-fit -translate-y-full pt-6 will-change-auto"
   >
     <nav class="flex justify-between">
       <MagneticEffect

diff --git a/src/components/design/LoadingScreen.vue b/src/components/design/LoadingScreen.vue
@@ -19,13 +19,17 @@
         :class="{ 'text-4xl font-bold md:text-6xl': true }"
       >
         <h1 class="overflow-clip">
-          <span class="loading-text inline-block translate-y-full">
+          <span
+            class="loading-text inline-block translate-y-full will-change-auto"
+          >
             Hetari
           </span>
         </h1>
 
         <p class="overflow-clip">
-          <span class="loading-text inline-block translate-y-full opacity-70">
+          <span
+            class="loading-text inline-block translate-y-full opacity-70 will-change-auto"
+          >
             &copy; Folio {{ new Date().getFullYear() }}
           </span>
         </p>

diff --git a/src/components/design/Slider.vue b/src/components/design/Slider.vue
@@ -31,7 +31,12 @@
 
         <div class="relative flex h-full items-end justify-between">
           <div class="heading-5 flex w-2/12 items-center gap-3 overflow-clip">
-            <p id="current-index" class="-translate-y-full">{{ index + 1 }}</p>
+            <p
+              id="current-index"
+              class="-translate-y-full will-change-transform"
+            >
+              {{ index + 1 }}
+            </p>
             <p class="h-0.5 w-full bg-black"></p>
             <p>{{ people.length }}</p>
           </div>

diff --git a/src/components/sections/Works.vue b/src/components/sections/Works.vue
@@ -79,8 +79,8 @@
                 ></video>
               </div>
             </div>
-            <div class="leading-none">
-              <p class="heading-6 mb-[1%] mt-[2%] !font-title">
+            <div>
+              <p class="heading-6 mb-[1%] mt-[2%] !font-title leading-none">
                 {{ work.category }}
               </p>
               <div class="items-center justify-between sm:flex">