public/includes/nav.html

@@ -14,9 +14,6 @@
         <li class="nav-item">
           <a class="nav-link" href="/#section-pricing">Prijzen</a>
         </li>
-        <li class="nav-item">
-          <a class="nav-link" href="/#section-fpv">Over FPV</a>
-        </li>
         <li class="nav-item">
           <a class="nav-link" href="/#section-about">Over mij</a>
         </li>

src/js/scripts.js

@@ -1,35 +1,17 @@
-const highlightSectionFromHash = () =>
+document.addEventListener('DOMContentLoaded', () =>
-{
-  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<HTMLVideoElement>}
    */
   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<HTMLElement>}
    */
@@ -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(anchor =>
-  document.querySelectorAll('#navbarNav li.nav-item>a').forEach(navLink =>
   {
-    navLink.addEventListener('click', () =>
+    anchor.addEventListener('click', () =>
     {
       /**
        * @type {HTMLButtonElement}

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%);
@@ -334,36 +334,3 @@ img.grayscale-effect {
   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;
-  }
-}