Support adding verifiable `Certification` badges in about section (#307)

* Fix link to email address

See https://github.com/hossainemruz/toha/issues/7

* ✨ provide ability to show certification badges in about section

Signed-off-by: jbleduigou <jb.leduigou@gmail.com>

* Merge certifications and sofkSkills under "badges" generic title

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>

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>

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 "#"}}

layouts/partials/sections/about.html

@@ -48,6 +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 .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 }}