From ee586ba1d80f4fd73a4be2d9724e4174c587bcb9 Mon Sep 17 00:00:00 2001
From: Hetari <hetari4py@gmail.com>
Date: Sat, 27 Jul 2024 18:57:02 +0300
Subject: [PATCH] fix hero ui

---
 src/animations/index.ts                  | 22 ++++--
 src/components/MyEnName.vue              | 39 +++++++++-
 src/components/common/Button.vue         |  6 +-
 src/components/design/ModernArtShape.vue | 22 ------
 src/components/design/MyName.vue         |  2 +-
 src/components/design/index.ts           |  3 +-
 src/components/sections/Hero.vue         | 97 ++++++++++++------------
 src/components/sections/Services.vue     | 41 ----------
 src/data.ts                              |  2 +
 9 files changed, 106 insertions(+), 128 deletions(-)
 delete mode 100644 src/components/design/ModernArtShape.vue

diff --git a/src/animations/index.ts b/src/animations/index.ts
index 17e1e3e..e036637 100644
--- a/src/animations/index.ts
+++ b/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: {
diff --git a/src/components/MyEnName.vue b/src/components/MyEnName.vue
index 6c0c87c..d1728d1 100644
--- a/src/components/MyEnName.vue
+++ b/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>
diff --git a/src/components/common/Button.vue b/src/components/common/Button.vue
index d809b4b..0f2e891 100644
--- a/src/components/common/Button.vue
+++ b/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>
diff --git a/src/components/design/ModernArtShape.vue b/src/components/design/ModernArtShape.vue
deleted file mode 100644
index 5937a6c..0000000
--- a/src/components/design/ModernArtShape.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <svg
-      class="flex rotate-90 gap-8"
-      viewBox="0 0 72 68"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M72 36L36 0L0 36H12L36 12L60 36H72Z"
-        class="fill-flax-smoke-900"
-      />
-      <path
-        d="M72 52L36 16L0 52H12L36 28L60 52H72Z"
-        class="fill-flax-smoke-700"
-      />
-      <path
-        d="M72 68L36 32L0 68H12L36 44L60 68H72Z"
-        class="fill-flax-smoke-600"
-      />
-    </svg>
-  </div>
-</template>
diff --git a/src/components/design/MyName.vue b/src/components/design/MyName.vue
index 20b65e5..bd254d8 100644
--- a/src/components/design/MyName.vue
+++ b/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">
diff --git a/src/components/design/index.ts b/src/components/design/index.ts
index 54a380d..8851679 100644
--- a/src/components/design/index.ts
+++ b/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 };
diff --git a/src/components/sections/Hero.vue b/src/components/sections/Hero.vue
index 052f36d..4fdab35 100644
--- a/src/components/sections/Hero.vue
+++ b/src/components/sections/Hero.vue
@@ -1,20 +1,21 @@
 <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)]"
     >
       <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"
@@ -22,7 +23,7 @@
               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,17 +41,17 @@
             <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">
+            <div class="flex origin-left sm:scale-125">
               <Button class="contact" label="Contact me" 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
@@ -62,65 +63,61 @@
             />
           </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>
diff --git a/src/components/sections/Services.vue b/src/components/sections/Services.vue
index dd126c8..04fc64e 100644
--- a/src/components/sections/Services.vue
+++ b/src/components/sections/Services.vue
@@ -96,47 +96,6 @@
     },
   ];
 
-  const getCardClass = (index: number) => {
-    // const baseClasses =
-    //   ' sticky border-t border-flax-smoke-500/50 bg-[#0B0B0A]  ';
-    // const topLargeScreen = [
-    //   `lg:top-[calc(0rem_+_10vh)]`,
-    //   `lg:top-[calc(8.5rem_+_10vh)]`,
-    //   `lg:top-[calc(28rem_+_10vh)]`,
-    // ];
-    // const topSmallScreen = [
-    //   'top-[calc(0rem_+_10vh)]',
-    //   'top-[calc(5rem_+_10vh)]',
-    //   'top-[calc(19rem_+_10vh)]',
-    // ];
-    // // const topMdScreen = [
-    // //   'md:top-[calc(0rem_+_20vh)]',
-    // //   'md:top-[calc(6rem_+_20vh)]',
-    // //   'md:top-[calc(12rem_+_20vh)]',
-    // // ];
-    // const topMdScreen = [
-    //   'md:top-[calc(0rem_+_20vh)]',
-    //   'md:top-[calc(6rem_+_20vh)]',
-    //   'md:top-[calc(14rem_+_20vh)]',
-    // ];
-    // const mbLargeScreen = [
-    //   'lg:mb-[22rem] 3xl:mb-[25rem] 3xl:bg-red-500',
-    //   'lg:mb-[17rem]',
-    //   'lg:mb-[8rem]',
-    // ];
-    // // const mbMdScreen = ['md:mb-[10rem]', 'md:mb-[6rem]', 'md:mb-[0rem]'];
-    // const mbMdScreen = ['md:mb-[10rem]', 'md:mb-[6rem]', 'md:mb-[0rem]'];
-    // const mbSmallScreen = ['mb-[9.5rem]', 'mb-[7rem]', 'mb-[0rem]'];
-    // return `${baseClasses}
-    //   ${topMdScreen[index]}
-    // ${mbMdScreen[index]}
-    //  ${topSmallScreen[index]}
-    //  ${mbSmallScreen[index]}
-    // ${topLargeScreen[index]}
-    //  ${mbLargeScreen[index]}
-    //  `;
-  };
-
   onBeforeMount(() => {
     whatIDo.value = textSplitter('What I do /', true);
   });
diff --git a/src/data.ts b/src/data.ts
index d1ee38a..85e5ca4 100644
--- a/src/data.ts
+++ b/src/data.ts
@@ -37,6 +37,8 @@ const socialLinks = [
 
 const heroText =
   'A freelance full-stack developer, making good shit since 2023, hiding bad shit since 2023.';
+
+// TODO: Add location
 const locationPlace = `15°22'22.0"N 44°10'39.5"E`;
 const locationCountry = 'Yemen, Sanaa';