<section id=“portfolio” class=“container py-5 text-center”>

<h1>Portfolio</h1>
<hr class="border-primary">

{% include portfolio_nav.html %}

<div class="tab-content" id="pills-tabContent">
  {% for category in site.categories %}
  <div id="pills-{{ category[0] }}" class="card-columns tab-pane fade {% if forloop.first %}show active{% endif %}" role="tabpanel">

    {% for post in category[1] %}
    <div class="card">
      <img class="card-img" src="{{ post.images[0] }}" alt="{{ post.project_name }} thumbnail">
      <button type="button" class="btn btn-link card-overlay position-absolute" data-toggle="modal" data-target="#{{ post.project_name | url_encode }}-Modal">
        <span class="d-inline-flex h-100">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="learnmore"><path d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"/></svg>
        </span>
      </button>
    </div>
    {% endfor %}

  </div>
  {% endfor %}
</div>

{% include portfolio_detail.html %}

</section>