diff --git a/layouts/partials/misc/badge.html b/layouts/partials/misc/badge.html
new file mode 100644
index 0000000..2a46299
--- /dev/null
+++ b/layouts/partials/misc/badge.html
@@ -0,0 +1,35 @@
+<div class="col-6 col-lg-4 p-2">
+{{ if eq .type "certification" }}
+    {{/* Verifiable certificate badge from https://www.credly.com */}}
+    <div class="">
+      <a href="{{ .url }}" target="_blank" >
+       <img src="{{ .badge }}" alt="{{ .name }}" />
+      </a>
+    </div>
+{{ else if eq .type "circular-bar" }}
+    {{/* Circular bar indicating the level of expertise in a skill */}}
+    {{ $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"
+        {{ if not $predefinedColor }}
+            style="border-color: {{.color}};"
+        {{ end }}
+        ></span>
+    </span>
+    <div class="circular-progress-value">{{ .name }}</div>
+    </div>
+{{ end }}
+</div>
diff --git a/layouts/partials/misc/certifications.html b/layouts/partials/misc/certifications.html
deleted file mode 100644
index f81f7a4..0000000
--- a/layouts/partials/misc/certifications.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="col-6 col-lg-4 p-2">
-  <div class="">
-    <a href="{{ .url }}" target="_blank" >
-     <img src="{{ .badge }}" alt="{{ .name }}" />
-    </a>
-  </div> 
-</div>
-
diff --git a/layouts/partials/misc/soft-skills.html b/layouts/partials/misc/soft-skills.html
index cbdc0ae..1517564 100644
--- a/layouts/partials/misc/soft-skills.html
+++ b/layouts/partials/misc/soft-skills.html
@@ -1,3 +1,4 @@
+{{/* TODO: Delete this file in version v4+ */}}
 <div class="col-6 col-lg-4 p-2">
   {{ $predefinedColor:= true}}
   {{ if hasPrefix .color "#"}}
diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
index c6a6ca8..3bb02d6 100644
--- a/layouts/partials/sections/about.html
+++ b/layouts/partials/sections/about.html
@@ -48,9 +48,11 @@
     <!-- soft skills circular-progressbar -->
     <div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">
       <div class="row">
-        {{ range .certifications }}
-          {{ partial "misc/certifications.html" . }}
+        {{ range .badges }}
+          {{ partial "misc/badge.html" . }}
         {{ end }}
+        <!-- TODO: Remove this part in version v4+ -->
+        <!-- Keep backward compatibility with old configuration -->
         {{ range .softSkills }}
           {{ partial "misc/soft-skills.html" . }}
         {{ end }}