From d6115aa0bbce8e955768bc2499be61dedeb334b2 Mon Sep 17 00:00:00 2001
From: Bob Vandevliet <info@bvandevliet.nl>
Date: Sat, 24 May 2025 18:48:18 +0200
Subject: [PATCH] Highlight contact section when navigating to it.

---
 src/js/scripts.js    | 23 +++++++++++++++++++++++
 src/scss/styles.scss | 37 +++++++++++++++++++++++++++++++++++--
 2 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/js/scripts.js b/src/js/scripts.js
index 3e2b6bb..22a3705 100644
--- a/src/js/scripts.js
+++ b/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', () =>
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