Add scroll effect to start the angler animation

Author: Lnleite

css/index.css

@@ -183,7 +183,7 @@ html.sr .load-hidden {
 .navigation .nav .hamburger p {
   width: 35px;
   height: 3px;
-  background-color: rgba(255, 251, 245, 0.9);
+  background-color: #000000;
   margin: 4px 0;
 }
 .navigation .sideNav {
@@ -449,7 +449,7 @@ header .jumboTxt p {
   padding: 1px;
 }
 .home h2 {
-  font-family: 'Yellowtail', 'cursive';
+  font-family: "Yellowtail", "cursive";
 }
 .home .area {
   background: #cfc7bb;
@@ -460,21 +460,10 @@ header .jumboTxt p {
   background: rgba(255, 251, 245, 0.9);
   padding: 40px;
 }
-.home #about .main {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-}
-@media (max-width: 751px) {
-  .home #about .main {
-    flex-direction: column;
-  }
-}
 .home #about .main p {
   font-size: 1.5rem;
   line-height: 1.5;
   padding-top: 20px;
-  font-weight: bold;
 }
 .home #projects a {
   text-decoration: none;
@@ -572,7 +561,7 @@ header .jumboTxt p {
   padding: 0 2%;
 }
 .home #projects .pro::after {
-  content: '';
+  content: "";
   width: 260px;
   height: 260px;
   position: absolute;
@@ -620,6 +609,7 @@ header .jumboTxt p {
 .home #experience .exp .block .date {
   font-style: italic;
   font-size: 0.9rem;
+  margin: 7px 0;
 }
 .home #experience .exp .block .description {
   font-size: 1.1rem;

index.html

@@ -57,7 +57,8 @@ <h2>About</h2>
           <div class="main">
             <p>I am a full stack web developer with practical experience in building web apps with React, Node, and
               SQLite. My burning curiosity for web development began after my realization that I was joining the wrong
-              field. Immediately after, I started to look at programs and classes to learn about coding. Now I have an
+              field. Immediately after, I started to look at programs and classes to learn about coding.</p>
+            <p>Now I have an
               appetite for learning new languages and frameworks to develop my knowledge about Front-end and Back-end
               engineering. Whenever I am not learning new concepts, I enjoy hanging out with friends and family or
               playing video games. Presently, I am seeking a position where I will work with a tight knit team and build
@@ -146,7 +147,7 @@ <h5>Skills</h5>
         <img class="seahorse fish" src="./images/fish/seahorse.svg" alt="shark">
         <img src="" alt="">
         <div class="container area left">
-          <h2>Professional Experience</h2>
+          <h2>Experience</h2>
           <div class="exp">
             <div class="job block">
               <h3>Section Lead</h3>

js/main.js

@@ -13,14 +13,12 @@ let slideLeft = {
     origin: 'left',
     opacity: 0,
     delay: '400',
-    duration: '1500',
 };
 let slideRight = {
     distance: '150%',
     origin: 'right',
     opacity: 0,
     delay: '400',
-    duration: '1500',
 };
 
 ScrollReveal().reveal('.left', slideLeft);
@@ -82,16 +80,19 @@ const hamburger = document.querySelector('.hamburger');
 const fishNav = document.querySelector('.navFish');
 const sideNav = document.querySelector('.sideNav');
 const sections = document.querySelectorAll('nav a');
+const home = document.querySelector('.home');
+const header = document.querySelector('header');
 
 hamburger.addEventListener('click', function() {
     let tl = new TimelineLite();
     sideNav.style.display = 'block';
-    tl.to(hamburger, 0.2, {
+    open = true;
+    tl.to(hamburger, 0.1, {
         scale: 0.7,
     })
         .fromTo(
             sideNav,
-            1.5,
+            0.75,
             {
                 x: '100%',
             },
@@ -105,7 +106,19 @@ hamburger.addEventListener('click', function() {
                 },
             }
         )
-        .to(hamburger, 0.5, { display: 'none' }, '-=1.6');
+        .to(hamburger, 0.5, { display: 'none' }, '-=1');
+});
+
+home.addEventListener('click', function() {
+    if (open) {
+        closeNav();
+    }
+});
+
+header.addEventListener('click', function() {
+    if (open) {
+        closeNav();
+    }
 });
 
 fishNav.addEventListener('click', closeNav);
@@ -117,8 +130,8 @@ sections.forEach(el => {
 function closeNav() {
     let tl = new TimelineLite();
     tl.to(hamburger, 0.01, { scale: 1 })
-        .to(fishNav, 1, { x: -30, rotationY: 180 })
-        .to(sideNav, 1.5, { x: '120%' })
+        .to(fishNav, 0.5, { x: -30, rotationY: 180 })
+        .to(sideNav, 0.75, { x: '120%' })
         .to(hamburger, 0.5, { display: 'flex' }, '-=1')
         .to(fishNav, 0.01, { rotationY: 0, x: 0 });
 }