add scroll smooth

assets/css/style.css

@@ -26,9 +26,10 @@
   box-sizing: border-box;
 }
 
-/* fix overflow because display flex or grid */
+/* fix overflow because display flex or grid and scroll smooth */
 html {
   overflow-x: hidden;
+  scroll-behavior: smooth;
 }
 
 body {

index.html

@@ -43,19 +43,19 @@ <h1>Handika Putra</h1>
     <nav>
       <ul>
         <li>
-          <a href="#">Home</a>
+          <a href="#about">Home</a>
         </li>
         <li>
-          <a href="#">Skills</a>
+          <a href="#skills">Skills</a>
         </li>
         <li>
-          <a href="#">Projects</a>
+          <a href="#projects">Projects</a>
         </li>
         <li>
-          <a href="#">Certifications</a>
+          <a href="#certifications">Certifications</a>
         </li>
         <li>
-          <a href="#">Contact</a>
+          <a href="#contact">Contact</a>
         </li>
       </ul>
     </nav>
@@ -64,7 +64,7 @@ <h1>Handika Putra</h1>
     <!-- main -->
     <main>
       <!-- about -->
-      <div class="about">
+      <div class="about" id="about">
         <div class="about-text">
           <p>
             Hi, I'm Handika Putra <br />
@@ -81,7 +81,7 @@ <h1>Handika Putra</h1>
       </div>
       <!-- end of about -->
       <!-- skills -->
-      <div class="skills">
+      <div class="skills" id="skills">
         <h2>Skills</h2>
         <div class="sub-skills-title">
           <h3>Tech Stack</h3>
@@ -105,7 +105,7 @@ <h3>Tools Used</h3>
       </div>
       <!-- end of skills -->
       <!-- projects -->
-      <div class="projects">
+      <div class="projects" id="projects">
         <h2>Projects</h2>
         <div class="projects-image">
           <img src="assets/img/projects/rezero.png" alt="rezero image gallery" />
@@ -114,7 +114,7 @@ <h2>Projects</h2>
       </div>
       <!-- end of projects -->
       <!-- certifications -->
-      <div class="certifications">
+      <div class="certifications" id="certifications">
         <h2>Certifications</h2>
         <div class="cert-container">
           <div class="cert-image">
@@ -175,7 +175,7 @@ <h2>Certifications</h2>
     <!-- footer -->
     <footer>
       <!-- contact -->
-      <div class="contact">
+      <div class="contact" id="contact">
         <h2>Contact</h2>
         <p>[email protected]</p>
       </div>