<!-- See https://microformats.org/wiki/h-card for meaning of h-card, u-photo etc classes -->
<header class = "h-card">
<div class = "profile-pic-name">
<img src="/assets/images/avatar.jpeg" class = "u-photo avatar" alt = "A picture of me." height="175" width="175">
<a class="p-name u-url u-uid" href="https://thomashodson.com"><h1>Tom Hodson</h1></a>
</div>
<p class="p-note bio">
    <span>Maker, Baker</span>
    <span>Programmer</span>
    <span><a href="/thesis">Reformed&nbsp;Physicist</a></span>
    <span><a href = "https://ecmwf.int">RSE@ECMWF</a> </span>
</p>
<p class="professional-links">
  <a href="https://github.com/TomHodson" rel="me authn" class="u-url">GitHub {% include icons/github.svg %}</a>
  <a href="https://tech.lgbt/@Tomhodson" rel="me" class="u-url">Mastodon {% include icons/mastodon.svg %}</a>
  <a href="/feed.xml">RSS {% include icons/rss.svg %}</a>
</p>
{% include sidebar.html%}

<div class="user-toggle">
    <div role="status" class="visually-hidden js-mode-status"></div>
    <button class="toggle-button js-mode-toggle" aria-label="Night Mode Toggle">
      <span class="toggle-button__icon" aria-hidden="true"></span>
    </button>
  </div>

{{ include.extra }}
<hr>
</header>