fix some ui

src/App.vue

@@ -21,11 +21,9 @@
     </div>
 
     <!-- ! h-[80vh] xl:h-[78vh] 3xl:h-[75vh] -->
-    <Navbar
-      @isLocked="LockeScroll"
-      class="padding-x absolute inset-0 mx-auto max-w-[1920px]"
-    />
-    <main class="relative mx-auto h-full max-w-[1920px]">
+    <Navbar @isLocked="LockeScroll" class="padding-x absolute inset-0" />
+    <!-- max-w-9xl mx-auto -->
+    <main class="relative h-full">
       <Hero />
       <Services />
     </main>

src/components/Link.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" class="w-full select-none overflow-y-hidden">
+  <component :is="tag" class="select-none overflow-y-hidden">
     <a :href="url" class="group">
       <p
         class="-translate-y-0 font-title transition-all duration-300 ease-in-out group-hover:translate-y-[-100%]"

src/components/common/Nav.vue

@@ -80,7 +80,7 @@
         <div id="name-container" class="group -m-10 h-fit cursor-pointer p-10">
           <h1
             id="name"
-            class="flex items-start font-fancy text-3xl font-extrabold uppercase"
+            class="flex items-start font-fancy font-extrabold uppercase md:text-3xl"
           >
             hetari<span
               class="!inline !origin-center font-title text-xl transition-transform duration-500 ease-in-out group-hover:rotate-[360deg]"
@@ -92,23 +92,23 @@
 
       <div class="flex justify-start">
         <p
-          class="cursor-default select-none font-fancy text-lg font-bold uppercase text-flax-smoke-400 max-2xl:text-sm max-md:hidden"
+          class="hidden select-none font-fancy font-bold uppercase text-flax-smoke-400 max-2xl:text-sm lg:block lg:text-lg"
         >
           available for work and collaboration
         </p>
       </div>
       <div class="flex">
         <!-- ps-5 max-xl:ps-10  -->
         <ul
-          class="flex flex-1 gap-4 overflow-y-hidden text-2xl font-medium max-lg:text-xl max-md:text-lg"
+          class="flex-1 gap-2 overflow-y-hidden text-sm font-medium max-sm:ps-10 md:flex md:gap-4 md:text-2xl lg:text-3xl"
         >
           <Link
             v-for="(l, index) in navLinks"
             :key="l.label"
             tag="li"
             :label="l.label + (index !== navLinks.length - 1 ? ' ,' : '')"
             :url="l.url"
-            class="h-[50%]"
+            class="h-[50%] max-sm:h-5"
           />
         </ul>
       </div>

src/components/sections/Hero.vue

@@ -40,12 +40,14 @@
         </div>
       </div>
 
-      <div class="column-gap spacing-t flex grid-cols-12 flex-col md:grid">
+      <div
+        class="column-gap spacing-t flex w-full grid-cols-12 flex-col md:grid"
+      >
         <div
           id="profile-container"
           class="group relative z-10 col-span-3 hidden aspect-[3/3.5] size-full origin-top select-none flex-col rounded-lg md:flex"
         >
-          <div class="overlay bg-flax-smoke-100 absolute inset-0 z-[2]"></div>
+          <div class="overlay absolute inset-0 z-[2] bg-flax-smoke-100"></div>
           <img
             id="profile-img"
             :src="profile"
@@ -72,13 +74,13 @@
             <p
               v-html="whoAmI"
               id="whoAmI"
-              class="who-am-i text-fluid-body max-w-[33ch] overflow-clip text-balance text-start font-medium leading-snug"
+              class="who-am-i text-fluid-body max-w-[30ch] overflow-clip text-balance font-medium leading-snug lg:text-start"
             ></p>
           </div>
 
           <div
             id="location"
-            class="column-gap text-flax-smoke-950 flex scale-0 items-start justify-between opacity-0"
+            class="column-gap flex scale-0 items-start justify-between text-flax-smoke-950 opacity-0"
           >
             <div class="text-sm font-normal">
               <p class="font-fancy">{{ locationPlace }}</p>

src/functions/index.ts

@@ -1,19 +1,21 @@
-const textSplitter = (text: string): string => {
-    const words = text.split(' ');
-    const char = words.map((word) => word.split(''));
+const textSplitter = (text: string, isFancyFont: boolean = false): string => {
+  const words = text.split(' ');
+  const char = words.map((word) => word.split(''));
 
-    let result = '';
-    char.forEach((word) => {
-      result += '<span class="inline-block overflow-clip">';
-      word.forEach((char) => {
-        result += `<span class="letters translate-y-full inline-block ">${char}</span>`;
-      });
-      result += '</span> ';
+  let result = '';
+  char.forEach((word) => {
+    result += '<span class="inline-block overflow-clip">';
+    word.forEach((char) => {
+      let classes = 'letters translate-y-full inline-block ';
+      if (isFancyFont) {
+        classes += ' font-fancy ';
+      }
+      result += `<span class="${classes}">${char}</span>`;
     });
+    result += '</span> ';
+  });
 
-    return result;
-}
+  return result;
+};
 
-export {
-    textSplitter
-}
+export { textSplitter };

src/style.css

@@ -63,11 +63,11 @@
 
   ::-moz-selection {
     /* Code for Firefox */
-    @apply text-flax-smoke-100 bg-flax-smoke-800;
+    @apply bg-flax-smoke-800 text-flax-smoke-100;
   }
 
   ::selection {
-    @apply text-flax-smoke-100 bg-flax-smoke-800;
+    @apply bg-flax-smoke-800 text-flax-smoke-100;
   }
 }
 

tailwind.config.js

@@ -44,6 +44,11 @@ export default {
         '3xl': '1920px',
         '4xl': '2560px',
       },
+      maxWidth: {
+        '8xl': '1920px',
+        '9xl': '2560px',
+        '10xl': '3200px',
+      },
     },
   },
   plugins: [],