{{ "<!-- Portfolio Grid Section -->" | safeHTML }}
<section id="portfolio" class="bg-light-gray">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">{{ with .Site.Params.portfolio.title }}{{ . | markdownify }}{{ end }}</h2>
        <h3 class="section-subheading text-muted">{{ with .Site.Params.portfolio.subtitle }}{{ . | markdownify }}{{ end }}</h3>
      </div>
    </div>
    <div class="row">

      {{ range .Site.Data.projects }}
        <div class="col-md-4 col-sm-6 portfolio-item">
          <a href="#portfolioModal{{ .modalID }}" class="portfolio-link" data-toggle="modal">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">
                <i class="fa fa-plus fa-3x"></i>
              </div>
            </div>
            {{ $url := printf "img/portfolio/%s" .preview }}
            <img src="{{ $url | absURL }}" class="img-responsive" alt="">
          </a>
          <div class="portfolio-caption">
            <h4>{{ .title | markdownify }}</h4>
            <p class="text-muted">{{ .category | markdownify }}</p>
          </div>
        </div>
      {{ end }}

    </div>
  </div>
</section>