index.html

---
layout: default
---

<div class="home">

  <p class="intro">I'm a front-end web developer with a focus on modern
  JavaScript workflows and tooling, and a yen for functional programming.</p>

  <h1 class="section-heading">Skillset</h1>

  {% for skill in site.skills %}
    <p class="skill" data-powertip="{{ skill.content | escape }}">
      <strong>{{ skill.title }}:</strong>
      <em>{{ skill.proficiency }}</em>
    </p>
  {% endfor %}

  <h1 class="section-heading">Open Source</h1>

  {% for contrib in site.contribs %}
    <div class="contribution">
      <h2 class="contribution-heading">
        {{ contrib.title }}
        <a class="contrib-reference" href="{{ contrib.reference_url }}">
          view on GitHub
        </a>
      </h2>
      {{ contrib.content }}
    </div>
  {% endfor %}

  <h1 class="section-heading">Projects</h1>

  {% for proj in site.projects %}
    <div class="project">
      {% if proj.images | length %}
        <div class="project-images">
          {% for image in proj.images %}
            <div class="project-image">
              <img src="{{ image | prepend: site.baseurl }}">
            </div>
          {% endfor %}
        </div>
      {% endif %}
      <ul class="relatedlinks">
        <li>
          <a href="{{ proj.github_repo_name | prepend: '/' | prepend: site.baseurl }}">
            Demo
          </a>
        </li>
        <li>
          <a href="https://github.com/{{ site.github_username }}/{{ proj.github_repo_name }}">
            Code
          </a>
        </li>
      </ul>
      <div class="project-description">
        <h2 class="project-heading">{{ proj.title }}</h2>
        <ul class="techstack">
          {% for tech in proj.tech %}
            <li>{{ tech }}</li>
          {% endfor %}
        </ul>
        {{ proj.content }}
      </div>
    </div>
  {% endfor %}

  <script src="scripts/main.js"></script>

</div>