hugo-toha/layouts/partials/about.html

<div class="container anchor p-md-5" id="{{ replace (lower .section.name) " " "-" }}">
  <div id="about-template">
    <div class="row pt-sm-2 pt-md-4 align-self-center">
      <!-- summery -->
      <div class="col-md-6">
      <h3 class="p-1">{{ site.Params.author.name }}</h3>
        {{ if .designation }}
        <h5 class="p-1">
          {{ .designation }}
          {{ if .company }}
            at <a href="{{ .company.url }}">{{ .company.name }}</a>
          {{ end }}
        </h5>
        {{ end }}
        <p class="p-1 text-justify">
          {{ .summary | markdownify }}
        </p>
        <div class="text-container ml-auto">
          <ul class="social-link d-flex">
            {{ range .socialLinks }}
            <li>
              {{ if eq .name "Email" }}
                <a href="mailto:{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
              {{ else }}
                <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
              {{ end }}
            </li>
            {{ end }}
          </ul>
        </div>
        {{ if .resume }}
        <a href="{{ .resume }}" target="#"
          ><button class="btn btn-dark">My Resume</button></a
        >
        {{ end }}
      </div>
      <!-- soft skills circular-progressbar -->
      <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
        <div class="row">
          {{ range .softSkills }}
            {{ partial "progress/soft-skills" . }}
          {{ end }}
        </div>
      </div>
    </div>
  </div>
</div>