feat(animation): add animations when scrolling or visiting different …

…sections

When scrolling down/up the section will fade in and when leaving, the section will fade out.

app/page.tsx

@@ -1,24 +1,31 @@
 import About from "@/components/about";
-import Contact from "@/components/contact";
 import Hero from "@/components/hero";
 import Navbar from "@/components/navbar";
 import Projects from "@/components/projects";
 import Resume from "@/components/resume";
+import Transition from "@/components/transition";
 
 const Home: React.FC = () => {
   return (
-    <main>
+    <main className="">
+      {/* Top Navigation Bar Section */}
       <Navbar />
       {/* Hero Section */}
-      <Hero />
+      <Transition>
+        <Hero />
+      </Transition>
       {/* About Section */}
-      <About />
+      <Transition>
+        <About />
+      </Transition>
       {/* Projects Section */}
-      <Projects />
-      {/* Contacts Section */}
-      {/* <Contact /> */}
+      <Transition>
+        <Projects />
+      </Transition>
       {/* Resume Section */}
-      <Resume />
+      <Transition>
+        <Resume />
+      </Transition>
     </main>
   );
 };

components/about.tsx

@@ -3,7 +3,7 @@ import Background from "./background";
 
 const About: React.FC = () => {
   return (
-    <main id="about" className="animate-fadeIn">
+    <main id="about" className="scroll-m-14">
       <Background styles="h-full md:h-screen flex items-center">
         {/* <div className="grid grid-cols-2 text-black max-w-4xl mx-auto p-6"> */}
         <div className="grid grid-cols-1 md:grid-cols-2 text-catppuccin_text p-10 w-full justify-items-center">

components/hero.tsx

@@ -7,7 +7,7 @@ import { motion } from "framer-motion";
 
 const Hero: React.FC = () => {
   return (
-    <main id="hero" className="animate-fadeIn">
+    <main id="hero" className="">
       <Background styles="h-screen flex items-center justify-center">
         <div className="relative z-10 text-center text-white max-w-3xl">
           <h1 className="text-4xl md:text-6xl font-bold mb-6">

components/navbar.tsx

@@ -5,7 +5,7 @@ import HoverBox from "./animated_box_hover";
 
 const Navbar: React.FC = () => {
   return (
-    <header className="sticky top-0 w-full h-14 bg-transparent shadow-md z-50 animate-fadeIn backdrop-blur-md">
+    <header className="fixed top-0 w-full h-14 bg-transparent shadow-md z-50 animate-fadeIn backdrop-blur-md">
       <nav className="container mx-auto px-3 py-3">
         <div className="flex justify-between items-center text-white">
           <div className="hidden md:flex text-2xl font-bold text-catppuccin_red">

components/projects.tsx

@@ -3,7 +3,7 @@ import ProjectCard from "./project-card";
 
 const Projects: React.FC = () => {
   return (
-    <main className="animate-fadeIn">
+    <main className="scroll-m-14">
       <Background>
         <p
           id="projects"

components/resume.tsx

@@ -4,7 +4,7 @@ import Background from "./background";
 
 const Resume: React.FC = () => {
   return (
-    <main id="resume" className="animate-fadeIn scroll-m-14">
+    <main id="resume" className="scroll-m-14">
       <Background styles="h-screen">
         <p className="text-5xl items-center text-center text-white m-20 lg:m-10">
           Resume

components/transition.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const Transition: React.FC<Props> = ({ children }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.5, ease: "easeInOut", delay: 0.2 }}
+      viewport={{ once: false, amount: 0.5 }}
+      className="pt-14"
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default Transition;