hugo-toha/layouts/partials/cards/project.html

<div
  class="col-sm-12 col-md-6 col-lg-4 p-2 filtr-item"
  data-category='all, {{ delimit  .tags ","}}'
>
  <div class="card mt-1">
    <div class="card">
      <a href="{{ if .repo }}{{ .repo }}{{ else if .url }}{{ .url }}{{ else }}javascript:void(0){{ end }}" {{ if or .repo .url }}target="_blank" rel="noopener"{{ end }}>
        {{ if .image }}
        <div class="card-head">
          {{ $imageImage:= resources.Get .image}}
          {{ if $imageImage }}
            {{/*  svg don't support "Fit" operation   */}}
            {{ if ne $imageImage.MediaType.SubType "svg" }}
              {{ $imageImage = $imageImage.Fit "1000x1000" }}
            {{ end }}
            <img class="card-img-top" src="{{ $imageImage.RelPermalink }}" alt="{{ .name }}" />
          {{ end }}
        </div>
        {{ end }}
        <div class="card-header">
          <div>
            <div class="d-flex">
              {{ if .logo }}

                {{ if eq (len (findRE ".*/.*" .logo) ) 0 }}

                  <i style="padding-right: 0.25em" class="{{.logo}} h4"></i>

                {{ else }}

                  {{ $logoImage:= resources.Get .logo}}
                    {{ if $logoImage }}
                      {{/*  svg don't support "Fit" operation   */}}
                      {{ if ne $logoImage.MediaType.SubType "svg" }}
                        {{ $logoImage = $logoImage.Fit "24x24" }}
                      {{ end }}
                      <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
                    {{ end }}
                  {{ end }}

              {{ end }}
              
              <h5 class="card-title mb-0">{{ .name }}</h5>
            </div>
            <div class="sub-title">
              <span>{{ .role }}</span>
              <span>{{ .timeline }}</span>
            </div>
          </div>
        </div>
      </a>
      <div class="card-body text-justify pt-1 pb-1">
        <p>{{ .summary | markdownify }}</p>
        <!-- Display project card technology tags -->
        <div class="project-card-footer">
          {{ if .tags }}
            <div class="project-tags-holder">
              {{ range $index,$tag:= .tags }}
                  <span class="badge btn-info">
                    {{ $tag }}
                  </span>
              {{ end }}
            </div>
          {{ end }}
          <div class="project-btn-holder">
            {{ if .repo }}
            <!-- Place this tag where you want the button to render. -->
            <a
              class="github-button project-btn d-none"
              href="{{ .repo }}"
              data-icon="octicon-standard"
              data-show-count="true"
              aria-label="Star {{ .name }}"
              >{{ i18n "project_star" }}</a
            >
            {{ else if .url }}
            <span>
              <a
                class="btn btn-outline-info btn-sm"
                href="{{ .url }}"
                target="#"
                >{{ i18n "project_details" }}</a
              >
            </span>
            {{ end }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>