hugo-academic/layouts/partials/widgets/about.html

<!-- About/Biography widget -->
<section id="bio" class="home-section">
  <div class="container">

    <div class="row" itemprop="author" itemscope itemtype="http://schema.org/Person">
      <div class="col-xs-12 col-md-4">
        <div id="profile">

          <div class="portrait" itemprop="image"
               style="background-image: url('{{ .Site.BaseURL }}img/{{ .Site.Params.avatar }}');">
          </div>

          <div class="portrait-title">
            <h2 itemprop="name">{{ .Site.Params.name }}</h2>
            <h3 itemprop="jobTitle">{{ .Site.Params.role }}</h3>
            {{ with .Site.Params.organization }}<h3 itemprop="worksFor">{{ . }}</h3>{{ end }}
          </div>

          <ul class="social-icon">
            {{ range .Site.Params.social }}
            <li>
              <a href="{{ .link }}">
                {{ if eq .icon_pack "ai" }}
                <i class="ai ai-{{ .icon }} big-icon" aria-hidden="true"></i>
                {{ else }}
                <i class="fa fa-{{ .icon }} big-icon" aria-hidden="true"></i>
                {{ end }}
              </a>
            </li>
            {{ end }}
          </ul>

        </div>
      </div>

      <div class="visible-sm visible-xs"></div>

      <div class="col-xs-12 col-md-8" itemprop="description">

        {{ .Content }}

        <div class="row">

          {{ with .Params.interests }}
          <div class="col-sm-5">
            <h3>{{ .title | default "Interests" | markdownify }}</h3>
            <ul>
              {{ range .interests }}
              <li>{{ . }}</li>
              {{ end }}
            </ul>
          </div>
          {{ end }}

          {{ with .Params.education }}
          <div class="col-sm-7">
            <h3>{{ .title | default "Education" | markdownify }}</h3>
            <ul class="ul-edu fa-ul">
              {{ range .courses }}
              <li>
                <i class="fa-li fa fa-graduation-cap"></i>
                <div class="description">
                  <p class="course">{{ .course }}, {{ .year }}</p>
                  <p class="institution">{{ .institution }}</p>
                </div>
              </li>
              {{ end }}
            </ul>
          </div>
          {{ end }}

        </div>

      </div>
    </div>

  </div>
</section>