<section id="portfolio-section" class="section">
  <div class="section-wrapper">
    <div class="fade-in">
      <h1 class="section-heading">Some of My Work</h1>
      <span class="divider"></span>
      <div class="portfolio-item-wrapper">
        {% for project in site.data.portfolio %}
        <div class="portfolio-row">
          <div class="screenshots {% if project.title == 'Screentime 2.0' %}screentime{% endif %}">
            {% if project.title == "Screentime 2.0" %}
            <img class="img-{{project.img}}" src="img/portfolio/{{project.img}}/{{project.img}}-1.jpg" alt="">
            <img class="img-{{project.img}}" src="img/portfolio/{{project.img}}/{{project.img}}-2.jpg" alt="">
            <img class="img-{{project.img}}" src="img/portfolio/{{project.img}}/{{project.img}}-3.jpg" alt="">
            <img class="img-{{project.img}}" src="img/portfolio/{{project.img}}/{{project.img}}-4.jpg" alt="">
            {% else %}
            <img class="img-lg" src="img/portfolio/{{project.img}}/{{project.img}}.jpg" alt="">
            <img class="img-md" src="img/portfolio/{{project.img}}/{{project.img}}-tablet.jpg" alt="">
            <img class="img-sm" src="img/portfolio/{{project.img}}/{{project.img}}-mobile.jpg" alt="">
            {% endif %}
          </div>
          <div class="description-title-container">
            <h2 class="description-title">{{project.title}}</h2>
            <div class="description-buttons">
              <a href="{{project.demo}}" target="_blank">Demo</a>
              {% if project.code %}
              <a href="{{project.code}}" target="_blank">Code</a>
              {% endif %}
            </div>
          </div>
          <p class="portfolio-description">{{project.description}}</p>
          <div class="used">
            <ul class="used-items">
              {% for item in project.used %}
              <li class="used-item">{{item.thing}}</li>
              {% endfor %}
            </ul>
          </div>
        </div>
        <span class="divider"></span>
        {% endfor %}
      </div>
    </div>
  </div>
</section>
