Local images, html sections, styling and scripts reviewed.

public/assets/css/styles.css

@@ -1,18 +1,10 @@
-:target::before {
-  content: "";
-  display: block;
-  height: 4rem;
-  margin-top: -4rem;
-  visibility: hidden;
-}
-
-nav.bg-body {
-  background-color: rgba(var(--bs-body-bg-rgb), 0.7) !important;
+nav {
+  background-color: rgba(22, 23, 25, 0.4) !important;
   transition: background-color 0.5s;
 }
 
-body.is-scrolled nav.bg-body {
-  background-color: rgba(var(--bs-body-bg-rgb), 1.0) !important;
+body.is-scrolled nav {
+  background-color: rgba(22, 23, 25, 1.0) !important;
 }
 
 .navbar-collapse:not(.collapsing):not(.show) {
@@ -25,20 +17,33 @@ body.is-scrolled nav.bg-body {
   padding-left: var(--bs-navbar-nav-link-padding-x);
 }
 
-section.hero {
-  position: relative;
+.hero {
   height: 100vh;
-  overflow: hidden;
 }
 
-section.hero video {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: -1;
+.row {
+  --bs-gutter-y: var(--bs-gutter-x);
+}
+
+.text-shadow {
+  text-shadow:
+    -1px -1px 1px rgba(0, 0, 0, 0.4),
+    -1px 0px 1px rgba(0, 0, 0, 0.4),
+    -1px 1px 1px rgba(0, 0, 0, 0.4),
+    0px -1px 1px rgba(0, 0, 0, 0.4),
+    0px 0px 1px rgba(0, 0, 0, 0.4),
+    0px 1px 1px rgba(0, 0, 0, 0.4),
+    1px -1px 1px rgba(0, 0, 0, 0.4),
+    1px 0px 1px rgba(0, 0, 0, 0.4),
+    1px 1px 1px rgba(0, 0, 0, 0.4);
+}
+
+:target::before {
+  content: "";
+  display: block;
+  height: 4rem;
+  margin-top: -4rem;
+  visibility: hidden;
 }
 
 .anchor-link {
@@ -56,19 +61,8 @@ h6:hover .anchor-link {
   opacity: 1;
 }
 
-.text-shadow {
-  text-shadow:
-    -1px -1px 3px rgba(0, 0, 0, 0.3),
-    -1px 0px 3px rgba(0, 0, 0, 0.3),
-    -1px 1px 3px rgba(0, 0, 0, 0.3),
-    0px -1px 3px rgba(0, 0, 0, 0.3),
-    0px 0px 3px rgba(0, 0, 0, 0.3),
-    0px 1px 3px rgba(0, 0, 0, 0.3),
-    1px -1px 3px rgba(0, 0, 0, 0.3),
-    1px 0px 3px rgba(0, 0, 0, 0.3),
-    1px 1px 3px rgba(0, 0, 0, 0.3);
-}
-
+.cover,
+.parallax,
 .card-img {
   position: absolute;
   top: 0;
@@ -78,6 +72,10 @@ h6:hover .anchor-link {
   object-fit: cover;
 }
 
+.parallax {
+  height: 100vh;
+}
+
 .card-img-overlay {
   position: unset;
   z-index: 1;

public/assets/js/navigation.js

@@ -1,7 +1,7 @@
 /**
- * @type {HTMLVideoElement}
+ * @type {NodeListOf<HTMLVideoElement>}
  */
-const heroVid = document.querySelector('.hero video');
+const parallaxElems = document.querySelectorAll('.parallax');
 
 /**
  * @type {NodeListOf<HTMLAnchorElement>}
@@ -20,13 +20,24 @@ window.addEventListener('scroll', () =>
   document.body.classList.toggle('is-scrolled', window.scrollY > 0);
 
   // Parallax effect.
-  heroVid.style.top = `${window.scrollY / 3}px`;
+  parallaxElems.forEach(parallaxElem =>
+  {
+    const parentElem = parallaxElem.parentElement;
+
+    const parentRect = parentElem.getBoundingClientRect();
+    const parentScroll = parentRect.top + (parentRect.height / 2);
+
+    const windowScroll = window.scrollY + (window.innerHeight / 2);
+
+    parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`;
+  });
 
   // Highlight menu item when scrolled to section.
   let current = '';
   sections.forEach(section =>
   {
-    const sectionTop = section.offsetTop;
+    const rect = section.getBoundingClientRect();
+    const sectionTop = rect.top + window.scrollY;
 
     if (window.scrollY >= sectionTop - 70)
     {
@@ -45,14 +56,26 @@ window.addEventListener('scroll', () =>
   });
 });
 
-document.querySelectorAll('h1, h2').forEach(header =>
+sections.forEach(section =>
 {
-  if (header.id)
+  if (section.id)
   {
     const anchor = document.createElement('a');
     anchor.className = 'anchor-link';
-    anchor.href = `#${header.id}`;
+    anchor.href = `#${section.id}`;
     anchor.innerHTML = ' #&nbsp;';
-    header.appendChild(anchor);
+    section.appendChild(anchor);
   }
+});
+
+document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor =>
+{
+  anchor.addEventListener('click', () =>
+  {
+    /**
+     * @type {HTMLButtonElement}
+     */
+    const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
+    navbarNav?.click();
+  });
 });