<section id="portfolio">

<div class="container">

{% assign loopindex = 0 %}

{% for project in site.projects reversed %}

{% assign loopindex = loopindex | plus: 1 %}

{% assign rowfinder = loopindex | modulo: 2 %}

{% if rowfinder == 1 %}

<!-- start the row -->

<div class="row portfolio-row">

<!-- card -->

<div class="portfolio-column portfolio-item">

<a href="{{ project.url }}" class="portfolio-link">

<div class="caption">

<p>{{ project.title }}</p>

</div>

<img src="images/portfolio/{{ project.image }}" class="portfolio-item img-responsive overlay" alt="{{ project.alt }}">

</a>

</div>

{% elsif rowfinder == 0 %}

<!-- card -->

<div class="portfolio-column portfolio-item">

<a href="{{ project.url }}" class="portfolio-link">

<div class="caption">

<p>{{ project.title }}</p>

</div>

<img src="images/portfolio/{{ project.image }}" class="portfolio-item img-responsive" alt="{{ project.alt }}">

</a>

</div>

<!-- end the row -->

</div>

{% else %}

<!-- card -->

<div class="portfolio-column portfolio-item">

<a href="{{ project.url }}" class="portfolio-link">

<div class="caption">

<p>{{ project.title }}</p>

</div>

<img src="images/portfolio/{{ project.image }}" class="portfolio-item img-responsive" alt="{{ project.alt }}">

</a>

</div>

{% endif %}

{% endfor %}

<!-- close the div if rows are incomplete -->

{% if rowfinder != 0 %}

</div>

{% endif %}

</div>