<!DOCTYPE html>
<html>
<head>
  <title>Wroten - Portfolio</title>

  <link href="./assets/stylesheet.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Slabo+27px|Source+Code+Pro|Source+Sans+Pro:300" rel="stylesheet"> 

  <meta charset="UTF-8">
  <meta name="author" content="Jo Wroten">
  <meta name="description" content="Web engineer realizing the best tools to communicate valuable information to the people who need it.">
  <meta name="keywords" content="developer,designer,engineer,web,portfolio">
  <meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial-scale=1.0; user-scalable=yes">
</head>
<body class="index">
  <header class="index-header -container -pad-h -pad-v">
    <!--<a href="/" class="index-menulink">
      <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#menu" />
      </svg>
    </a>-->
    <a href="#" class="about-link" onclick="document.getElementById('about').classList.toggle('open')">
      <img class="about-link-image" src="./assets/avatar-small.png" alt="About Jo Wroten" />
    </a>
  </header>
  <div class="popup" id="about">
    {{> about}}
  </div>
  <main class="index-top -container -pad-h">
    <h1 class="intro">
      Canine pretending to be a <em>web engineer</em>
    </h1>
    <div class="index-top-info">
      <h2 class="name -mar-no">
        <em>Jo Wroten</em>
      </h2>
      <div>
        <a href="./assets/resume.pdf">
          <em>
            <svg class="index-interiorlink-icon" 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>
          </em>
        </a>
      </div>
    </div>
  </main>
  <ol class="index-interiorlinks">
    {{#each this}}
      <li class="index-interiorlink-wrapper">
        <a class="index-interiorlink -{{this.pageType}}" href="./{{this.name}}.html">
          <h3 class="-mar-no">
            <svg class="index-interiorlink-icon" 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#{{this.pageType}}" />
            </svg>
            <span class="-underline">{{this.name}}</span>
          </h3>
          <p class="index-interiorlink-description -mar-no">{{this.description}}</p>
          <ul class="tags">
            {{#each this.repositoryTopics.edges}}
              <li class="tag">{{this.node.topic.name}}
            {{/each}}
          </ul>
        </a>
      </li>
    {{/each}}
  </ol>

  {{> footer}}
</body>
</html>
