Navigation completed, updated links active status with scrolling. Updated gulpfile.js to use terser instead as it supports es6
This commit is contained in:
parent
d2a50070a6
commit
de9d40066c
2
dist/css/main.css
vendored
2
dist/css/main.css
vendored
File diff suppressed because one or more lines are too long
2
dist/index.html
vendored
2
dist/index.html
vendored
File diff suppressed because one or more lines are too long
2
dist/js/main.js
vendored
2
dist/js/main.js
vendored
@ -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")}))};
|
@ -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())
|
||||
.on("error", createErrorHandler("uglify"))
|
||||
.pipe(terser())
|
||||
.on("error", createErrorHandler("terser"))
|
||||
.pipe(gulp.dest("dist/js"))
|
||||
.on("error", createErrorHandler("gulp.dest"));
|
||||
});
|
||||
|
7634
package-lock.json
generated
7634
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
},
|
||||
"dependencies": {
|
||||
"gulp-uglify": "^3.0.2",
|
||||
"gulp-htmlmin": "^5.0.1",
|
||||
"gulp-terser": "^2.0.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"require": "^0.4.4"
|
||||
}
|
||||
|
@ -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;
|
||||
position: relative;
|
||||
background-color: var(--navBack);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -196,12 +208,12 @@ i.fa-chevron-down {
|
||||
nav .nav-btn {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: -353px;
|
||||
right: 75px;
|
||||
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;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
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;
|
||||
|
@ -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><</span>about<span>></span></a></li>
|
||||
<li><a href="#about" class="textShadow active"><span><</span>about<span>></span></a></li>
|
||||
<li><a href="#curiculumvitae" class="textShadow"><span><</span>cv<span>></span></a></li>
|
||||
<li><a href="#projects" class="textShadow"><span><</span>projects<span>></span></a></li>
|
||||
<li><a href="#contact" class="textShadow"><span><</span>contact<span>></span></a></li>
|
||||
<li><a href="#" class="textShadow"><span><</span>blog<span>></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>
|
||||
<div id="curiculumvitae">
|
||||
<a href="other/rohitpaicv.pdf" class="btn btnPrimary boxShadowIn boxShadowOut" download="">Download CV</a></section>
|
||||
<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>
|
||||
<div id="projects">
|
||||
</section>
|
||||
<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>
|
||||
<div id="contact">
|
||||
</section>
|
||||
<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>© 2021 Rohit Pai all rights reserved</p>
|
||||
<button class="goBackToTop"></button>
|
||||
|
@ -1,5 +1,35 @@
|
||||
//Handle forms in contact page
|
||||
function formHandling()
|
||||
window.onscroll = () =>
|
||||
{
|
||||
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");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user