Update index.html

index.html

@@ -22,6 +22,11 @@
 
         * { margin: 0; padding: 0; box-sizing: border-box; }
         
+        html {
+            /* 1. ENABLE SMOOTH SCROLLING GLOBALLY */
+            scroll-behavior: smooth;
+        }
+
         body {
             background-color: var(--bg-color);
             color: var(--text-main);
@@ -30,7 +35,7 @@
             line-height: 1.6;
         }
 
-        /* --- KEYFRAMES --- */
+        /* --- ANIMATIONS --- */
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
@@ -144,7 +149,6 @@
             padding-right: 2rem;
             letter-spacing: 0.5rem;
             white-space: nowrap;
-            /* Glitch Animation trigger class */
         }
         
         .glitch-effect:hover {
@@ -152,7 +156,7 @@
             color: var(--accent-red);
         }
 
-        /* --- PROFILE IMAGE & LOADER --- */
+        /* --- PROFILE IMAGE --- */
         .hero-img-container {
             width: 100%;
             height: 400px;
@@ -165,7 +169,6 @@
             align-items: center;
         }
 
-        /* Loading Spinner */
         .img-loader {
             width: 50px;
             height: 50px;
@@ -183,7 +186,7 @@
             object-fit: cover;
             filter: grayscale(100%) contrast(120%);
             transition: filter 0.5s ease, transform 0.5s ease;
-            opacity: 0; /* Hidden until loaded */
+            opacity: 0;
             position: relative;
             z-index: 2;
         }
@@ -195,7 +198,6 @@
             transform: scale(1.05);
         }
 
-        /* Decorative Corners */
         .hero-img-container::after {
             content: '';
             position: absolute;
@@ -246,9 +248,11 @@
         }
 
         /* --- SECTIONS --- */
-        section {
+        section, footer {
             padding: 5rem 0;
             border-bottom: 1px solid rgba(255,255,255,0.05);
+            /* 2. FIX SCROLL POSITION BEHIND HEADER */
+            scroll-margin-top: 80px; 
         }
 
         .section-title {
@@ -463,21 +467,17 @@
     </footer>
 
     <script>
-        // Toggle Mobile Menu
         function toggleMenu() {
             document.getElementById('navLinks').classList.toggle('active');
         }
 
-        // Image Load Handler
         function imageLoaded() {
             const img = document.querySelector('.hero-img');
             const loader = document.getElementById('imgLoader');
-            
-            img.classList.add('loaded'); // Reveal image
-            loader.style.display = 'none'; // Hide spinner
+            img.classList.add('loaded'); 
+            loader.style.display = 'none'; 
         }
 
-        // Intersection Observer for Scroll Animations
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
@@ -487,7 +487,6 @@
             });
         }, { threshold: 0.1 });
 
-        // Apply animations to elements
         document.querySelectorAll('.skill-card, .project-item').forEach((el) => {
             el.style.opacity = 0;
             el.style.transform = 'translateY(30px)';