Use Bootstrap Progress for Skills

lfalanga · May 5, 2021 · 097cc33 · 097cc33
1 parent a2e2893
commit 097cc33
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 26 deletions.
diff --git a/_includes/about/skills.html b/_includes/about/skills.html
@@ -13,10 +13,14 @@ <h2 class="mb-3">{{ include.title }}</h2>
     </div>
   </div>
 
-  <div class="skill-bar mb-4 bg-themed">
-    <div class="progress bg-{{ skill.color | default: "primary" }} wow animated slideInLeft"
-      data-wow-delay="{{ forloop.index | divided_by: 20.0 }}" style="width: {{ skill.percentage }}%;">
-    </div>
+  <div class="progress mb-4 bg-themed" style="height: 8px;">
+    <div class="progress-bar bg-{{ skill.color | default: "primary" }} wow animated slideInLeft"
+      data-wow-delay="{{ forloop.index | divided_by: 20.0 }}"
+      role="progressbar"
+      style="width: {{ skill.percentage }}%;"
+      aria-valuenow="{{ skill.percentage }}"
+      aria-valuemin="0"
+      aria-valuemax="100" />
   </div>
 
   {% endfor %}

diff --git a/_sass/_skills.scss b/_sass/_skills.scss
diff --git a/_sass/portfolYOU.scss b/_sass/portfolYOU.scss
@@ -12,6 +12,5 @@
         "landing",
         "navbar",
         "projects",
-        "skills",
         "timeline",
         "dark";