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 nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex 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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum nobis officia sequi. Beatae hic molestiae quibusdam repellendus vero voluptatem!
Work
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam atque blanditiis doloribus labore minima odio recusandae tempore. Totam, ut!
project title to be generated
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorem dolores esse itaque iure iusto libero molestias nobis nostrum placeat praesentium quia quo reprehenderit, repudiandae.
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 nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex 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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum nobis officia sequi. Beatae hic molestiae quibusdam repellendus vero voluptatem!
Work
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam atque blanditiis doloribus labore minima odio recusandae tempore. Totam, ut!
project title to be generated
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorem dolores esse itaque iure iusto libero molestias nobis nostrum placeat praesentium quia quo reprehenderit, repudiandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, voluptates.
Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam, voluptate.
Beatae culpa distinctio dolorum eius et fugit optio reiciendis soluta!
find me
say hello
\ No newline at end of file
diff --git a/dist/js/main.js b/dist/js/main.js
index b1b86ce..321865b 100644
--- a/dist/js/main.js
+++ b/dist/js/main.js
@@ -1 +1 @@
-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")}))};
\ No newline at end of file
+const scrollLimit=150;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((t=>{const o=t.offsetTop;window.pageYOffset>=o-60&&(e=t.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((t=>{t.classList.remove("active"),t.href.includes(e)&&""!==e?t.classList.add("active"):""===e&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{var e=["full stack developer","web designer","student","gamer","drummer"];function t(e,o,n){o_',setTimeout((function(){t(e,o+1,n)}),100)):"function"==typeof n&&setTimeout(n,700)}!function o(n){void 0===e[n]?setTimeout((function(){o(0)}),1e3):n
diff --git a/src/js/main.js b/src/js/main.js
index bdabf59..f43b2cd 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,6 +1,9 @@
+// scrolling effect
+const scrollLimit = 150;
window.onscroll = () =>
{
- if (document.body.scrollTop >= 150 || document.documentElement.scrollTop >= 150)
+ // check if scrolled past limit if so add scrolled class to change background of nav
+ if (document.body.scrollTop >= scrollLimit || document.documentElement.scrollTop >= scrollLimit)
{
document.querySelector("nav").classList.add("scrolled");
}
@@ -8,9 +11,9 @@ window.onscroll = () =>
{
document.querySelector("nav").classList.remove("scrolled");
}
-
- let current = "";
-
+
+ let current = ""; //id of current section scrolled to, set to "" if at top
+ // go through all sections and find current section id scrolled to
document.querySelectorAll("section").forEach((section) =>
{
const sectionTop = section.offsetTop;
@@ -19,17 +22,64 @@ window.onscroll = () =>
current = section.getAttribute("id");
}
});
-
- document.querySelectorAll("nav ul li").forEach((li) =>
+
+ // go through all nav links, remove active class and add it to the link whose href matches the current id scrolled
+ // to
+ document.querySelectorAll("nav ul li a").forEach((a) =>
{
- li.firstChild.classList.remove("active");
- if (li.firstChild.href.includes(current) && current !== "")
+ a.classList.remove("active");
+ if (a.href.includes(current) && current !== "")
{
- li.firstChild.classList.add("active");
+ a.classList.add("active");
}
else if (current === "")
{
- document.querySelector("nav ul li").firstChild.classList.add("active");
+ document.querySelector("nav ul li a").classList.add("active"); // at the top
}
});
};
+
+document.addEventListener('DOMContentLoaded', () =>
+{
+ // array with texts to type in typewriter
+ var dataText = [ "full stack developer", "web designer", "student", "gamer", "drummer"];
+
+ // type one text in the typwriter
+ // keeps calling itself until the text is finished
+ function typeWriter(text, i, fnCallback) {
+ // chekc if text isn't finished yet
+ if (i < (text.length)) {
+ // add next character to h1
+ document.querySelector("header div h1").innerHTML = text.substring(0, i+1) +'_';
+
+ // wait for a while and call this function again for next character
+ setTimeout(function() {
+ typeWriter(text, i + 1, fnCallback)
+ }, 100);
+ }
+ // text finished, call callback if there is a callback function
+ else if (typeof fnCallback == 'function') {
+ // call callback after timeout
+ setTimeout(fnCallback, 700);
+ }
+ }
+ // start a typewriter animation for a text in the dataText array
+ function StartTextAnimation(i) {
+ if (typeof dataText[i] === 'undefined'){
+ setTimeout(function() {
+ StartTextAnimation(0);
+ }, 1000);
+ // StartTextAnimation(0);
+ }
+ else if (i < dataText[i].length) {
+ // text exists! start typewriter animation
+ typeWriter(dataText[i], 0, function(){
+ // after callback (and whole text has been animated), start next text
+ StartTextAnimation(i + 1);
+ });
+ }
+ }
+ // start the text animation
+ StartTextAnimation(0);
+});
+