fix hero ui

src/App.vue

@@ -2,12 +2,12 @@
   <LoadingScreen v-cloak="true" />
 
   <div v-cloak="true">
-    <div class="pointer-events-none fixed inset-0 z-50 overflow-clip">
+    <div class="pointer-events-none fixed inset-0 z-50">
       <svg
-        class="size-full object-cover object-center"
+        class="h-[150svh] w-[150svw] object-cover object-center"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <filter id="noise" x="0" y="0">
+        <filter id="noise">
           <feTurbulence
             type="fractalNoise"
             baseFrequency="0.65"
@@ -52,13 +52,13 @@
     Works,
     LittleBitAboutMe,
   } from '@/components/sections';
-  import { onMounted, Ref, ref, watch } from 'vue';
+  import { onMounted, Ref, ref } from 'vue';
   import { LoadingScreen } from '@/components/design';
-  import { useWindowSize } from '@vueuse/core';
+  // import { useWindowSize } from '@vueuse/core';
   import { lenis, raf } from './main';
   import { Navbar } from './components/common';
 
-  const { width, height } = useWindowSize();
+  // const { width, height } = useWindowSize();
   const noise: Ref<HTMLElement | null> = ref(null);
 
   const LockeScroll = (isLocked: boolean) => {
@@ -78,12 +78,12 @@
     }, 2000);
   });
 
-  watch([width, height], () => {
-    if (noise.value) {
-      noise.value.style.height = `${height.value}px`;
-      noise.value.style.width = `${width.value}px`;
-    }
-  });
+  // watch([width, height], () => {
+  //   if (noise.value) {
+  //     noise.value.style.height = `${height.value * 2}px`;
+  //     noise.value.style.width = `${width.value}px`;
+  //   }
+  // });
 </script>
 
 <style>

src/animations/index.ts

@@ -263,12 +263,25 @@ const animateLoadingText = (id: string) => {
 
 // ! Hero
 const animateHeroNav = () => {
-  gsap.to(['#my-name', 'header'], {
+  gsap.to('header', {
     y: 0,
     duration: 0.8,
     ease: 'power4.inOut',
   });
 
+  gsap.to('#svg-my-en-name path', {
+    y: 0,
+    duration: 0.8,
+    ease: 'power4.inOut',
+    stagger: 0.01,
+  });
+
+  gsap.to('#star', {
+    x: 1,
+    duration: 0.8,
+    ease: 'power4.inOut',
+  });
+
   gsap.to('.overlay', {
     y: '100%',
     duration: 0.8,
@@ -286,13 +299,6 @@ const animateHeroNav = () => {
 
   animateSplitText('#whoAmI .letters', '#whoAmI .letters');
 
-  gsap.to(['#location', '#art'], {
-    opacity: 1,
-    scale: 1,
-    duration: 0.8,
-    ease: 'power3.inOut',
-  });
-
   // Hero scroll animation
   gsap.to('#hero', {
     scrollTrigger: {

src/components/MyEnName.vue

@@ -6,7 +6,44 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M0.728693 106.5V0.318179H72.277V18.8274H23.1783V44.1285H68.5959V62.6378H23.1783V87.9908H72.4844V106.5H0.728693ZM90.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.7507ZM186.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.651ZM243.993 58.179L270.383 106.5H245.6L219.781 58.179H243.993ZM300.765 106.5H276.708L313.364 0.318179H342.294L378.898 106.5H354.841L328.244 24.5824H327.414L300.765 106.5ZM299.261 64.7635H356.085V82.2876H299.261V64.7635ZM391.678 106.5V0.318179H414.127V44.1285H459.701V0.318179H482.098V106.5H459.701V62.6378H414.127V106.5H391.678ZM500.608 106.5V0.318179H572.156V18.8274H523.057V44.1285H568.475V62.6378H523.057V87.9908H572.363V106.5H500.608ZM590.004 106.5V0.318179H661.552V18.8274H612.454V44.1285H657.871V62.6378H612.454V87.9908H661.76V106.5H590.004ZM679.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"
+      class="translate-y-full"
+      d="M0.728693 106.5V0.318179H72.277V18.8274H23.1783V44.1285H68.5959V62.6378H23.1783V87.9908H72.4844V106.5H0.728693Z"
+    ></path>
+    <path
+      class="translate-y-full"
+      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"
+      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"
+      d="M243.993 58.179L270.383 106.5H245.6L219.781 58.179H243.993Z"
+    ></path>
+    <path
+      class="translate-y-full"
+      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"
+      d="M299.261 64.7635H356.085V82.2876H299.261V64.7635Z"
+    ></path>
+    <path
+      class="translate-y-full"
+      d="M391.678 106.5V0.318179H414.127V44.1285H459.701V0.318179H482.098V106.5H459.701V62.6378H414.127V106.5H391.678Z"
+    ></path>
+    <path
+      class="translate-y-full"
+      d="M500.608 106.5V0.318179H572.156V18.8274H523.057V44.1285H568.475V62.6378H523.057V87.9908H572.363V106.5H500.608Z"
+    ></path>
+    <path
+      class="translate-y-full"
+      d="M590.004 106.5V0.318179H661.552V18.8274H612.454V44.1285H657.871V62.6378H612.454V87.9908H661.76V106.5H590.004Z"
+    ></path>
+    <path
+      class="translate-y-full"
+      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>
 </template>

src/components/common/Button.vue

@@ -1,12 +1,12 @@
 <template>
   <a
     id="button"
-    class="leading-base group pointer-events-auto relative h-full transform-none overflow-hidden rounded-full bg-flax-smoke-950 px-5 py-2 text-[1rem] font-semibold uppercase tracking-normal text-flax-smoke-100 sm:text-sm"
+    class="leading-base group pointer-events-auto relative h-full max-w-fit transform-none overflow-hidden rounded-full bg-flax-smoke-950 px-5 py-2 text-[1rem] font-semibold uppercase tracking-normal text-flax-smoke-100 sm:text-sm"
     target="_blank"
     :href="url"
   >
     <span
-      class="ease-expo flex-center absolute bottom-0 left-0 z-10 my-auto size-full w-full translate-y-full 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 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
     >
@@ -15,7 +15,7 @@
       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%]"
     >
       <span
-        class="ease-expo font-fancy transition-all duration-700 group-hover:-translate-y-full"
+        class="ease-expo text-nowrap font-fancy transition-all duration-700 group-hover:-translate-y-full"
         >{{ label }}</span
       >
     </span>

src/components/common/Nav.vue

@@ -17,7 +17,7 @@
     tabindex="0"
     id="navbar"
     @keydown.esc="esc()"
-    class="fixed right-0 top-[1%] z-[9998] h-[98vh] w-full translate-x-full select-none rounded-s-lg bg-flax-smoke-900 p-5 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-[1svh] z-[9998] h-[98svh] w-full translate-x-full select-none rounded-s-lg bg-flax-smoke-900 p-5 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">

src/components/design/MyName.vue

@@ -1,6 +1,6 @@
 <template>
   <h1 class="sr-only">Ebraheem Alhetari</h1>
-  <MyEnName :id="$attrs.id" :class="$attrs.class" />
+  <MyEnName id="svg-my-en-name" :class="$attrs.class" />
 </template>
 
 <script setup lang="ts">

src/components/design/index.ts

@@ -1,7 +1,6 @@
 import Circles from './Circles.vue';
 import MyName from './MyName.vue';
 import Star from './Star.vue';
-import ModernArtShape from './ModernArtShape.vue';
 import LoadingScreen from './LoadingScreen.vue';
 
-export { Circles, MyName, Star, ModernArtShape, LoadingScreen };
+export { Circles, MyName, Star, LoadingScreen };

src/components/sections/Hero.vue

@@ -1,28 +1,29 @@
 <template>
   <section class="padding-x mb-[-100svh] py-0">
-    <!--  -->
     <div
       id="hero"
-      class="sticky top-0 flex h-svh w-full items-end pb-[clamp(2.25rem,2.1786rem_+_0.3571vi,2.5rem)]"
+      class="sticky top-0 flex min-h-svh w-full items-end pb-[clamp(2.25rem,2.1786rem_+_0.3571vi,2.5rem)]"
     >
       <div class="relative flex w-full flex-col items-center">
         <div class="w-full items-end overflow-clip">
-          <div id="my-name" class="flex w-full translate-y-full items-start">
+          <div class="flex w-full items-start">
             <MyName />
-            <Star class="hide-on-mobile" />
+            <Star id="star" class="hide-on-mobile translate-x-full" />
           </div>
         </div>
 
-        <div class="column-gap spacing-t grid w-full grid-cols-12">
-          <div class="col-span-4 flex flex-col justify-center gap-10">
+        <div class="sm:column-gap spacing-t grid w-full grid-cols-12">
+          <div
+            class="col-span-full flex flex-col items-start gap-14 sm:col-span-4"
+          >
             <svg
               stroke="currentColor"
               fill="none"
               stroke-width="1.25"
               viewBox="6 6 12 12"
               stroke-linecap="round"
               stroke-linejoin="round"
-              class="m-0 size-4 p-0 md:size-6"
+              class="hide-on-mobile m-0 size-4 p-0 md:size-6"
               color="#8C8C73"
               style="color: #8c8c73"
               height="1em"
@@ -40,87 +41,83 @@
             <p
               v-html="whoAmI"
               id="whoAmI"
-              class="who-am-i text-fluid-body max-w-[30ch] overflow-clip text-balance text-lg font-medium leading-snug lg:text-start"
+              class="who-am-i text-fluid-body text-base-large w-full overflow-clip text-balance font-medium leading-snug sm:max-w-[37ch] lg:text-start"
             ></p>
 
-            <div class="flex origin-left flex-nowrap">
-              <Button class="contact" label="Contact me" url="#" />
+            <div class="flex origin-left sm:scale-125">
+              <Button class="contact" label="Get in touch" url="#" />
             </div>
           </div>
 
           <div
             id="profile-container"
-            class="col-span-3 h-[15vh] max-w-lg select-none flex-col rounded-lg md:flex md:h-[50vh]"
+            class="col-span-4 mt-10 h-[20vh] max-w-lg select-none flex-col rounded-lg sm:mt-0 md:flex md:h-[50vh]"
           >
             <div class="overlay absolute inset-0 z-[2] bg-flax-smoke-50"></div>
             <img
               id="profile-img"
               :src="profile"
-              alt="Ebrahhem profile"
+              alt="Ebraheem profile"
               decoding="async"
-              class="h-full scale-90 rounded-lg object-cover object-top brightness-110 grayscale"
+              class="size-full scale-90 rounded-lg object-cover object-top brightness-110 grayscale"
             />
           </div>
 
-          <!-- 
-        <div
-          class="col-span-8 col-start-5 flex flex-col justify-between gap-y-12 sm:gap-y-6 lg:gap-y-24"
-        >
-          <div class="column-gap flex items-center justify-between">
-            <ModernArtShape
-              id="art"
-              class="w-16 flex-shrink-0 scale-0 opacity-0 sm:block sm:w-20 md:w-32 xl:w-40 2xl:w-56 3xl:w-60"
-            />
-
-            <p class="sr-only">
-              A freelance full-stack developer, cutting-edge technologies to
-              deliver comprehensive solutions for your business.
-            </p>
-
-            <p
-              v-html="whoAmI"
-              id="whoAmI"
-              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 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>
-              <p class="font-fancy">{{ locationCountry }}</p>
+          <!-- content-end justify-self-end  -->
+          <div class="relative col-span-7 size-full text-end sm:col-span-4">
+            <div class="absolute bottom-0 right-0">
+              <p class="text-base font-medium">Available for work</p>
+              <h1 class="heading-2 font-fancy font-bold leading-none">
+                {{ AvailableForWorkDate }}
+              </h1>
             </div>
-            <p class="animate-pulse font-fancy text-sm">
-              SCROLL FOR MORE
-              <span
-                class="inline-block font-fancy motion-safe:animate-[bounce_2s_infinite]"
-                >↓</span
-              >
-            </p>
           </div>
-        </div> -->
         </div>
       </div>
     </div>
-
     <div class="h-svh"></div>
   </section>
 </template>
 
 <script setup lang="ts">
   import { onBeforeMount, ref } from 'vue';
-  import { MyName, Star, ModernArtShape } from '../design';
+  import { MyName, Star } from '../design';
   import { Button } from '@/components/common';
   import { profile } from '@/assets/images';
-  import { heroText, locationCountry, locationPlace } from '@/data';
+  import { heroText } from '@/data';
   import { textSplitter } from '@/functions';
-  import { lenis } from '@/main';
 
   const whoAmI = ref(heroText);
+  const AvailableForWorkDate = ref('');
+
+  const getAvailableForWorkDate = () => {
+    const date = new Date();
+    const year = date.getFullYear().toString().slice(-2);
+    const monthNames = [
+      'JAN',
+      'FEB',
+      'MAR',
+      'APR',
+      'MAY',
+      'JUN',
+      'JUL',
+      'AUG',
+      'SEP',
+      'OCT',
+      'NOV',
+      'DEC',
+    ];
+    let index = date.getMonth();
+    if (date.getMonth() < 12) {
+      index += 1;
+    }
+    const month = monthNames[index];
+
+    return `${month} '${year}`;
+  };
 
   onBeforeMount(() => {
     whoAmI.value = textSplitter(whoAmI.value);
+    AvailableForWorkDate.value = getAvailableForWorkDate();
   });
 </script>