<!– Portfolio Grid Section –> <section id=“portfolio” class=“bg-light-gray”>

<div class="container">
    <div class="row">
        <div class="col-lg-12 text-center">
            <h2 class="section-heading">Portfolio</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
        </div>
    </div>
    <div class="row">

      {% for project in site.data.works %}
        <div class="col-md-4 col-sm-6 portfolio-item">
            <a href="#{{ project.id }}" 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>
                <img src="/assets/img/portfolio/{{ project.photo }}" class="img-responsive" alt="{{ project.img-alt }}">
            </a>
            <div class="portfolio-caption">
                <h4>{{ project.name }}</h4>
                <p class="text-muted">{{ project.category }}</p>
            </div>
        </div>
      {% endfor %}

    </div>
</div>

</section>