1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

{{- /*
  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 . }}
      {{- /*
        avatar-blurhash.png is a 16x16 decode of the avatar's blurhash
        (oZL;Z^4m?wng-PoL~XNbOsShRjNGXTxt={xtM{xZo$t8%1a$IVRk%Nxut6W;IoWBj]V[V@RjR+s.),
        shown via CSS while the real photo loads -
        regenerate it from a new avatar with a blurhash encoder/decoder if
        the avatar ever changes.
      */}}
      <img
        class="colophon__avatar"
        src="{{ .RelPermalink }}"
        width="{{ .Width }}"
        height="{{ .Height }}"
        alt="{{ $profile.avatarAlt | default site.Title }}"
        {{- with resources.Get "images/avatar-blurhash.png" }}
        style="background-image:url('{{ .RelPermalink }}')"
        {{- end }}
      >
    {{- 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 -}}