feat: apply pull-up & pull-down animations

src/app/_components/header/Header.tsx

@@ -11,9 +11,9 @@ export const Header = () => (
   >
     <Content>
       <div className={'flex flex-col gap-2'}>
-        <Avatar src={'./avatar.jpeg'} />
+        <Avatar className="animate-pull-down opacity-0" src={'./avatar.jpeg'} />
 
-        <div className="max-w-[550px]">
+        <div className="animate-pull-up max-w-[550px] opacity-0">
           <Heading variant={'title'}>Bruno Menegidio</Heading>
           <Heading variant={'title'}>Software Engineer 🧑🏻‍💻❤️</Heading>
           <MacOSWindow className={'my-10'}>
@@ -22,5 +22,6 @@ export const Header = () => (
         </div>
       </div>
     </Content>
+    x
   </header>
 );

src/app/_components/header/avatar/Avatar.tsx

@@ -1,7 +1,14 @@
+import clsx from 'clsx';
 import Image from 'next/image';
 
 import { Props } from '@/app/_components/header/avatar/types/props';
 
-export const Avatar = ({ src }: Props) => (
-  <Image src={src} alt={'Profile'} className={'rounded-full ring-2 ring-gray-400'} width={75} height={75} />
+export const Avatar = ({ src, className }: Props) => (
+  <Image
+    src={src}
+    alt={'Profile'}
+    className={clsx('rounded-full ring-2 ring-gray-400', className)}
+    width={75}
+    height={75}
+  />
 );

src/app/_components/header/avatar/types/props.ts

@@ -1,3 +1,4 @@
 export type Props = {
   src: string;
+  className?: string;
 };