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 browserSync = require("browser-sync").create();
|
||||||
const htmlMin = require("gulp-htmlmin");
|
const htmlMin = require("gulp-htmlmin");
|
||||||
const cssMin = require("gulp-clean-css")
|
const cssMin = require("gulp-clean-css")
|
||||||
const jsMin = require("gulp-uglify");
|
const terser = require("gulp-terser");
|
||||||
|
|
||||||
gulp.task("minifyHTML", () =>
|
gulp.task("minifyHTML", () =>
|
||||||
{
|
{
|
||||||
@ -28,8 +28,8 @@ gulp.task("minifyJS", () =>
|
|||||||
|
|
||||||
return gulp.src("src/js/*.js")
|
return gulp.src("src/js/*.js")
|
||||||
.on("error", createErrorHandler("gulp.src"))
|
.on("error", createErrorHandler("gulp.src"))
|
||||||
.pipe(jsMin())
|
.pipe(terser())
|
||||||
.on("error", createErrorHandler("uglify"))
|
.on("error", createErrorHandler("terser"))
|
||||||
.pipe(gulp.dest("dist/js"))
|
.pipe(gulp.dest("dist/js"))
|
||||||
.on("error", createErrorHandler("gulp.dest"));
|
.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",
|
"author": "Rohit Pai",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"dependencies": {
|
||||||
"browser-sync": "^2.26.14",
|
"browser-sync": "^2.26.14",
|
||||||
"gulp": "^4.0.2",
|
"gulp": "^4.0.2",
|
||||||
"gulp-clean-css": "^4.3.0",
|
"gulp-clean-css": "^4.3.0",
|
||||||
"gulp-uglify": "^3.0.2"
|
"gulp-uglify": "^3.0.2",
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"gulp-htmlmin": "^5.0.1",
|
"gulp-htmlmin": "^5.0.1",
|
||||||
|
"gulp-terser": "^2.0.1",
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"require": "^0.4.4"
|
"require": "^0.4.4"
|
||||||
}
|
}
|
||||||
|
@ -11,6 +11,7 @@
|
|||||||
--grey: hsla(0, 0%, 39%, 1);
|
--grey: hsla(0, 0%, 39%, 1);
|
||||||
--mutedGrey: hsla(0, 0%, 67%, 0.58);
|
--mutedGrey: hsla(0, 0%, 67%, 0.58);
|
||||||
--mutedBlack: hsla(0, 0%, 0%, 0.25);
|
--mutedBlack: hsla(0, 0%, 0%, 0.25);
|
||||||
|
--navBack: hsl(0, 0%, 30%);
|
||||||
|
|
||||||
/* font sizes */
|
/* font sizes */
|
||||||
--titleFS: 2.25rem;
|
--titleFS: 2.25rem;
|
||||||
@ -20,6 +21,10 @@
|
|||||||
|
|
||||||
/*** Template Styles ****/
|
/*** Template Styles ****/
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
@ -109,8 +114,14 @@ nav {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0.25em;
|
padding: 0.25em;
|
||||||
position: sticky;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
transition: background-color 0.4s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.scrolled {
|
||||||
|
background-color: var(--navBack);
|
||||||
}
|
}
|
||||||
|
|
||||||
nav #nav-check {
|
nav #nav-check {
|
||||||
@ -147,7 +158,7 @@ nav ul li span {
|
|||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li a:hover span {
|
nav ul li a:hover span, nav ul li .active span {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -184,8 +195,9 @@ i.fa-chevron-down {
|
|||||||
display: block;
|
display: block;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #4d4d4d;
|
background-color: var(--navBack);
|
||||||
position: relative;
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -196,12 +208,12 @@ i.fa-chevron-down {
|
|||||||
nav .nav-btn {
|
nav .nav-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 30px;
|
right: 75px;
|
||||||
top: -353px;
|
top: -360px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
position: relative;
|
position: fixed;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
@ -221,12 +233,10 @@ i.fa-chevron-down {
|
|||||||
|
|
||||||
.nav-btn label {
|
.nav-btn label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 13px 0;
|
|
||||||
margin: 0;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 20px;
|
height: 50px;
|
||||||
position: relative;
|
position: fixed;
|
||||||
-webkit-transform: rotate(0deg);
|
-webkit-transform: rotate(0deg);
|
||||||
-moz-transform: rotate(0deg);
|
-moz-transform: rotate(0deg);
|
||||||
-o-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) {
|
nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(1) {
|
||||||
top: 0;
|
top: 8px;
|
||||||
-webkit-transform-origin: left center;
|
-webkit-transform-origin: left center;
|
||||||
-moz-transform-origin: left center;
|
-moz-transform-origin: left center;
|
||||||
-o-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) {
|
nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(2) {
|
||||||
top: 15px;
|
top: 23px;
|
||||||
-webkit-transform-origin: left center;
|
-webkit-transform-origin: left center;
|
||||||
-moz-transform-origin: left center;
|
-moz-transform-origin: left center;
|
||||||
-o-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) {
|
nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(3) {
|
||||||
top: 30px;
|
top: 38px;
|
||||||
-webkit-transform-origin: left center;
|
-webkit-transform-origin: left center;
|
||||||
-moz-transform-origin: left center;
|
-moz-transform-origin: left center;
|
||||||
-o-transform-origin: left center;
|
-o-transform-origin: left center;
|
||||||
|
@ -8,6 +8,7 @@
|
|||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
<link rel="stylesheet" href="css/main.css">
|
<link rel="stylesheet" href="css/main.css">
|
||||||
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
|
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@ -24,13 +25,12 @@
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<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="#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="#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="#contact" class="textShadow"><span><</span>contact<span>></span></a></li>
|
||||||
<li><a href="#" class="textShadow"><span><</span>blog<span>></span></a></li>
|
<li><a href="#" class="textShadow"><span><</span>blog<span>></span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
<div>
|
<div>
|
||||||
<h1>full stack developer_</h1>
|
<h1>full stack developer_</h1>
|
||||||
@ -39,7 +39,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<div id="about">
|
<section id="about">
|
||||||
<h1>about</h1>
|
<h1>about</h1>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus molestias
|
<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
|
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
|
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
|
beatae consectetur, dicta dolorum eligendi esse harum hic iure labore, libero molestias nemo neque nisi
|
||||||
nostrum odio sed sunt tempora totam voluptatem voluptatibus.</p>
|
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>
|
<h1>curriculum vitae</h1>
|
||||||
<div class="cvGrid">
|
<div class="cvGrid">
|
||||||
<div>
|
<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>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>
|
||||||
</div>
|
</section>
|
||||||
<div id="projects">
|
<section id="projects">
|
||||||
<div class="mainProj">
|
<div class="mainProj">
|
||||||
<h1>project title to be generated</h1>
|
<h1>project title to be generated</h1>
|
||||||
<div><img src="" alt="">
|
<div><img src="" alt="">
|
||||||
@ -112,8 +112,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a></div>
|
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a></div>
|
||||||
</div>
|
</section>
|
||||||
<div id="contact">
|
<section id="contact">
|
||||||
<div id="findme">
|
<div id="findme">
|
||||||
<h1>find me</h1>
|
<h1>find me</h1>
|
||||||
<div class="flexRow socialIcons">
|
<div class="flexRow socialIcons">
|
||||||
@ -153,7 +153,7 @@
|
|||||||
<input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Say Hello">
|
<input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Say Hello">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<footer class="flexRow">
|
<footer class="flexRow">
|
||||||
<p>© 2021 Rohit Pai all rights reserved</p>
|
<p>© 2021 Rohit Pai all rights reserved</p>
|
||||||
<button class="goBackToTop"></button>
|
<button class="goBackToTop"></button>
|
||||||
|
@ -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");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user