fix link navigation

ihazrel · May 27, 2024 · c05ff0b · c05ff0b
1 parent 15c4962
commit c05ff0b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -5,16 +5,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>My Portfolio</title>
     <link rel="stylesheet" href="style.css">
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"/>
 </head>
 <body>
     <header>
         <a href="#" class="logo">hih</a>
         <nav class="navbar">
             <ul>
                 <li><a href="#home">Home</a></li>
-                <li><a href="#about-main">About</a></li>
-                <li><a href="#skills">Skills</a></li>
-                <li><a href="#projects">Projects</a></li>
+                <li><a href="#about-main" onclick="scrollToElement(event, 'about-main', -200)">About</a></li>
+                <li><a href="#skills" onclick="scrollToElement(event, 'skills', -50)">Skills</a></li>
+                <li><a href="#projects" onclick="scrollToElement(event, 'projects', -60)">Projects</a></li>
                 <li><a href="#contact">Contact</a></li>
             </ul>
         </nav>
@@ -62,7 +63,7 @@ <h3>Dean's List all semester</h3>
     <!-- Skills Section -->
     <section class="skills" id="skills">
         <h2>
-            Here are some of my skills
+            Professional Skillset
         </h2>
         <div class="row" style="padding-top: 25px;">
             <div class="icon"><img class="skill-icon" src="image/flutter.jpg"></img></div>
@@ -121,7 +122,7 @@ <h3>
     <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
     <script>
         var typed = new Typed('#highlight', {
-        strings: ['Web Developer', 'Mobile app developer', 'Fullstack Engineer', 'Student'],
+        strings: ['', 'Mobile App Developer', 'Fullstack Engineer', 'Web Developer', 'Student'],
         typeSpeed: 100,
         backSpeed: 60,
         loop: true

diff --git a/script.js b/script.js
@@ -8,4 +8,17 @@ var typed = new Typed('#highlight', {
     typeSpeed: 100,
     backSpeed: 60,
     loop: true
-     });
+     });
+
+function scrollToElement(event, id, offset) {
+    event.preventDefault(); // Prevent the default anchor behavior
+    const element = document.getElementById(id);
+    if (element) {
+        const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
+        const offsetPosition = elementPosition + offset;
+        window.scrollTo({
+            top: offsetPosition,
+            behavior: "smooth"
+        });
+    }
+}
diff --git a/style.css b/style.css
@@ -100,9 +100,11 @@ hr{
     display: flex;
     flex-direction: column;
     font-family: 'Roboto', sans-serif;
-    margin-top: 8%;
     background-color: #141414;
 }
+#about-main{
+    margin-top: 8%;
+}
 #about-main,
 #about{
     padding: 50px 0;