animation added

sergeylitvinenko1 · Feb 19, 2024 · 3687570 · 3687570
1 parent a421447
commit 3687570
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -2,7 +2,7 @@ import styles from '@/app/ui/home.module.css';
 import { montserrat } from '@/app/ui/fonts';
 import Image from 'next/image';
 import { Metadata } from 'next';
-
+import { motion } from 'framer-motion'
 import Link from 'next/link';
 
 export const metadata: Metadata = {
@@ -13,9 +13,23 @@ export default function Page() {
   return (
     <div className={styles.container}>
       <main className={styles.main}>
-        <h1 className={`${montserrat.className} text-xl md:text-3xl md:leading-normal`}>
-          My name is Sergey Litvinenko
-        </h1>
+        <motion.div initial="hidden" animate="visible" variants={{
+          hidden: {
+            scale: .8,
+            opacity:0
+          },
+          visible: {
+            scale: 1,
+            opacity: 1,
+            transition: {
+              delay: .4
+            }
+          },
+        }}>
+          <h1 className={`${montserrat.className} text-xl md:text-3xl md:leading-normal`}>
+            My name is Sergey Litvinenko
+          </h1>
+        </motion.div>
         <div className="flex relative top-5 justify-center gap-4 grid-cols-3 grid-rows-1"> 
           <div className="justify-center items-end flex flex-1 flex-row">
             <div className="text-center">