assets/js/main.js

@@ -175,20 +175,18 @@
     /**
      * Skills animation
      */
-    let skillsContent = select(".skills-content .progress", true);
-    if (skillsContent) {
-        skillsContent.forEach((skill) => {
+    let skilsContent = select(".skills-content");
+    if (skilsContent) {
         new Waypoint({
-                element: skill,
-                offset: "100%",
+            element: skilsContent,
+            offset: "80%",
             handler: function(direction) {
-                    let progress = skill.querySelectorAll(".progress-bar");
+                let progress = select(".progress .progress-bar", true);
                 progress.forEach((el) => {
                     el.style.width = el.getAttribute("aria-valuenow") + "%";
                 });
             },
         });
-        });
     }
 
     /**

index.html

@@ -72,10 +72,10 @@
     <main id="main">
 
         <!-- ======= About Me Section ======= -->
-        <section id="about" class="about">
+        <section id="about" class="about" data-aos="fade-up">
             <div class="container">
 
-                <div class="section-title" data-aos="fade-up">
+                <div class="section-title">
                     <span>About Me</span>
                     <h2>About Me</h2>
                     <p> Passionate about computer science and love to have lengthy conversations
@@ -86,12 +86,12 @@
                     </p>
                 </div>
 
-                <div class="row" data-aos="fade-up">
+                <div class="row">
                     <div class="image col-lg-4 d-flex align-items-stretch
                             justify-content-center justify-content-lg-start">
+
                     </div>
-                    <div class="content col-lg-8 ps-lg-4 d-flex flex-column align-items-stretch justify-content-center"
-                        data-aos="fade-up">
+                    <div class="content col-lg-8 ps-lg-4 d-flex flex-column align-items-stretch justify-content-center">
                         <div class="row">
                             <div class="col-lg-6 mt-4 mt-lg-0">
                                 <ul>