{{- /*
  Bio card for the homepage. Ported from fzakaria.com's _includes/colophon.html.
  Reads entirely from site.Params.profile, so it renders nothing until that's
  configured in hugo.toml, and the avatar itself no-ops if the file is missing.
*/ -}}
{{- with site.Params.profile -}}
  {{- $profile := . -}}
<aside class="colophon" id="about">
  {{- with .avatar }}
    {{- with resources.Get . }}
      {{- /*
        Inlined (not a separate resources.Get file) so it paints with the
        first HTML response instead of racing the real photo over the
        network. 4x4 decode of the avatar's blurhash
        (oZL;Z^4m?wng-PoL~XNbOsShRjNGXTxt={xtM{xZo$t8%1a$IVRk%Nxut6W;IoWBj]V[V@RjR+s.) -
        regenerate it from a new avatar with a blurhash encoder/decoder if
        the avatar ever changes.
      */}}
      <img
        alt="{{ $profile.avatarAlt | default site.Title }}"
        style="background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAP0lEQVR42gE0AMv/AO3r6u7v+6Sco//9/wDLyqd5hnfju4PHx8QAsLOita+p0bOOycTFALuTaCBoRoeDRaKsnq0HINP5xdMWAAAAAElFTkSuQmCC')"
        width="{{ .Width }}"
        height="{{ .Height }}"
        class="colophon__avatar"
        src="{{ .RelPermalink }}"
      >
    {{- end }}
  {{- end }}
  <div>
    {{- if or .firstName .lastName }}
      <p class="colophon__name">{{ with .firstName }}{{ . }} {{ end }}<span class="colophon__name-last">{{ .lastName }}</span></p>
    {{- end }}
    {{- with .bio | default site.Params.description }}
      <div class="colophon__bio">{{ . | markdownify }}</div>
    {{- end }}
    {{- with .links }}
      <ul class="colophon__links">
        {{- range . }}
          <li>
            <span class="key">{{ .key }}</span>
            <span class="val"><a href="{{ .url }}">{{ .value }}</a></span>
          </li>
        {{- end }}
      </ul>
    {{- end }}
  </div>
</aside>
{{- end -}}