<div class="-container">
  <a href="#" class="about-close" onclick="document.getElementById('about').classList.remove('open')">
    <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <use xlink:href="./assets/spritesheet.svg#close" />
    </svg>
  </a>

  <img class="about-image" src="./assets/avatar-large.png" alt="About Jo Wroten" />

  <ul class="about-links">
    <li>
      <a href="mailto:jo@wroten.me">
        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <use xlink:href="./assets/spritesheet.svg#email" />
        </svg>
        <span class="-underline">Jo@Wroten.me</span>
      </a>
    </li>
    <li>
      <a href="./assets/resume.pdf">
        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <use xlink:href="./assets/spritesheet.svg#resume" />
        </svg>
        <span class="-underline">Resume</span>
      </a>
    </li>
    <li>
      <a href="https://wrotenwrites.com/">
        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <use xlink:href="./assets/spritesheet.svg#writing" />
        </svg>
        <span class="-underline">Writing</span>
      </a>
    </li>
    <li>
      <a href="https://www.instagram.com/gaiety.art/">
        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <use xlink:href="./assets/spritesheet.svg#instagram" />
        </svg>
        <span class="-underline">Instagram</span>
      </a>
    </li>
    <li>
      <a href="https://unsplash.com/@sharpshark28">
        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <use xlink:href="./assets/spritesheet.svg#unsplash" />
        </svg>
        <span class="-underline">Unsplash</span>
      </a>
    </li>
  </ul>
</div>
