feat: create motion animations for router transitions

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@heroicons/react": "2.0.18",
     "@material-tailwind/react": "2.1.2",
+    "framer-motion": "^11.1.7",
     "next": "14.1.4",
     "react": "18",
     "react-dom": "18"

src/app/landing-page.tsx

@@ -1,12 +1,18 @@
+import { motion } from 'framer-motion';
 import Link from 'next/link';
 
 export default function LandingPage() {
   return (
-    <div className="flex flex-col justify-center items-center h-screen" style={{ backgroundImage: `url('./image/backgr.jpg')`, backgroundSize: 'cover' }}>
+    <motion.div     initial={{ y: 25, opacity: 0 }}
+    animate={{ y: 0, opacity: 1 }}
+    transition={{
+      duration: 0.75,
+    }}
+    className="flex flex-col justify-center items-center h-screen" style={{ backgroundImage: `url('./image/backgr.jpg')`, backgroundSize: 'cover' }}>
       <h1 className="text-4xl font-bold mb-8">blvckleg.dev</h1>
       <Link href="/portfolio" className='text-2xl enter-button'>
           enter
       </Link>
-    </div>
+    </motion.div>
   );
 }

src/app/layout.tsx

@@ -13,7 +13,7 @@ const roboto = Roboto({
 export const metadata: Metadata = {
   title: "Blvckleg",
   description:
-    "Blvckleg Portfolio.",
+    "blvckleg.dev",
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -1,10 +1,26 @@
 'use client';
+import { AnimatePresence, motion } from 'framer-motion';
 import LandingPage from './landing-page';
 
 export default function Portfolio() {
   return (
-    <>
+    <AnimatePresence mode='wait'>
+    <motion.div initial="initialState" animate="animateState" exit="exitState" transition={{ duration: 0.75 }}
+    variants={{
+      initialState: {
+        opacity: 0,
+      },
+      animateState: {
+        opacity: 1,
+      },
+      exitState: {
+        opacity: 0,
+      },
+    }} className="base-page-size"
+    >
       <LandingPage />
-    </>
+    </motion.div>
+    </AnimatePresence>
+
   );
 }

src/app/portfolio/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { motion } from "framer-motion";
 import { Footer, Navbar } from "../../components";
 import Hero from "./hero";
 import Projects from "./projects";
@@ -8,13 +9,30 @@ import Skills from "./skills";
 
 export default function Portfolio() {
   return (
-    <>
+    <motion.div initial="initialState" animate="animateState" exit="exitState" transition={{ duration: 0.75 }}
+    variants={{
+      initialState: {
+        y: 25,
+        opacity: 0,
+        clipPath: "polygon(50% 0, 50% 0, 50% 100%, 50% 100%)"
+      },
+      animateState: {
+        y: 0,
+        opacity: 1,
+        clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)"
+      },
+      exitState: {
+        opacity: 0,
+        clipPath: "polygon(50% 0, 50% 0, 50% 100%, 50% 100%)"
+      },
+    }} className="base-page-size"
+    >
       <Navbar />
       <Hero />
       <Skills />
       <Projects />
       <Resume />
       <Footer />
-    </>
+    </motion.div>
   );
 }