diff --git a/public/includes/nav.html b/public/includes/nav.html index c910521..e507475 100644 --- a/public/includes/nav.html +++ b/public/includes/nav.html @@ -14,9 +14,6 @@ - diff --git a/src/js/scripts.js b/src/js/scripts.js index 22a3705..c9fe264 100644 --- a/src/js/scripts.js +++ b/src/js/scripts.js @@ -1,35 +1,17 @@ -const highlightSectionFromHash = () => -{ - const { hash } = window.location; - - if (hash === '#section-contact') - { - const section = document.getElementById(hash.substring(1))?.parentElement;// .closest('section'); - - if (section) - { - setTimeout(() => - { - section.classList.add('scrollto-highlight'); - setTimeout(() => section.classList.remove('scrollto-highlight'), 1000); - }, 500); - } - } -}; - -window.addEventListener('hashchange', highlightSectionFromHash); - -window.addEventListener('pageshow', () => +document.addEventListener('DOMContentLoaded', () => { /** * @type {NodeListOf} */ const parallaxElems = document.querySelectorAll('.parallax'); - const refreshScrollLinkedPositioningEffect = () => + // Handle scroll events. + window.addEventListener('scroll', () => { + // Add class to body when scrolled. document.body.classList.toggle('is-scrolled', window.scrollY > 0); + // Parallax effect. parallaxElems.forEach(parallaxElem => { const parentElem = parallaxElem.parentElement; @@ -41,16 +23,8 @@ window.addEventListener('pageshow', () => parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`; }); - }; + }); - refreshScrollLinkedPositioningEffect(); - window.addEventListener('scroll', refreshScrollLinkedPositioningEffect); - - highlightSectionFromHash(); -}); - -document.addEventListener('DOMContentLoaded', () => -{ /** * @type {NodeListOf} */ @@ -71,10 +45,9 @@ document.addEventListener('DOMContentLoaded', () => } }); - // Collapse the navbar in mobile view after clicking a link. - document.querySelectorAll('#navbarNav li.nav-item>a').forEach(navLink => + document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor => { - navLink.addEventListener('click', () => + anchor.addEventListener('click', () => { /** * @type {HTMLButtonElement} diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 1270f0e..e43e94d 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -94,7 +94,6 @@ body.home main { @extend .pt-3; } -section, main>* { @extend .pt-4; @extend .pb-3; @@ -270,7 +269,8 @@ img.grayscale-effect { .gradient-to-top-light::before { content: ""; position: absolute; - inset: 0; + top: 0; + left: 0; width: 100%; height: 100%; background: linear-gradient(to top, transparent 67%, rgba(var(--bs-light-rgb), 1) 100%); @@ -333,37 +333,4 @@ img.grayscale-effect { .socials { display: flex; gap: .5rem; -} - -.scrollto-highlight { - position: relative; - overflow: hidden; - animation: highlight-fade 1s ease; -} - -.scrollto-highlight::after { - content: ""; - position: absolute; - inset: 0; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.20); - pointer-events: none; - animation: highlight-overlay-fade 1s ease-in-out forwards; -} - -@keyframes highlight-overlay-fade { - - 0% { - opacity: 0; - } - - 5%, - 90% { - opacity: 1; - } - - 100% { - opacity: 0; - } } \ No newline at end of file