hugo-toha/layouts/partials/misc/badge.html

<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 "soft-skill-indicator" }}
    {{/* 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>