added animations for about me section

assets/js/main.js

@@ -175,17 +175,19 @@
     /**
      * Skills animation
      */
-    let skilsContent = select(".skills-content");
+    let skillsContent = select(".skills-content .progress", true);
-    if (skilsContent) {
+    if (skillsContent) {
-        new Waypoint({
+        skillsContent.forEach((skill) => {
-            element: skilsContent,
+            new Waypoint({
-            offset: "80%",
+                element: skill,
-            handler: function(direction) {
+                offset: "100%",
-                let progress = select(".progress .progress-bar", true);
+                handler: function(direction) {
-                progress.forEach((el) => {
+                    let progress = skill.querySelectorAll(".progress-bar");
-                    el.style.width = el.getAttribute("aria-valuenow") + "%";
+                    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" data-aos="fade-up">
+        <section id="about" class="about">
             <div class="container">
 
-                <div class="section-title">
+                <div class="section-title" data-aos="fade-up">
                     <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">
+                <div class="row" data-aos="fade-up">
                     <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">
+                    <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="row">
                             <div class="col-lg-6 mt-4 mt-lg-0">
                                 <ul>