From bdb5acb16dca8d9a0afc712e2c0eac9be85e1e61 Mon Sep 17 00:00:00 2001
From: suchithm1999 <suchithm1999@gmail.com>
Date: Sun, 14 Apr 2024 11:32:41 +0530
Subject: [PATCH] Add fade in animation to all section

---
 suchith-m/src/App.jsx                      | 33 ++++++++++++++--------
 suchith-m/src/components/FadeInSection.jsx | 23 +++++++++++++++
 2 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 suchith-m/src/components/FadeInSection.jsx

diff --git a/suchith-m/src/App.jsx b/suchith-m/src/App.jsx
index 9d42427..9908d51 100644
--- a/suchith-m/src/App.jsx
+++ b/suchith-m/src/App.jsx
@@ -6,6 +6,7 @@ import Footer from "./components/Footer";
 import Home from "./components/Home";
 import Sidebar from "./components/Sidebar";
 import Skills from "./components/Skills";
+import FadeInSection from "./components/FadeInSection";
 
 function App() {
   return (
@@ -33,18 +34,26 @@ function App() {
             <Home />
           </div>
         </div>
-        <div className="relative">
-          <AboutMe />
-        </div>
-        <div className="relative">
-          <Experience />
-        </div>
-        <div className="relative">
-          <Skills />
-        </div>
-        <div className="relative">
-          <Contact />
-        </div>
+        <FadeInSection>
+          <div className="relative">
+            <AboutMe />
+          </div>
+        </FadeInSection>
+        <FadeInSection>
+          <div className="relative">
+            <Experience />
+          </div>
+        </FadeInSection>
+        <FadeInSection>
+          <div className="relative">
+            <Skills />
+          </div>
+        </FadeInSection>
+        <FadeInSection>
+          <div className="relative">
+            <Contact />
+          </div>
+        </FadeInSection>
         <div className="relative">
           <Footer />
         </div>
diff --git a/suchith-m/src/components/FadeInSection.jsx b/suchith-m/src/components/FadeInSection.jsx
new file mode 100644
index 0000000..68e9767
--- /dev/null
+++ b/suchith-m/src/components/FadeInSection.jsx
@@ -0,0 +1,23 @@
+import { useEffect, useRef, useState } from "react";
+
+function FadeInSection(props) {
+  const [isVisible, setVisible] = useState(true);
+  const domRef = useRef();
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => setVisible(entry.isIntersecting));
+    });
+    observer.observe(domRef.current);
+    return () => observer.unobserve(domRef.current);
+  }, []);
+  return (
+    <div
+      className={`fade-in-section ${isVisible ? "animate-fade" : ""}`}
+      ref={domRef}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export default FadeInSection;