<!– Portfolio Grid –> <section class=“bg-light page-section” id=“{{ site.data.sitetext.portfolio.section | default: ”portfolio“ }}”>

<div class="container">
  <div class="row">
    <div class="col-lg-12 text-center">
      <h2 class="section-heading text-uppercase">{{ site.data.sitetext.portfolio.title | markdownify | default: "Portfolio" }}</h2>
      <h3 class="section-subheading text-muted">{{ site.data.sitetext.portfolio.text | markdownify }}</h3>
    </div>
  </div>
  <div class="row">
      {% for project in site.portfolio %}
    <div class="col-md-4 col-sm-6 portfolio-item">
      <a class="portfolio-link" data-toggle="modal" href="#p{{ forloop.index }}">
        <div class="portfolio-hover">
          <div class="portfolio-hover-content">
            <i class="{{ site.data.style.portfolio-icon | default: "fas fa-plus fa-3x" }}"></i>
          </div>
        </div>
        <img class="img-fluid" src="{{ project.caption.thumbnail }}" alt="">
      </a>
      <div class="portfolio-caption">
        <h4>{{ project.caption.title }}</h4>
        <p class="text-muted">{{ project.caption.subtitle }}</p>
      </div>
    </div>
      {% endfor %}
  </div>
</div>

</section> {% include modals.html %}