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="certificate-badge">
      <a href="{{ .url }}" target="_blank" rel="noopener noreferrer">
       <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 }}
    {{ $leftProgress := 0 }}
    {{ $rightProgress := .percentage }}
    {{ if ge .percentage 50 }}
        {{ $rightProgress = 50 }}
        {{ $leftProgress = sub .percentage 50 }}
    {{ end }}
    <div class="circular-progress {{if $predefinedColor}}{{ .color }}{{end}}">
    <span class="circular-progress-left">
        <span
        class="circular-progress-bar circular-progress-percentage-{{ $leftProgress }}  circular-progress-percentage-50-delay"
        {{ if not $predefinedColor }}
            style="border-color: {{.color}};"
        {{ end }}
        ></span>
    </span>
    <span class="circular-progress-right">
        <span
        class="circular-progress-bar circular-progress-percentage-{{ $rightProgress }}"
        {{ if not $predefinedColor }}
            style="border-color: {{.color}};"
        {{ end }}
        ></span>
    </span>
    <div class="circular-progress-value">{{ .name }}</div>
    </div>
{{ end }}
</div>