Highlight contact section when navigating to it.

src/js/scripts.js

@@ -1,3 +1,24 @@
+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', () =>
 {
   /**
@@ -24,6 +45,8 @@ window.addEventListener('pageshow', () =>
 
   refreshScrollLinkedPositioningEffect();
   window.addEventListener('scroll', refreshScrollLinkedPositioningEffect);
+
+  highlightSectionFromHash();
 });
 
 document.addEventListener('DOMContentLoaded', () =>

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%);
@@ -334,3 +334,36 @@ 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;
+  }
+}