Navigation completed, updated links active status with scrolling. Updated gulpfile.js to use terser instead as it supports es6

dist/js/main.js

@@ -1 +1 @@
-function formHandling(){console.log("Handle Forms")}
+window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let e="";document.querySelectorAll("section").forEach((l=>{const t=l.offsetTop;window.pageYOffset>=t-60&&(e=l.getAttribute("id"))})),document.querySelectorAll("nav ul li").forEach((l=>{l.firstChild.classList.remove("active"),l.firstChild.href.includes(e)&&""!==e?l.firstChild.classList.add("active"):""===e&&document.querySelector("nav ul li").firstChild.classList.add("active")}))};

gulpfile.js

@@ -2,7 +2,7 @@ const gulp = require("gulp");
 const browserSync = require("browser-sync").create();
 const htmlMin = require("gulp-htmlmin");
 const cssMin = require("gulp-clean-css")
-const jsMin = require("gulp-uglify");
+const terser = require("gulp-terser");
 
 gulp.task("minifyHTML", () =>
 {
@@ -28,8 +28,8 @@ gulp.task("minifyJS", () =>
 	
 	return gulp.src("src/js/*.js")
 	.on("error", createErrorHandler("gulp.src"))
-	.pipe(jsMin())
+	.pipe(terser())
-	.on("error", createErrorHandler("uglify"))
+	.on("error", createErrorHandler("terser"))
 	.pipe(gulp.dest("dist/js"))
 	.on("error", createErrorHandler("gulp.dest"));
 });

package.json

@@ -11,14 +11,13 @@
   ],
   "author": "Rohit Pai",
   "license": "ISC",
-  "devDependencies": {
+  "dependencies": {
     "browser-sync": "^2.26.14",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
-    "gulp-uglify": "^3.0.2"
+    "gulp-uglify": "^3.0.2",
-  },
-  "dependencies": {
     "gulp-htmlmin": "^5.0.1",
+    "gulp-terser": "^2.0.1",
     "normalize.css": "^8.0.1",
     "require": "^0.4.4"
   }

src/css/main.css

@@ -11,6 +11,7 @@
     --grey: hsla(0, 0%, 39%, 1);
     --mutedGrey: hsla(0, 0%, 67%, 0.58);
     --mutedBlack: hsla(0, 0%, 0%, 0.25);
+    --navBack: hsl(0, 0%, 30%);
 
     /* font sizes */
     --titleFS: 2.25rem;
@@ -20,6 +21,10 @@
 
 /*** Template Styles ****/
 
+html {
+    scroll-behavior: smooth;
+}
+
 a:visited {
     color: inherit;
 }
@@ -109,8 +114,14 @@ nav {
     flex-direction: row;
     justify-content: space-between;
     padding: 0.25em;
-    position: sticky;
+    position: fixed;
     top: 0;
+    width: 100%;
+    transition: background-color 0.4s ease-in;
+}
+
+nav.scrolled {
+    background-color: var(--navBack);
 }
 
 nav #nav-check {
@@ -147,7 +158,7 @@ nav ul li span {
     visibility: hidden;
 }
 
-nav ul li a:hover span {
+nav ul li a:hover span, nav ul li .active span {
     visibility: visible;
 }
 
@@ -184,8 +195,9 @@ i.fa-chevron-down {
         display: block;
         height: 50px;
         width: 100%;
-        background-color: #4d4d4d;
+        background-color: var(--navBack);
-        position: relative;
+        position: fixed;
+        top: 0;
         padding: 0;
     }
 
@@ -196,12 +208,12 @@ i.fa-chevron-down {
     nav  .nav-btn {
         display: inline-block;
         position: absolute;
-        right: 30px;
+        right: 75px;
-        top: -353px;
+        top: -360px;
     }
 
     nav ul {
-        position: relative;
+        position: fixed;
         display: block;
         width: 100%;
         background-color: #333;
@@ -221,12 +233,10 @@ i.fa-chevron-down {
 
     .nav-btn label {
         display: inline-block;
-        padding: 13px 0;
-        margin: 0;
         cursor: pointer;
         width: 60px;
-        height: 20px;
+        height: 50px;
-        position: relative;
+        position: fixed;
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -o-transform: rotate(0deg);
@@ -262,7 +272,7 @@ i.fa-chevron-down {
     }
 
     nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(1) {
-        top: 0;
+        top: 8px;
         -webkit-transform-origin: left center;
         -moz-transform-origin: left center;
         -o-transform-origin: left center;
@@ -270,7 +280,7 @@ i.fa-chevron-down {
     }
 
     nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(2) {
-        top: 15px;
+        top: 23px;
         -webkit-transform-origin: left center;
         -moz-transform-origin: left center;
         -o-transform-origin: left center;
@@ -278,7 +288,7 @@ i.fa-chevron-down {
     }
 
     nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(3) {
-        top: 30px;
+        top: 38px;
         -webkit-transform-origin: left center;
         -moz-transform-origin: left center;
         -o-transform-origin: left center;

src/index.html

@@ -8,6 +8,7 @@
     <title>Document</title>
     <link rel="stylesheet" href="css/main.css">
     <script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
+    <script src="js/main.js"></script>
 </head>
 <body>
     <header>
@@ -24,13 +25,12 @@
                 </label>
             </div>
             <ul>
-                <li><a href="#about" class="textShadow"><span>&lt;</span>about<span>&gt;</span></a></li>
+                <li><a href="#about" class="textShadow active"><span>&lt;</span>about<span>&gt;</span></a></li>
                 <li><a href="#curiculumvitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li>
                 <li><a href="#projects" class="textShadow"><span>&lt;</span>projects<span>&gt;</span></a></li>
                 <li><a href="#contact" class="textShadow"><span>&lt;</span>contact<span>&gt;</span></a></li>
                 <li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</span></a></li>
             </ul>
-            
         </nav>
         <div>
             <h1>full stack developer_</h1>
@@ -39,7 +39,7 @@
         </div>
     </header>
     <main>
-        <div id="about">
+        <section id="about">
             <h1>about</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus molestias
                 officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima
@@ -47,8 +47,8 @@
                 exercitationem fugiat harum itaque laudantium placeat repellat suscipit velit! Aliquam architecto autem
                 beatae consectetur, dicta dolorum eligendi esse harum hic iure labore, libero molestias nemo neque nisi
                 nostrum odio sed sunt tempora totam voluptatem voluptatibus.</p>
-            <a href="other/rohitpaicv.pdf" class="btn btnPrimary boxShadowIn boxShadowOut" download="">Download CV</a></div>
+            <a href="other/rohitpaicv.pdf" class="btn btnPrimary boxShadowIn boxShadowOut" download="">Download CV</a></section>
-        <div id="curiculumvitae">
+        <section id="curiculumvitae">
             <h1>curriculum vitae</h1>
             <div class="cvGrid">
                 <div>
@@ -60,8 +60,8 @@
                     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam atque blanditiis doloribus labore minima odio recusandae tempore. Totam, ut!</div>
                 </div>
             </div>
-        </div>
+        </section>
-        <div id="projects">
+        <section id="projects">
             <div class="mainProj">
                 <h1>project title to be generated</h1>
                 <div><img src="" alt="">
@@ -112,8 +112,8 @@
                     </div>
                 </div>
                 <a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a></div>
-        </div>
+        </section>
-        <div id="contact">
+        <section id="contact">
             <div id="findme">
                 <h1>find me</h1>
                 <div class="flexRow socialIcons">
@@ -153,7 +153,7 @@
                     <input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Say Hello">
                 </form>
             </div>
-        </div>
+        </section>
         <footer class="flexRow">
             <p>&copy; 2021 Rohit Pai all rights reserved</p>
             <button class="goBackToTop"></button>

src/js/main.js

@@ -1,5 +1,35 @@
-//Handle forms in contact page
+window.onscroll = () =>
-function formHandling()
 {
-	console.log("Handle Forms");
+	if (document.body.scrollTop >= 150 || document.documentElement.scrollTop >= 150)
+	{
+		document.querySelector("nav").classList.add("scrolled");
 	}
+	else
+	{
+		document.querySelector("nav").classList.remove("scrolled");
+	}
+	
+	let current = "";
+	
+	document.querySelectorAll("section").forEach((section) =>
+	{
+		const sectionTop = section.offsetTop;
+		if (window.pageYOffset >= sectionTop - 60)
+		{
+			current = section.getAttribute("id");
+		}
+	});
+	
+	document.querySelectorAll("nav ul li").forEach((li) =>
+	{
+		li.firstChild.classList.remove("active");
+		if (li.firstChild.href.includes(current) && current !== "")
+		{
+			li.firstChild.classList.add("active");
+		}
+		else if (current === "")
+		{
+			document.querySelector("nav ul li").firstChild.classList.add("active");
+		}
+	});
+};