made some alignment changes

index.html

@@ -12,7 +12,7 @@
     <div class="navbar">
         <i class='bx bx-menu' id="menu-icon"></i>
         <h2>SRTK.</h2>
-        <ul>
+        <ul id="nav-links" class="hidden">
             <li><a href="#">home</a></li>
             <li><a href="#">stack</a></li>
             <li><a href="#">projects</a></li>
@@ -46,7 +46,7 @@ <h2>Sarthak Borude</h2>
         </div>
     </div>
 
-
+<script src="script.js"></script>
 
 </body>
 </html>

script.js

@@ -1,33 +1,37 @@
-let menuIcon = document.querySelector('#menu-icon');
-let navbar = document.querySelector('.navbar');
+document.addEventListener('DOMContentLoaded', () => {
+    const menuIcon = document.querySelector('#menu-icon');
+    const navbar = document.querySelector('.navbar');
+    const navLinksContainer = document.querySelector('#nav-links');
+    const navLinks = document.querySelectorAll('header a');
+    const sections = document.querySelectorAll('section');
 
-menuIcon.onclick = () => {
-    menuIcon.classList.toggle('bx bx-x');
-    navbar.classList.toggle('active');
-} 
+    menuIcon.onclick = () => {
+        menuIcon.classList.toggle('bx-x');
+        navLinksContainer.classList.toggle('show');
+    };
 
-let sections = document.querySelectorAll('section');
-let navLinks = document.querySelectorAll('header nav a');
+    window.onscroll = () => {
+        let scrollPosition = window.scrollY;
 
-window.onscroll = () => {
-    sections.forEach(sec => {
-        let top =window.scrollY;
-        let offset = sec.offsetTop - 150;
-        let height = sec.offsetHeight;
-        let id = sec.getAttribute('id');
+        sections.forEach(section => {
+            let offset = section.offsetTop - 150;
+            let height = section.offsetHeight;
+            let id = section.getAttribute('id');
 
-        if(top >= offset && top < offset + height){
-            navLinks. forEach.apply(links=> {
-                links.classList.remove('active');
-                document.querySelector('header nav a[href*-' + id +']').classList.add('active')
+            if (scrollPosition >= offset && scrollPosition < offset + height) {
+                navLinks.forEach(link => {
+                    link.classList.remove('active');
+                    document.querySelector(`header a[href*=${id}]`).classList.add('active');
+                });
+            }
+        });
 
-            });
-        };
-    });
+        let header = document.querySelector('header');
+        header.classList.toggle('sticky', window.scrollY > 100);
 
-    let header= document.querySelector('header');
-    header.classList.toggle('sticky', window.scrollY > 100);
+        // Remove active classes when scrolling
+        menuIcon.classList.remove('bx-x');
+        navLinksContainer.classList.remove('show');
+    };
+});
 
-    menuIcon.classList.remove('bx bx-x');
-    navbar.classList.remove('active');
-};

style.css

@@ -154,12 +154,9 @@ body{
 
 #menu-icon{
     display:none;
-}
-
-@media (max-width: 1200px){
-    html{
-        font-size: 55%;
-    }
+    cursor: pointer;
+    font-size: 24px;
+
 }
 
 @media (max-width: 768px){
@@ -169,16 +166,35 @@ body{
 
     }
 
-    .navbar ul{
-        position: absolute;
-        top: 100%;
-        left: 0;
+    #nav-links{
+       display: none;
+       flex-direction: column;
+       align-items: flex-start;
+       background-color: white;
+       width: 100%;
+       padding: 1rem 0;
+    }
+
+    #nav-links.show{
+        display: flex;
+    }
+
+    .navbar ul li {
         width: 100%;
-        padding: 1rem 3%;
-        background: white;
-        border-top: .1rem solid rgba(0,0,0,0.2);
-        box-shadow: 0 .5rem 1rem rgba(0,0,0,0.1);
-        display: none;
+        padding: 1rem 2%;
+        text-align: left;
+    }
+
+    .sticky {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
+        background-color: #333;
+    }
+
+    .active {
+        color: yellow;
     }
 
     .container{
@@ -212,7 +228,7 @@ body{
 
     .textsection h2{
         padding-left: 0;
-        font-size: 3.2rem;
+        font-size: 2.2rem;
     }
 
     .textsection p{