add scroll sections

Author: stephlm2dev

index.html

@@ -744,12 +744,73 @@ <h2 class="uk-heading-small uk-text-center">
       </div>
     </section>
 
+    <!-- Scroll indicator -->
+    <nav class="scroll-indicator" aria-label="Navigation sections">
+      <a href="#hello" class="scroll-dot active" data-section="hello"><span class="scroll-dot-label">Accueil</span></a>
+      <a href="#about" class="scroll-dot" data-section="about"><span class="scroll-dot-label">Pourquoi</span></a>
+      <a href="#expertise" class="scroll-dot" data-section="expertise"><span class="scroll-dot-label">Expertise</span></a>
+      <a href="#clients" class="scroll-dot" data-section="clients"><span class="scroll-dot-label">Clients</span></a>
+      <a href="#process" class="scroll-dot" data-section="process"><span class="scroll-dot-label">Process</span></a>
+      <a href="#tech" class="scroll-dot" data-section="tech"><span class="scroll-dot-label">Stack</span></a>
+      <a href="#contact-me" class="scroll-dot" data-section="contact-me"><span class="scroll-dot-label">Contact</span></a>
+    </nav>
+
     <!-- UIkit JS -->
     <script
       src="https://cdn.jsdelivr.net/npm/uikit@3.4.1/dist/js/uikit.min.js">
     </script>
     <script
       src="https://cdn.jsdelivr.net/npm/uikit@3.4.1/dist/js/uikit-icons.min.js">
     </script>
+
+    <script>
+      (function() {
+        var dots = document.querySelectorAll('.scroll-dot');
+        var sections = Array.from(dots).map(function(dot) {
+          return document.getElementById(dot.dataset.section);
+        });
+
+        var nav = document.querySelector('.scroll-indicator');
+        var lightSections = ['about', 'expertise', 'clients', 'process', 'tech', 'contact-me'];
+
+        function updateActive() {
+          var scrollY = window.scrollY + window.innerHeight / 3;
+          var current = 0;
+          for (var i = 0; i < sections.length; i++) {
+            if (sections[i] && sections[i].offsetTop <= scrollY) {
+              current = i;
+            }
+          }
+          dots.forEach(function(dot, i) {
+            dot.classList.toggle('active', i === current);
+          });
+          var currentId = sections[current] ? sections[current].id : '';
+          nav.classList.toggle('on-light', lightSections.indexOf(currentId) !== -1);
+        }
+
+        var ticking = false;
+        window.addEventListener('scroll', function() {
+          if (!ticking) {
+            requestAnimationFrame(function() {
+              updateActive();
+              ticking = false;
+            });
+            ticking = true;
+          }
+        });
+
+        dots.forEach(function(dot) {
+          dot.addEventListener('click', function(e) {
+            e.preventDefault();
+            var target = document.getElementById(dot.dataset.section);
+            if (target) {
+              target.scrollIntoView({ behavior: 'smooth' });
+            }
+          });
+        });
+
+        updateActive();
+      })();
+    </script>
   </body>
 </html>

style.css

@@ -238,6 +238,102 @@ section#contact-me {
   position: relative;
 }
 
+/* Scroll indicator */
+.scroll-indicator {
+  position: fixed;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.scroll-dot {
+  display: flex;
+  align-items: center;
+  text-decoration: none !important;
+  gap: 8px;
+}
+
+.scroll-dot::after {
+  content: '';
+  width: 12px;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.scroll-dot.active::after {
+  width: 24px;
+  height: 4px;
+  background: #fff;
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+}
+
+.scroll-dot:hover::after {
+  background: rgba(255, 255, 255, 0.7);
+  width: 18px;
+}
+
+.scroll-dot.active:hover::after {
+  background: #fff;
+  width: 24px;
+}
+
+.scroll-dot-label {
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0);
+  transition: color 0.3s ease;
+  white-space: nowrap;
+  pointer-events: none;
+  font-family: 'Raleway', sans-serif;
+  font-weight: 400;
+  letter-spacing: 0.5px;
+}
+
+.scroll-dot:hover .scroll-dot-label,
+.scroll-dot.active .scroll-dot-label {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Adapt colors for light sections */
+.scroll-indicator.on-light .scroll-dot::after {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+.scroll-indicator.on-light .scroll-dot.active::after {
+  background: var(--main-bg-color);
+  box-shadow: 0 0 8px rgba(229, 77, 66, 0.3);
+}
+
+.scroll-indicator.on-light .scroll-dot:hover::after {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.scroll-indicator.on-light .scroll-dot.active:hover::after {
+  background: var(--main-bg-color);
+}
+
+.scroll-indicator.on-light .scroll-dot-label {
+  color: rgba(0, 0, 0, 0);
+}
+
+.scroll-indicator.on-light .scroll-dot:hover .scroll-dot-label,
+.scroll-indicator.on-light .scroll-dot.active .scroll-dot-label {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+@media (max-width: 768px) {
+  .scroll-indicator {
+    display: none;
+  }
+}
+
 .scroll-to-top {
   position: absolute;
   right: 20px;