Skip to content

Commit

Permalink
finish the about me section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hetari
Hetari committed Aug 20, 2024
1 parent ff6e033 commit 89d4b8c
Show file tree
Hide file tree
Showing 5 changed files with 136 additions and 111 deletions.
16 changes: 9 additions & 7 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
class="padding-x relative rounded-t-3xl bg-[#0B0B0A] py-[5%] text-flax-smoke-200"
>
<Services />
<Works />
<!-- <Works /> -->
</div>
<div class="relative">
<LittleBitAboutMe />
Expand All @@ -46,17 +46,14 @@
</template>

<script setup lang="ts">
import {
Hero,
Services,
Works,
LittleBitAboutMe,
} from '@/components/sections';
import { Hero, Services, LittleBitAboutMe } from '@/components/sections';
import { onMounted, Ref, ref, watch } from 'vue';
import { LoadingScreen } from '@/components/design';
import { useWindowSize } from '@vueuse/core';
import { lenis, raf } from './main';
import { Navbar } from './components/common';
import { onUpdated } from 'vue';
import { animateHeroNav } from './animations';
const { width, height } = useWindowSize();
const noise: Ref<HTMLElement | null> = ref(null);
Expand Down Expand Up @@ -84,6 +81,11 @@
noise.value.style.width = `${width.value}px`;
}
});
// Todo: remove this
onUpdated(() => {
animateHeroNav();
});
</script>

<style>
Expand Down
62 changes: 25 additions & 37 deletions src/animations/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,12 @@ const animateSplitText = (
duration: number = 0.8,
stagger: number = 0.005,
delay: number = 0,
onStartFn: () => void = () => {},
) => {
gsap.to(id, {
onStart: () => {
fadeIn(textId, 100, 2);
onStartFn();
},

scrollTrigger: {
Expand Down Expand Up @@ -48,7 +50,16 @@ const navbarScale = (selector: string, trigger: string) => {
// ! common animations
const yToZero = (id: string) => {
gsap.to(id, {
y: '0%',
y: 0,
duration: 0.4,
ease: 'power1.inOut',
stagger: 0.1,
});
};

const xToZero = (id: string) => {
gsap.to(id, {
x: 0,
duration: 0.4,
ease: 'power1.inOut',
stagger: 0.1,
Expand Down Expand Up @@ -271,19 +282,22 @@ const animateHeroNav = () => {

gsap.to('#svg-my-en-name g path', {
y: 0,
delay: 0.2,
duration: 0.8,
ease: 'power4.inOut',
stagger: 0.01,
});

gsap.to('#star', {
x: 1,
delay: 0.4,
duration: 0.8,
ease: 'power4.inOut',
});

gsap.to('.overlay', {
y: '100%',
delay: 0.4,
duration: 0.8,
ease: 'power4.inOut',
onComplete: () => {
Expand All @@ -293,11 +307,19 @@ const animateHeroNav = () => {

gsap.to('#profile-img', {
scale: 1,
delay: 0.4,
duration: 0.8,
ease: 'power4.inOut',
});

gsap.to('#down-arrow', {
x: 0,
delay: 0.8,
duration: 0.8,
ease: 'power4.inOut',
});

animateSplitText('#whoAmI .letters', '#whoAmI .letters');
animateSplitText('#whoAmI .letters', '#whoAmI .letters', 0.8, 0.005, 0.6);

// Hero scroll animation
gsap.to('#hero', {
Expand All @@ -313,41 +335,9 @@ const animateHeroNav = () => {
};

// A little bit about me animation
const profileEnter = (id: string) => {
gsap.to(id, {
y: '0%',
opacity: 1,
duration: 1,
});
};
const shapeChange = (id: string) => {
gsap.to(id, {
scale: 0.99,
y: -5,
scrollTrigger: {
trigger: id,
start: '0% center',
toggleActions: 'play none none reverse',
},

onStart: () => {
profileEnter('#profile2');
},
});
};

const divScrollDown = (id: string) => {
gsap.to(id, {
scrollTrigger: {
trigger: id,
start: 'center center',
scrub: 1,
},
translateY: '100%',
});
};

export {
xToZero,
navbarScale,
activateMagneto,
resetMagneto,
Expand All @@ -358,6 +348,4 @@ export {
animateLoadingTextContainer,
animateHeroNav,
animateSplitText,
shapeChange,
divScrollDown,
};
42 changes: 23 additions & 19 deletions src/components/sections/Hero.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,26 @@
<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="hide-on-mobile m-0 size-4 p-0 md:size-6"
color="#8C8C73"
style="color: #8c8c73"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line x1="7" y1="7" x2="17" y2="17"></line>
<polyline points="17 7 17 17 7 17"></polyline>
</svg>
<div class="overflow-hidden">
<svg
id="down-arrow"
stroke="currentColor"
fill="none"
stroke-width="1.25"
viewBox="6 6 12 12"
stroke-linecap="round"
stroke-linejoin="round"
class="hide-on-mobile m-0 size-4 -translate-x-full p-0 md:size-6"
color="#8C8C73"
style="color: #8c8c73"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line x1="7" y1="7" x2="17" y2="17"></line>
<polyline points="17 7 17 17 7 17"></polyline>
</svg>
</div>

<p class="sr-only">
A freelance full-stack developer, cutting-edge technologies to
Expand All @@ -58,7 +61,6 @@
id="profile-img"
:src="profile"
alt="Ebraheem profile"
decoding="async"
class="size-full scale-90 rounded-lg object-cover object-top brightness-110 grayscale"
/>
</div>
Expand Down Expand Up @@ -92,7 +94,8 @@
const getAvailableForWorkDate = () => {
const date = new Date();
const year = date.getFullYear().toString().slice(-2);
const year = date.getFullYear().toString(); // .slice(-2);
const monthNames = [
'JAN',
'FEB',
Expand All @@ -108,6 +111,7 @@
'DEC',
];
let index = date.getMonth();
if (date.getMonth() < 12) {
index += 1;
}
Expand Down
110 changes: 64 additions & 46 deletions src/components/sections/LittleBitAboutMe.vue
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,76 @@
<template>
<!-- <svg
class="absolute fill-[#0B0B0A] left-0 top-0 origin-center object-center"
id="morph-example"
xmlns="http://www.w3.org/2000/svg"
:width="width"
:height="height"
>
<path
id="rectangle"
class="transition-all duration-500 ease-in-out"
:d="initialPath"
/>
</svg> -->
<section
id="little-bit-about-me-section"
class="padding-x absolute rounded-b-3xl bg-[#0B0B0A] py-[5%] text-flax-smoke-200"
id=" little-bit-about-me-section"
class="common-padding -mt-0.5 rounded-b-3xl bg-[#0B0B0A] text-flax-smoke-200 sm:mt-0"
>
<h1
id="little-bit-about-me"
v-html="littleBitAboutMe"
class="text-[calc(3.125rem_+_((1vw_-_6.4px)_*_6.0938))] font-extrabold uppercase leading-loose"
></h1>

<div
id="little-bit-about-me-text"
class="relative flex w-full flex-col items-end justify-end font-medium leading-snug text-flax-smoke-300 opacity-0 sm:-mt-12 lg:grid"
>
<div class="relative mt-40 flex flex-auto items-center justify-center">
<div class="column-gap grid grid-cols-12">
<div class="hide-on-mobile overflow-hidden md:col-span-4">
<svg
class="absolute left-1/2 top-1/2 z-10 mt-20 hidden w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 opacity-10 sm:block 2xl:max-w-4xl 3xl:max-w-5xl"
viewBox="0 0 709 300"
id="down-arrow-2"
stroke="currentColor"
fill="none"
stroke-width="1.25"
viewBox="6 6 12 12"
stroke-linecap="round"
stroke-linejoin="round"
class="hide-on-mobile m-0 size-20 -translate-x-full p-0"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="709" height="300" rx="169.963" fill="#AFAF9D"></rect>
<line x1="7" y1="7" x2="17" y2="17"></line>
<polyline points="17 7 17 17 7 17"></polyline>
</svg>
</div>

<h1
id="little-bit-about-me"
v-html="littleBitAboutMe"
class="heading-1-alt lg:heading-1 section-heading relative z-30 col-span-full w-full font-extrabold uppercase leading-none md:col-span-8 md:col-start-6"
></h1>
</div>

<div class="padding-y column-gap mt-6 grid grid-cols-12">
<div
class="pointer-events-none col-span-full select-none rounded-lg md:col-span-4"
>
<img
:src="profile2"
id="profile2"
class="z-20 mx-auto translate-y-1/2 opacity-50 mix-blend-lighten brightness-90 grayscale"
alt="Me"
class="aspect-[3/4.5] size-full rounded-lg object-cover object-top"
alt="Headshot of Ebraheem facing a camera"
/>
</div>
<div class="col-span-full mt-10 md:col-span-8 md:col-start-6">
<p
class="heading-4 relative w-full max-w-[40ch] text-balance font-medium leading-snug"
>
With a passion for design and development, I take projects from
ideation to launch, ensuring a seamless journey that leaves a lasting
positive impact on the digital landscape and your business.
</p>

<p
class="text-fancy w-full text-[calc(1.375rem+_((1vw_-_6.4px)_*_0.7813))] sm:font-semibold"
>
I empower startups of all scales by creating custom web experiences that
are both memorable and successful. With a deep passion for design and
development, I guide projects from ideation to launch, ensuring a
seamless and impactful journey in the digital landscape. My commitment
to excellence drives the success of startups, delivering unique and
engaging web solutions that stand out.
</p>
<div class="mt-[5%] flex justify-start gap-[5rem] text-flax-smoke-300">
<p class="heading-6 text-nowrap text-center text-flax-smoke-300/85">
( ABOUT ME )
</p>
<p class="text-fancy heading-6 max-w-[40ch] text-balance font-mono">
Creating great web experiences is my primary focus. I ensure each
project leaves users with a feel-good sensation through meticulous
attention to detail and user-centric design principles.
<br />
<br />
When I'm not immersed in web development and design, you can find me
sharing insights about my freelance journey on YouTube, bouldering,
playing music, or tending to my cherished houseplants.
</p>
</div>
</div>
</div>
</section>
</template>

<script setup lang="ts">
import { animateSplitText, shapeChange } from '@/animations';
import { animateSplitText, xToZero } from '@/animations';
import { profile2 } from '@/assets/images';
import { textSplitter } from '@/functions';
import { onBeforeMount, onMounted, ref } from 'vue';
Expand All @@ -72,17 +83,24 @@
// );
onBeforeMount(() => {
littleBitAboutMe.value = textSplitter('A little bit about me / ', true);
littleBitAboutMe.value = textSplitter(
'Programmer, Developer, Designer/',
true,
true,
);
});
onMounted(() => {
animateSplitText(
'#little-bit-about-me .letters',
'#little-bit-about-me-text',
'#little-bit-about-me',
0.7,
0.01,
0,
() => {
console.log('hello 2');
xToZero('#down-arrow-2');
},
);
shapeChange('#little-bit-about-me-section');
});
</script>
Loading

0 comments on commit 89d4b8c

Please sign in to comment.