<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cameron's Portfolio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="vendor/styles/normalize.css">
    <link rel="stylesheet" href="styles/icons.css">
    <link rel="stylesheet" href="styles/base.css">
    <link rel="stylesheet" href="styles/layout.css">
    <link rel="stylesheet" href="styles/modules.css">
    <link rel="icon" type="image/x-icon" href="https://i.imgur.com/7v5ASc8.png">

    <script id="project-template" type="text/x-handlebars-template">
      <article data-category="{{category}}">
        <header>
          <h4 class="project-title">
            <a href="{{projectUrl}}">{{title}}</a>
          </h4>
        </header>
        <figure class="image-container">
          <img class="project-image" src="{{projectImageUrl}}">
        </figure>
        <p><strong>{{updateStatus}}</strong></p>
        <section class="project-body">{{{body}}}</section>
        <a href="#" class="read-on">Read on &rarr;</a>
      </article>
    </script>
    <script id="repo-template" type="text/x-handlebars-template">
      <li>
        <a href="{{html_url}}" target="_blank">
          <h3>{{name}}</h3>
        </a>
        <p>Description: {{description}}</p>
        <p>Language: {{language}}</p>
        <p>Created: {{created_at}}</p>
        <p>Last Updated: {{updated_at}}</p>
        {{#if watchers_count}}
          <p>{{watchers_count}} watching this repo</p>
        {{/if}}
      </li>
    </script>
  </head>
  <body>
    <header class="clearfix">
      <hgroup class="pull-left">
        <figure class="headshot-container">
          <img src="https://placebear.com/100/100" alt="dev-picture">
        </figure>
        <h1>Cameron Bacon</h1>
      </hgroup>
      <nav class="main-nav">
        <div class="icon-menu pull-right"></div>
        <ul>
          <li class="tab" data-content="projects"><a href="/" class="icon-home"> Home</a></li>
          <li class="tab" data-content="about"><a href="/about" class="icon-user-tie"> About</a></li>
          <li><a href="https://www.linkedin.com/in/cameronmbacon/" target="_blank" class="icon-linkedin"> LinkedIn</a></li>
          <li><a href="https://github.com/cameronmbacon" target="_blank" class="icon-github"> GitHub</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="projects" class="tab-content">
        <div>
          <ul id="filters">
            <li>
              <select id="category-filter">
                <option value="">-- Filter by Categories --</option>
              </select>
            </li>
          </ul>
        </div>
      </section>
      <section id="about" class="tab-content">
        <header>
          <h1>Welcome to my Portfolio!</h1>
        </header>
        <section>
          <h3>See all of my GitHub repositories(pending):</h3>
          <ul>
            <li>Repo 1</li>
            <li>Repo 2</li>
            <li>Repo Man!</li>
          </ul>
        </section>
      </section>
    </main>
    <footer>
      <p>codebacon.com &copy; 2017</p>
    </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="/vendor/scripts/handlebars.js"></script>
    <script src="/vendor/scripts/marked.js"></script>
    <script src="/vendor/scripts/page.js"></script>
    <script src="/githubToken.js"></script>
    <script src="/scripts/models/project.js"></script>
    <script src="/scripts/views/projectView.js"></script>
    <script src="/scripts/controllers/projectController.js"></script>
    <script src="/scripts/controllers/aboutController.js"></script>
    <script src="/scripts/models/repo.js"></script>
    <script src="/scripts/views/repoView.js"></script>
    <script src="/scripts/controllers/routes.js"></script>
  </body>
</html>
