Feat: Added Framer Motion Animation

app/(sections)/about/page.tsx

@@ -1,11 +1,27 @@
+"use client";
+
 import React from "react";
+import { motion } from "framer-motion";
 
 export default function About() {
   return (
     <div className="flex flex-col md:flex-row items-center justify-center pt-2 pb-10">
       <div className="text-justify p-6 md:w-1/2">
-        <h1 className="text-2xl font-bold text-center mt-2 mb-5">About Me</h1>
-        <p className="text-lg md:text-xl">
+        <motion.h1
+          className="text-2xl font-bold text-center mt-2 mb-5"
+          initial={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7 }}
+        >
+          About Me
+        </motion.h1>
+
+        <motion.p
+          className="text-lg md:text-xl"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.3, duration: 0.7 }}
+        >
           I am a passionate full-stack web developer with experience in building
           innovative and scalable web applications.
           <br />
@@ -26,12 +42,12 @@ export default function About() {
           Code, Netlify, and Vercel.
           <br />
           <br />I have completed various projects, including
-          <span className="font-semibold mx-2">
+          <span className="font-semibold mx-2 transition-all duration-200 hover:scale-105">
             a job portal, article summarizer, and notes web application,
           </span>
           which demonstrate my technical expertise and attention to detail.
           <br />
-        </p>
+        </motion.p>
       </div>
     </div>
   );

app/(sections)/contact/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import emailjs from "@emailjs/browser";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
@@ -8,6 +9,7 @@ import { useState } from "react";
 import { toast } from "sonner";
 import { Label } from "@/components/ui/label";
 import Image from "next/image";
+import { motion } from "framer-motion";
 
 export default function page() {
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -36,9 +38,19 @@ export default function page() {
   };
 
   return (
-    <div className="w-full flex flex-col min-h-full justify-center items-center">
+    <motion.div
+      className="w-full flex flex-col min-h-full justify-center items-center"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+    >
       <h1 className="text-3xl font-semibold text-center my-10">Contact</h1>
-      <div className="flex flex-col md:flex-row lg:w-[70%] items-center justify-around">
+      <motion.div
+        className="flex flex-col md:flex-row lg:w-[70%] items-center justify-around"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+      >
         <Card className="w-[90vw] lg:w-[500px] drop-shadow-md">
           <CardHeader className="text-center font-semibold">
             Feel Free To Write Anything
@@ -85,7 +97,12 @@ export default function page() {
             </form>
           </CardContent>
         </Card>
-        <div className="lg:w-[500px] hidden lg:block">
+        <motion.div
+          className="lg:w-[500px] hidden lg:block"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+        >
           <Image
             height={500}
             width={500}
@@ -95,8 +112,8 @@ export default function page() {
             src="/contact.svg"
             alt="contactimg"
           />
-        </div>
-      </div>
-    </div>
+        </motion.div>
+      </motion.div>
+    </motion.div>
   );
 }

app/(sections)/experience/Education.tsx

@@ -1,12 +1,20 @@
+"use client";
+import React from "react";
 import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
 
 const Education = () => {
   return (
     <div className="flex flex-col my-20 ">
       <div className="max-w-[32rem] flex justify-center items-center mx-auto">
-        <ol className="relative border-s  border-gray-200 dark:border-gray-700">
+        <motion.ol
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7 }}
+          className="relative border-s  border-gray-200 dark:border-gray-700"
+        >
           {Data.map((data) => (
-            <li className="mb-10 ms-6" key={data.name}>
+            <li key={data.name} className="mb-10 ms-6">
               <span className="absolute flex items-center justify-center w-10 h-10 rounded-full -start-5 md:-start-6  ring-2">
                 <img src={data.logo} className="rounded-full" alt={data.name} />
               </span>
@@ -25,7 +33,7 @@ const Education = () => {
               </time>
             </li>
           ))}
-        </ol>
+        </motion.ol>
       </div>
     </div>
   );

app/(sections)/experience/Experience.tsx

@@ -1,10 +1,17 @@
+"use client";
 import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
 
 const Experience = () => {
   return (
     <div className="flex flex-col my-20 gap-10">
       <div className="max-w-[32rem] flex justify-center items-center mx-auto">
-        <ol className="relative border-s  border-gray-200 dark:border-gray-700">
+        <motion.ol
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7 }}
+          className="relative border-s  border-gray-200 dark:border-gray-700"
+        >
           {Data.map((data) => (
             <li className="mb-10 ms-6" key={data.name}>
               <span className="absolute flex items-center justify-center w-10 h-10 rounded-full -start-4 md:-start-6  ring-2">
@@ -29,7 +36,7 @@ const Experience = () => {
               </time>
             </li>
           ))}
-        </ol>
+        </motion.ol>
       </div>
     </div>
   );

app/(sections)/projects/page.tsx

@@ -1,19 +1,32 @@
+"use client";
+
 import { Github, LucideExternalLink } from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
+import { motion } from "framer-motion";
 
-import { Card } from "@/components/ui/card";
 import { ProjectData } from "./constant";
 
-function page() {
+function ProjectsPage() {
   return (
-    <div className="flex flex-col justify-center items-center px-3">
+    <motion.div
+      className="flex flex-col justify-center items-center px-3"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+    >
       <h1 className="text-3xl font-bold text-center border-spacing-2 border-b-2 border-b-blue-600 my-10">
         Projects
       </h1>
       <div className="flex flex-wrap justify-center gap-10">
         {ProjectData.map(({ title, img, live, github, techstack }, index) => (
-          <Card key={index} className="flex flex-col w-96 gap-2 rounded-lg p-4">
+          <motion.div
+            key={index}
+            className="flex flex-col w-96 gap-2 rounded-lg p-4 ring-2 ring-gray-200 dark:ring-gray-700 shadow-md hover:shadow-lg transition-all"
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: index * 0.1 }}
+          >
             <div className="relative group rounded-lg">
               <Image
                 src={img}
@@ -50,11 +63,11 @@ function page() {
                 {techstack}
               </p>
             </div>
-          </Card>
+          </motion.div>
         ))}
       </div>
-    </div>
+    </motion.div>
   );
 }
 
-export default page;
+export default ProjectsPage;

app/(sections)/skills/constant.tsx

@@ -82,11 +82,13 @@ function SkillCategory({ skills }: { skills: any[] }) {
             variant="secondary"
             className="p-3 h-12 flex justify-center drop-shadow-sm items-center gap-2"
           >
-            <img
-              src={skill?.icon}
-              alt={skill?.name}
-              className="w-10 h-10 text-slate-300"
-            />
+            <div>
+              <img
+                src={skill?.icon}
+                alt={skill?.name}
+                className="w-10 h-10 text-slate-300"
+              />
+            </div>
             {skill?.name}
           </Button>
         </div>

app/(sections)/skills/page.tsx

@@ -1,17 +1,17 @@
+"use client";
+
 import React from "react";
 import { Frontend, Backend, Tools } from "./constant";
+import { motion } from "framer-motion";
 
 interface SkillComponents {
-  Frontend: () => JSX.Element;
-  Backend: () => JSX.Element;
-  Tools: () => JSX.Element;
   [key: string]: () => JSX.Element;
 }
 
 const skillComponents: SkillComponents = {
-  Frontend,
-  Backend,
-  Tools,
+  Frontend: Frontend,
+  Backend: Backend,
+  Tools: Tools,
 };
 
 const data = [
@@ -41,9 +41,16 @@ const Skills = () => {
               <div className="w-16 h-[1px] bg-blue-500 rounded-full my-1"></div>
             </div>
 
-            <div className="flex flex-wrap justify-center items-center gap-5">
-              {skillComponents[label]?.()}
-            </div>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.3 }}
+              className="flex flex-wrap justify-center items-center gap-5"
+            >
+              {skillComponents[label] && (
+                <motion.div>{skillComponents[label]()}</motion.div>
+              )}
+            </motion.div>
           </div>
         ))}
       </div>

components/Hero.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import Link from "next/link";
 import { File, User } from "lucide-react";
 import Image from "next/image";
@@ -8,27 +7,51 @@ import { Button } from "@/components/ui/button";
 import ThemeSwitcher from "@/components/ThemeSwitcher";
 import { TypewriterEffectSmooth } from "./ui/typewriter-effect";
 import { PhoneSocial } from "./Social";
+import { motion } from "framer-motion";
 
 export default function Hero() {
   return (
     <div className="py-16 min-h-[80vh] md:min-h-[85vh] flex items-center flex-col-reverse lg:flex-row gap-10 justify-center">
       <div className="flex flex-col gap-4 text-left lg:w-1/2 2xl:w-1/3 mx-6 xl:mx-0 ">
-        <p className="text-2xl font-bold text-light-blue-700">Hey,</p>
-        <p className="text-3xl md:text-5xl font-bold relative">
+        <motion.p
+          className="text-2xl font-bold text-light-blue-700"
+          initial={{ y: -50, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ duration: 0.6 }}
+        >
+          Hey,
+        </motion.p>
+        <motion.p
+          className="text-3xl md:text-5xl font-bold relative"
+          initial={{ x: -200, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          transition={{ delay: 0.3, duration: 0.8 }}
+        >
           I'm
           <span className="text-blue-500 ml-4 uppercase">Pankaj Kumar</span>
-        </p>
+        </motion.p>
         <TypewriterEffectSmooth words={words} />
-        <p className="text-lg md:text-xl font-medium relative">
+        <motion.p
+          className="text-lg md:text-xl font-medium relative"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.6, duration: 0.7 }}
+        >
           I'm a Full Stack Developer based in India. I have a passion for web
           development and love to create for web apps.
-        </p>
+        </motion.p>
 
-        <PhoneSocial />
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.8 }}
+        >
+          <PhoneSocial />
+        </motion.div>
 
         <div className="flex flex-row justify-center md:justify-normal gap-4 md:gap-6 mt-5">
           <Link href={"/about"}>
-            <Button variant="outline" className="flex gap-2 items-center">
+            <Button variant="secondary" className="flex gap-2 items-center">
               <User className="text-lg" />
               About Me
             </Button>
@@ -37,7 +60,7 @@ export default function Hero() {
             href="https://drive.google.com/file/d/1Yd3Z6GO8-vxHOldYckjj42sf8mjP2SgP/view?usp=drive_open"
             target="_blank"
           >
-            <Button variant="outline" className="flex gap-2 items-center">
+            <Button variant="secondary" className="flex gap-2 items-center">
               <File className="text-lg" />
               Resume
             </Button>
@@ -46,7 +69,11 @@ export default function Hero() {
         </div>
       </div>
 
-      <div>
+      <motion.div
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.8, delay: 0.3 }}
+      >
         <Image
           src="/pk.jpg"
           width={300}
@@ -56,7 +83,7 @@ export default function Hero() {
           alt="Pankaj Kumar"
           className="rounded-full w-52 h-52 md:w-72 md:h-72 object-cover object-center shadow-lg"
         />
-      </div>
+      </motion.div>
     </div>
   );
 }
@@ -72,9 +99,6 @@ const words = [
     text: "Web",
   },
   {
-    text: "Developer,",
-  },
-  {
-    text: "NextJS",
+    text: "Developer...",
   },
 ];