Make color configurable

exampleSite/data/sections/about.yaml

@@ -60,4 +60,17 @@ softSkills:
   color: pink
 - name: Hard Working
   percentage: 85
-  color: green
+  color: green
+- name: Fast Learner
+  percentage: 85
+  color: sky
+- name: Problem Solving
+  percentage: 85
+  color: orange
+# you can also provide color code instead of pre-defined color name
+# - name: Example 1
+#   percentage: 75
+#   color: "#00adb5"
+# - name: Example 2
+#   percentage: 65
+#   color: "#8b8383"

layouts/partials/progress/soft-skills.html

@@ -1,12 +1,24 @@
 <div class="col-6 col-lg-4 p-2">
-  <div class="circular-progress {{ .color }}">
+  {{ $predefinedColor:= true}}
+  {{ if hasPrefix .color "#"}}
+    {{ $predefinedColor = false }}
+  {{ end }}
+  <div class="circular-progress {{if $predefinedColor}}{{ .color }}{{end}}">
     <span class="circular-progress-left">
       <span
         class="circular-progress-bar circular-progress-percentage-{{ .percentage }}"
+        {{ if not $predefinedColor }}
+          style="border-color: {{.color}};"
+        {{ end }}
       ></span>
     </span>
     <span class="circular-progress-right">
-      <span class="circular-progress-bar"></span>
+      <span
+      class="circular-progress-bar"
+      {{ if not $predefinedColor }}
+          style="border-color: {{.color}};"
+      {{ end }}
+      ></span>
     </span>
     <div class="circular-progress-value">{{ .name }}</div>
   </div>

static/assets/css/about.css

@@ -100,7 +100,7 @@
 }
 
 .circular-progress.yellow .circular-progress-bar {
-  border-color: #ffc212;
+  border-color: #eebb4d;
 }
 
 .circular-progress.pink .circular-progress-bar {
@@ -112,11 +112,11 @@
 }
 
 .circular-progress.sky .circular-progress-bar {
-  border-color: #01e0fd;
+  border-color: #00c9e3;
 }
 
 .circular-progress.orange .circular-progress-bar {
-  border-color: #FF7D51;
+  border-color: #ff7c7c;
 }
 
 .circular-progress-percentage-50 {