update v1.2

Author: Martzcode

index.html

@@ -26,9 +26,22 @@
     <nav>
         <div class="container nav-container">
             <div class="logo">MS.</div>
-            <button class="theme-toggle" id="theme-toggle" aria-label="Basculer le mode">
-                <i class="fas fa-moon"></i>
-            </button>
+
+            <ul class="nav-menu" id="nav-menu">
+                <li><a href="#skills">Compétences</a></li>
+                <li><a href="#experience">Expériences</a></li>
+                <li><a href="#education">Formation</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+
+            <div class="nav-actions">
+                <button class="theme-toggle" id="theme-toggle" aria-label="Basculer le mode">
+                    <i class="fas fa-moon"></i>
+                </button>
+                <button class="hamburger" id="hamburger" aria-label="Ouvrir le menu">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
         </div>
     </nav>
 

script.js

@@ -1,27 +1,44 @@
 // Theme Toggle Logic
 const themeToggle = document.getElementById('theme-toggle');
+const hamburger = document.getElementById('hamburger');
+const navMenu = document.getElementById('nav-menu');
 const body = document.body;
-const icon = themeToggle.querySelector('i');
+const themeIcon = themeToggle.querySelector('i');
+const menuIcon = hamburger.querySelector('i');
 
-// Check for saved theme
+// Theme Logic
 const savedTheme = localStorage.getItem('theme');
 if (savedTheme === 'dark') {
     body.classList.add('dark-mode');
-    icon.classList.replace('fa-moon', 'fa-sun');
+    themeIcon.classList.replace('fa-moon', 'fa-sun');
 }
 
 themeToggle.addEventListener('click', () => {
     body.classList.toggle('dark-mode');
-
     if (body.classList.contains('dark-mode')) {
         localStorage.setItem('theme', 'dark');
-        icon.classList.replace('fa-moon', 'fa-sun');
+        themeIcon.classList.replace('fa-moon', 'fa-sun');
     } else {
         localStorage.setItem('theme', 'light');
-        icon.classList.replace('fa-sun', 'fa-moon');
+        themeIcon.classList.replace('fa-sun', 'fa-moon');
     }
 });
 
+// Hamburger Menu Logic
+hamburger.addEventListener('click', () => {
+    navMenu.classList.toggle('active');
+    menuIcon.classList.toggle('fa-bars');
+    menuIcon.classList.toggle('fa-times');
+});
+
+// Close menu when clicking links
+document.querySelectorAll('.nav-menu a').forEach(link => {
+    link.addEventListener('click', () => {
+        navMenu.classList.remove('active');
+        menuIcon.classList.replace('fa-times', 'fa-bars');
+    });
+});
+
 // Scroll Reveal Animation
 const revealElements = document.querySelectorAll('[data-reveal]');
 

style.css

@@ -1,3 +1,8 @@
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 90px;
+}
+
 :root {
   /* Light Mode (Default) - Professional & Soft */
   --primary: #2563eb;
@@ -117,6 +122,98 @@ nav {
   opacity: 0.8;
 }
 
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.nav-menu {
+  display: flex;
+  list-style: none;
+  gap: 2.5rem;
+}
+
+.nav-menu a {
+  text-decoration: none;
+  color: var(--text-main);
+  font-weight: 500;
+  font-size: 0.95rem;
+  transition: color 0.3s ease;
+  position: relative;
+}
+
+.nav-menu a:hover {
+  color: var(--primary);
+}
+
+.nav-menu a::after {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--primary);
+  transition: width 0.3s ease;
+}
+
+.nav-menu a:hover::after {
+  width: 100%;
+}
+
+.hamburger {
+  display: none;
+  background: none;
+  border: none;
+  color: var(--text-main);
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  z-index: 1001;
+}
+
+@media (max-width: 768px) {
+  .hamburger {
+    display: block;
+  }
+
+  .nav-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background: var(--bg-main);
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem 0;
+    gap: 1.5rem;
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid var(--glass-border);
+
+    /* Reveal animation */
+    pointer-events: none;
+    opacity: 0;
+    transform: translateY(-15px);
+    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+
+  .nav-menu.active {
+    pointer-events: all;
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .nav-menu li {
+    margin: 0;
+  }
+
+  .nav-menu a {
+    font-size: 1.1rem;
+    font-weight: 600;
+  }
+}
+
 .theme-toggle {
   background: var(--primary);
   color: #fff;