<!– project Grid Section –> <section id=“project” class=“page particles”>

<div class="page-container">
    {% include nav.html %}
    <div class="row">
        <div class="col-lg-12 page-title fade-0">
            <h2>Projects</h2>
        </div>
    </div>
    <div class="project-row">
        {% assign i = 1 %}
        {% for post in site.categories.projects reversed %}
            <div class="project-item fade-{{ i }}">
                {% assign i = i | plus: 1 %}
                <a href="#projectModal-{{ post.modal-id }}" class="project-link" data-toggle="modal">
                    <img src="{{ post.image | relative_url }}" class="img-responsive fade-{{ i }}" alt="{{ post.alt }}">
                </a>
            </div>
        {% endfor %}
    </div>
</div>

</section>

<!-- project Modals -->
{% for post in site.categories.projects %}
   <div class="project-modal modal fade-0" id="projectModal-{{ post.modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
       <div class="modal-content">
           <div class="close-modal" data-dismiss="modal">
               <div class="lr">
                   <div class="rl">
                   </div>
               </div>
           </div>
           <div class="container">
               <div class="row">
                   <div class="col-lg-8 col-lg-offset-2">
                       <div class="modal-body">
                           <h2>{{ post.title }}</h2>
                           <hr>
                           <img src="{{ post.image | relative_url }}" class="img-featured img-centered" alt="{{ post.alt }}">
                           {{ post.content }}
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>

{% endfor %}