diff --git a/public/includes/nav.html b/public/includes/nav.html index e507475..c910521 100644 --- a/public/includes/nav.html +++ b/public/includes/nav.html @@ -14,6 +14,9 @@ + diff --git a/src/js/scripts.js b/src/js/scripts.js index c9fe264..22a3705 100644 --- a/src/js/scripts.js +++ b/src/js/scripts.js @@ -1,17 +1,35 @@ -document.addEventListener('DOMContentLoaded', () => +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', () => { /** * @type {NodeListOf} */ const parallaxElems = document.querySelectorAll('.parallax'); - // Handle scroll events. - window.addEventListener('scroll', () => + const refreshScrollLinkedPositioningEffect = () => { - // Add class to body when scrolled. document.body.classList.toggle('is-scrolled', window.scrollY > 0); - // Parallax effect. parallaxElems.forEach(parallaxElem => { const parentElem = parallaxElem.parentElement; @@ -23,8 +41,16 @@ document.addEventListener('DOMContentLoaded', () => parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`; }); - }); + }; + refreshScrollLinkedPositioningEffect(); + window.addEventListener('scroll', refreshScrollLinkedPositioningEffect); + + highlightSectionFromHash(); +}); + +document.addEventListener('DOMContentLoaded', () => +{ /** * @type {NodeListOf} */ @@ -45,9 +71,10 @@ document.addEventListener('DOMContentLoaded', () => } }); - document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor => + // Collapse the navbar in mobile view after clicking a link. + document.querySelectorAll('#navbarNav li.nav-item>a').forEach(navLink => { - anchor.addEventListener('click', () => + navLink.addEventListener('click', () => { /** * @type {HTMLButtonElement} diff --git a/src/scss/styles.scss b/src/scss/styles.scss index e43e94d..1270f0e 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -94,6 +94,7 @@ body.home main { @extend .pt-3; } +section, main>* { @extend .pt-4; @extend .pb-3; @@ -269,8 +270,7 @@ img.grayscale-effect { .gradient-to-top-light::before { content: ""; position: absolute; - top: 0; - left: 0; + inset: 0; width: 100%; height: 100%; background: linear-gradient(to top, transparent 67%, rgba(var(--bs-light-rgb), 1) 100%); @@ -333,4 +333,37 @@ 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