Skip to content

Commit

Permalink
fix hero ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hetari
Hetari committed Jul 27, 2024
1 parent 482a73e commit ee586ba
Show file tree
Hide file tree
Showing 9 changed files with 106 additions and 128 deletions.
22 changes: 14 additions & 8 deletions src/animations/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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: {
Expand Down
39 changes: 38 additions & 1 deletion src/components/MyEnName.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
6 changes: 3 additions & 3 deletions src/components/common/Button.vue
View file
Original file line number Diff line number Diff line change
@@ -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
>
Expand All @@ -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>
Expand Down
22 changes: 0 additions & 22 deletions src/components/design/ModernArtShape.vue
View file

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/design/MyName.vue
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
3 changes: 1 addition & 2 deletions src/components/design/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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 };
97 changes: 47 additions & 50 deletions src/components/sections/Hero.vue
View file
Original file line number Diff line number Diff line change
@@ -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)]"
>
<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"
Expand All @@ -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
Expand All @@ -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>
41 changes: 0 additions & 41 deletions src/components/sections/Services.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down
2 changes: 2 additions & 0 deletions src/data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down

0 comments on commit ee586ba

Please sign in to comment.