Animations

src/App.css

@@ -7,7 +7,23 @@
   left: 0px;
   font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
   color: azure;
-  overflow: hidden;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+section {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+section.visible {
+  opacity: 1;
+  transform: translateY(0);
 }
 
 .App-logo {
@@ -61,8 +77,19 @@ hr {
   border: 10px solid aquamarine;
 }
 
-.publications {
-  margin-top: 230px;
+.publications, .Experience, .DevTools, .Contact {
+  margin-top: 100px;
+  padding: 40px 0;
+}
+
+.section-title {
+  margin-bottom: 40px;
+  transform: translateY(0);
+  transition: transform 0.4s ease-out;
+}
+
+section:hover .section-title {
+  transform: translateY(-5px);
 }
 
 .slick-dots button:before {