{{ $image := resources.Get "img/profile.jpg" }}
{{ with $image }}
{{ $resized := .Resize "webp 256x" }}
<img class="fancy-img" alt="Profile Picture" width="{{ $resized.Width }}" height="{{ $resized.Height }}" src="{{ $resized.Permalink }}"/>
{{ end }}

<div style="text-align: center; margin-top: 10px">
    {{ $currentPage := . }}
    {{ range $index, $element := .Site.Menus.formats }}
    {{ $len := (len $.Site.Menus.formats) }}

    <a class="header-link" title="{{ .Name }}" rel="me" href="{{ .URL  }}">{{ .Name }}</A>
    
    {{ if not (eq (add $index 1) $len) }}·{{ end }}
    {{ end }}
</div>

<p>
    Hey I do graphics dev, write tools, cross-platform stuff and contribute
    where I can! I draw sometimes.
</p>

<hr>

<p>Accounts:</p>

<div id="social-links">
    {{ $currentPage := . }}
    {{ range .Site.Menus.links }}
    {{ $icon := .Params.icon}}
    <div><a class="header-link" title="{{ .Name }}" rel="me" href="{{ .URL  }}">{{ partial "svg" $icon }} {{ .Name }}</a></div>
    {{ end }}
    </div>

<p>Contact:</p>

<div id="social-links">
{{ $currentPage := . }}
{{ range .Site.Menus.contact }}
{{ $icon := .Params.icon}}
<div><a class="header-link" title="{{ .Name }}" rel="me" href="{{ .URL  }}">{{ partial "svg" $icon }} {{ .Name }}</a></div>
{{ end }}
</div>

<p>Donate:</p>

<div id="social-links">
    {{ $currentPage := . }}
    {{ range .Site.Menus.donate }}
    {{ $icon := .Params.icon}}
    <div><a class="header-link" title="{{ .Name }}" rel="me" href="{{ .URL  }}">{{ partial "svg" $icon }} {{ .Name }}</a></div>
    {{ end }}
</div>