<div class="landingpage">
    <div class="grid-container fivetoseven" role="main">
      <div class="item" aria-label="Avatar">
        <section id="avatar">
          <img class="avatar" src="{{ .Site.Params.avatar }}" alt="{{ path.Base .Site.Params.avatar }}">
        </section>
      </div>
      <div class="grid-container full autocenter">
        <section id="bio" aria-label="Biography">
          <h1 class="h3-like" aria-level="1" aria-label="Name">{{ .Site.Params.author }}</h1>
          <p class="reset-margin" title="About" aria-label="About">{{ .Site.Params.bio | markdownify }}</p>
        </section>
        <section id="contact" aria-label="Contact">
          <div class="icons" aria-label="Links">
          <h2 class="h3-like" aria-label="Link Icons">
            {{ with .Site.Params.email }}<a class="icon" href="mailto:{{ . }}" target="_blank" rel="noopener">
              <i class="fas fa-envelope" title="email" aria-label="Send email."></i>
            </a>{{ end }}
            {{ range $contact_key,  $contact := .Site.Params.contact }}
              {{ if reflect.IsMap $contact }}
              {{ $style := default "fas" (index $contact "style") }}
              {{ $icon := default $contact_key (index $contact "icon") }}
              {{ $label := default $contact_key (index $contact "name") }}
              {{ $relme := cond (default false (index $contact "rel-me")) " me" "" }}
              <a class="icon" href="{{ index $contact "link" | safeURL }}" target="_blank" rel="noopener{{ $relme }}">
              <i class="{{ $style }} fa-{{ $icon }}" title="{{ $label }}" aria-label="Go to {{ $label }}."></i>
              {{ else }}
              <a class="icon" href="{{ $contact | safeURL }}" target="_blank" rel="noopener">
              <i class="fab fa-{{ $contact_key }}" title="{{ $contact_key }}" aria-label="Go to {{ $contact_key }}."></i>
              {{ end }}
            </a>{{ end }}
          </h2>
          </div>
        </section>
      </div>
    </div>
  </div>