<footer>
    <nav>
        <h5><a href="/">home</a></h5>
        {% for topic in site.topics %}
            <h5><a href="/topics/{{ topic.title }}">{{ topic.title }}</a></h5>
        {% endfor %}
    </nav>

    <hr />

    <section class="h-card">
      <section id="about">
          <h5>The Site</h5>
          <a class="u-url u-uid" href="https://theinternetvagabond.com"></a>
          <p>
            This site is a small slice of internet real-estate that I use for
            occasional writing. Nothing I say is visionary or profound. I will
            tend to focus on technology, gaming, and philosophy. All opinions my
            own.
          </p>
          <h5>The Vagabond</h5>
          <p>
            My name is <span class="p-name">Bill Niblock</span>. <span
            class="p-note">I'm a computer scientist by education, a technologist
            by trade, a gamer by hobby, and a philosopher by accident. I
            currently live in <span class="p-locality">Buffalo</span>, <span
            class="p-region">New York</span>, <span class="p-country-name">USA
            </span>.
          </p>
      </section>
      <section id="social">
          <a class="u-url" rel="me" href="https://github.com/VagabondAzulien"
             aria-label="Link to my GitHub profile">
            <span class="fa fa-github fa-2x" aria-hidden="true"
                  title="My GitHub profile"</span>
          </a>
          <a class="u-url" rel="me" href="https://www.twitch.tv/vagabondazulien/profile"
             aria-label="Link to my Twitch channel">
            <span class="fa fa-twitch fa-2x" aria-hidden="true"
                  title="My Twitch channel"</span>
          </a>
          <a class="u-url" rel="me" href="https://steamcommunity.com/id/azulien"
             aria-label="Link to my Steam profile">
            <span class="fa fa-steam fa-2x" aria-hidden="true"
                  title="My Steam profile"</span>
          </a>
          <a class="u-url" rel="me" href="https://matrix.to/#/@vagabondazulien:exp.farm"
             aria-label="Link to me on Matrix">
            <span class="fa fa-matrix-org fa-2x" aria-hidden="true"
                  title="Speak with me on Matrix"</span>
          </a>
      </section>
      <section id="email">
        <a class="u-email" rel="me" 
          href="mailto:bill@theinternetvagabond.com">
          bill at theinternetvagabond.com
        </a>
      </section>
      <section style="display: none;">
        <span class="p-category">Gaming</span>
        <span class="p-category">Technology</span>
        <span class="p-category">Philosophy</span>
        <span class="p-category">Open Source Software</span>
        <span class="p-category">Self-Hosting</span>
        <span class="p-category">Coffee</span>
      </section>
    </section>
</footer>
