Update animations and styles in contact, projects, skills, experience…

…, and education pages

app/(sections)/about/page.tsx

@@ -1,27 +1,12 @@
 "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">
-        <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>
+      <div className="text-justify animate_in p-6 md:w-1/2">
+        <h1 className="text-2xl font-bold text-center mt-2 mb-5">About Me</h1>
 
-        <motion.p
-          className="text-lg md:text-xl"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.3, duration: 0.7 }}
-        >
+        <p className="text-lg md:text-xl">
           I am a passionate full-stack web developer with experience in building
           innovative and scalable web applications.
           <br />
@@ -42,12 +27,12 @@ export default function About() {
           Code, Netlify, and Vercel.
           <br />
           <br />I have completed various projects, including
-          <span className="font-semibold mx-2 transition-all duration-200 hover:scale-105">
-            a job portal, article summarizer, and notes web application,
+          <span className="font-semibold mx-2">
+            The job portal, article summarizer, and notes web application,
           </span>
           which demonstrate my technical expertise and attention to detail.
           <br />
-        </motion.p>
+        </p>
       </div>
     </div>
   );

app/(sections)/contact/page.tsx

@@ -8,8 +8,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { useState } from "react";
 import { toast } from "sonner";
 import { Label } from "@/components/ui/label";
-import Image from "next/image";
-import { motion } from "framer-motion";
+import NextImage from "@/components/NextImage";
 
 export default function page() {
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -38,19 +37,9 @@ export default function page() {
   };
 
   return (
-    <motion.div
-      className="w-full flex flex-col min-h-full justify-center items-center"
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-    >
+    <div className="w-full flex animate_in flex-col min-h-full justify-center items-center">
       <h1 className="text-3xl font-semibold text-center my-10">Contact</h1>
-      <motion.div
-        className="flex flex-col md:flex-row lg:w-[70%] items-center justify-around"
-        initial={{ opacity: 0, y: 50 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.7 }}
-      >
+      <div className="flex flex-col md:flex-row lg:w-[70%] items-center justify-around">
         <Card className="w-[90vw] lg:w-[500px] drop-shadow-md">
           <CardHeader className="text-center font-semibold">
             Feel Free To Write Anything
@@ -97,23 +86,16 @@ export default function page() {
             </form>
           </CardContent>
         </Card>
-        <motion.div
-          className="lg:w-[500px] hidden lg:block"
-          initial={{ opacity: 0, y: -50 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.7 }}
-        >
-          <Image
+        <div className="lg:w-[500px] hidden lg:block">
+          <NextImage
             height={500}
             width={500}
-            loading="lazy"
-            quality={80}
             className="h-[300px] w-[300px] lg:h-[500px] lg:w-[500px]"
             src="/contact.svg"
             alt="contactimg"
           />
-        </motion.div>
-      </motion.div>
-    </motion.div>
+        </div>
+      </div>
+    </div>
   );
 }

app/(sections)/experience/Education.tsx

@@ -1,22 +1,23 @@
 "use client";
 import React from "react";
 import { Button } from "@/components/ui/button";
-import { motion } from "framer-motion";
+import NextImage from "@/components/NextImage";
 
 const Education = () => {
   return (
-    <div className="flex flex-col my-20 ">
+    <div className="flex animate_in flex-col my-20 ">
       <div className="max-w-[32rem] flex justify-center items-center mx-auto">
-        <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"
-        >
+        <ol className="relative border-s  border-gray-200 dark:border-gray-700">
           {Data.map((data) => (
             <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} />
+                <NextImage
+                  src={data.logo}
+                  width={40}
+                  height={40}
+                  className="rounded-full"
+                  alt={data.name}
+                />
               </span>
               <h3 className="flex flex-col md:flex-row mb-2 ml-3 text-lg font-semibold">
                 {data.name}
@@ -33,7 +34,7 @@ const Education = () => {
               </time>
             </li>
           ))}
-        </motion.ol>
+        </ol>
       </div>
     </div>
   );

app/(sections)/experience/Experience.tsx

@@ -1,21 +1,22 @@
 "use client";
+import NextImage from "@/components/NextImage";
 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="flex animate_in flex-col my-20 gap-10">
       <div className="max-w-[32rem] flex justify-center items-center mx-auto">
-        <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"
-        >
+        <ol 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">
-                <img src={data.logo} className="rounded-full" alt={data.name} />
+                <NextImage
+                  src={data.logo}
+                  width={40}
+                  height={40}
+                  className="rounded-full"
+                  alt={data.name}
+                />
               </span>
               <h3 className="flex flex-col md:flex-row mb-2 ml-3 text-lg font-semibold">
                 {data.name}
@@ -36,7 +37,7 @@ const Experience = () => {
               </time>
             </li>
           ))}
-        </motion.ol>
+        </ol>
       </div>
     </div>
   );

app/(sections)/projects/page.tsx

@@ -2,7 +2,6 @@
 
 import { Github, LucideExternalLink } from "lucide-react";
 import Link from "next/link";
-import { motion } from "framer-motion";
 
 import { ProjectData } from "./constant";
 import { Card } from "@/components/ui/card";
@@ -14,19 +13,14 @@ function ProjectsPage() {
       <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  lg:max-w-[80%] flex-wrap justify-center gap-10">
+      <div className="flex animate_in lg:max-w-[80%] flex-wrap justify-center gap-10">
         {ProjectData.map(
           ({ title, live, description, github, techstack }, index) => (
             <Card
               key={index}
               className="flex flex-col max-md:w-[95%] gap-2 rounded-lg p-4 outline-1 outline-dashed "
             >
-              <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ duration: 0.5 }}
-                className="flex flex-col md:flex-row items-center gap-4 justify-between"
-              >
+              <div className="flex flex-col md:flex-row items-center gap-4 justify-between">
                 <h3 className="text-xl text-center font-medium">{title}</h3>
                 <div className="flex gap-2">
                   <Link href={live} target="_blank">
@@ -41,20 +35,15 @@ function ProjectsPage() {
                     </Button>
                   </Link>
                 </div>
-              </motion.div>
+              </div>
               <p className="text-sm text-center">{description}</p>
-              <motion.p
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ delay: 0.3, duration: 0.5 }}
-                className="text-sm flex flex-wrap justify-center gap-2"
-              >
+              <p className="text-sm flex flex-wrap justify-center gap-2">
                 {techstack.map((tech, index) => (
                   <p key={index} className="border  p-1 rounded-md">
                     {tech}
                   </p>
                 ))}
-              </motion.p>
+              </p>
             </Card>
           )
         )}

app/(sections)/skills/constant.tsx

@@ -1,3 +1,4 @@
+import NextImage from "@/components/NextImage";
 import { Button } from "@/components/ui/button";
 
 export const FrontendSkills = [
@@ -82,13 +83,14 @@ function SkillCategory({ skills }: { skills: any[] }) {
             variant="secondary"
             className="p-3 h-12 flex justify-center drop-shadow-sm items-center gap-2"
           >
-            <div>
-              <img
-                src={skill?.icon}
-                alt={skill?.name}
-                className="w-10 h-10 text-slate-300"
-              />
-            </div>
+            <NextImage
+              src={skill?.icon}
+              width={30}
+              height={30}
+              alt={skill?.name}
+              className=""
+            />
+
             {skill?.name}
           </Button>
         </div>

app/(sections)/skills/page.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import { Frontend, Backend, Tools } from "./constant";
-import { motion } from "framer-motion";
 
 interface SkillComponents {
   [key: string]: () => JSX.Element;
@@ -35,29 +34,15 @@ const Skills = () => {
       </div>
       <div className="flex flex-col justify-center items-center px-3">
         {data.map(({ label }) => (
-          <div key={label} className="flex flex-col m-1">
+          <div key={label} className="flex animate_in flex-col m-1">
             <div className="flex flex-col">
-              <motion.span
-                initial={{ opacity: 0, y: -50 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.7 }}
-                className="text-xl mt-1"
-              >
-                {label}
-              </motion.span>
+              <span className="text-xl mt-1">{label}</span>
               <div className="w-16 h-[1px] bg-blue-500 rounded-full my-1"></div>
             </div>
 
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 0.3, duration: 0.7 }}
-              className="flex flex-wrap justify-center items-center gap-5"
-            >
-              {skillComponents[label] && (
-                <motion.div>{skillComponents[label]()}</motion.div>
-              )}
-            </motion.div>
+            <div className="flex flex-wrap justify-center items-center gap-5">
+              {skillComponents[label] && <div>{skillComponents[label]()}</div>}
+            </div>
           </div>
         ))}
       </div>

app/globals.css

@@ -66,3 +66,18 @@
     animation-delay: 4s;
   }
 }
+
+.animate_in {
+  animation: animateIn 0.3s ease 0.15s both;
+}
+
+@keyframes animateIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}