{{ $p := .Params.card }}
<section class="vcard">
  {{ with site.Params.homepage.homepageImage }}{{ with resources.Get . }}
    <div class="vcard__bg" style="background-image:url('{{ .RelPermalink }}')"></div>
  {{ end }}{{ end }}

  <div class="vcard__box">
    {{ with resources.Get $p.avatar }}
      {{ $img := .Fill "256x256 webp q85" }}
      <img class="vcard__avatar" src="{{ $img.RelPermalink }}" width="128" height="128" alt="{{ $p.name }}">
    {{ end }}

    <h1 class="vcard__name">{{ $p.name }}</h1>
    {{ with $p.nick }}<p class="vcard__nick">aka {{ . }}</p>{{ end }}
    <p class="vcard__role">{{ $p.role }}</p>

    {{ with $p.status }}
      <p class="vcard__status is-{{ .state | default "open" }}">
        <span class="vcard__dot"></span>{{ .text }}
      </p>
    {{ end }}

    <ul class="vcard__links">
      {{ range $p.contacts }}
        <li>
          <a href="{{ .url }}"{{ if hasPrefix .url "http" }} target="_blank" rel="noopener me"{{ end }}>
            {{ with .icon }}<span class="vcard__icon">{{ partial "icon.html" . }}</span>{{ end }}
            <span>{{ .label }}</span>
          </a>
        </li>
      {{ end }}
    </ul>

    {{ $posts := first 3 (where site.RegularPages "Section" "in" site.Params.mainSections).ByDate.Reverse }}
    {{ with $posts }}
      <h2 class="vcard__heading">{{ i18n "recentPosts" }}</h2>
      <ul class="vcard__posts">
        {{ range . }}
          <li>
            <a href="{{ .RelPermalink }}">
              <span class="vcard__post-title">{{ .Title }}</span>
              <time class="vcard__post-date" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date | time.Format site.Params.dateFormat }}</time>
            </a>
          </li>
        {{ end }}
      </ul>
    {{ end }}

    {{ with $p.more }}<a class="vcard__more" href="{{ . | relLangURL }}">{{ i18n "moreAboutMe" }}</a>{{ end }}
  </div>
</section>