Smoother animations

src/App.css

@@ -1,14 +1,13 @@
 .App {
   text-align: center;
   background-color: black;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  left: 0px;
+  min-height: 100vh;
+  width: 100%;
   font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
   color: azure;
   overflow-x: hidden;
   scroll-behavior: smooth;
+  position: relative;
 }
 
 html {
@@ -17,8 +16,16 @@ html {
 
 section {
   opacity: 0;
-  transform: translateY(20px);
+  transform: translate3d(0, 20px, 0);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+  will-change: opacity, transform;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 60px 0;
+  position: relative;
+  overflow: hidden;
 }
 
 section.visible {
@@ -63,11 +70,8 @@ section.visible {
 
 .About {
   width: 100%;
-  position: absolute;
-  top: 120px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
+  padding: 40px 0;
+  margin-top: 60px;
 }
 
 hr {
@@ -78,8 +82,9 @@ hr {
 }
 
 .publications, .Experience, .DevTools, .Contact {
-  margin-top: 100px;
-  padding: 40px 0;
+  margin: 0;
+  padding: 60px 0;
+  width: 100%;
 }
 
 .section-title {

src/App.js

@@ -21,12 +21,22 @@ function Portfolio() {
     const observer = new IntersectionObserver((entries) => {
       entries.forEach(entry => {
         if (entry.isIntersecting) {
+          const delay = parseInt(entry.target.dataset.delay) || 0;
+          setTimeout(() => {
+            requestAnimationFrame(() => {
               entry.target.classList.add('visible');
+            });
+          }, delay);
         }
       });
-    }, { threshold: 0.1 });
+    }, { 
+      threshold: 0.15,
+      rootMargin: '50px 0px -100px 0px'
+    });
 
-    document.querySelectorAll('section').forEach((section) => {
+    document.querySelectorAll('section').forEach((section, index) => {
+      // Add staggered delay to each section
+      section.dataset.delay = index * 100;
       observer.observe(section);
     });
 
@@ -44,13 +54,6 @@ function Portfolio() {
       <section>
       <About className="About" id="About" />
       </section>
-      <section className="publications" id="Publications">
-        <h2 className="section-title" style={{ color: "salmon", fontSize: "50px" }}>
-          <b>Publications</b>
-        </h2>
-        <SimpleSlider />
-      </section>
-
       <section className="Experience" id="Experience">
         <h2 className="section-title" style={{ color: "salmon", fontSize: "50px" }}>
           <b>Experience</b>
@@ -63,6 +66,12 @@ function Portfolio() {
         </h2>
         <DevToolsComponent />
       </section>
+      <section className="publications" id="Publications">
+        <h2 className="section-title" style={{ color: "salmon", fontSize: "50px" }}>
+          <b>Publications</b>
+        </h2>
+        <SimpleSlider />
+      </section>
       <section className="Contact" id="Contact">
         <h2 className="section-title" style={{ color: "cyan", fontSize: "50px" }}>
           <b>Social Links</b>