{% assign to_show = 4 %}

<div id=“projects” class=“projects”>

<h1 style="text-align: center;">Projects</h1>

{% assign sorted_projects = site.projects | sort: 'date' | reverse %}
{% for project in sorted_projects %}
    {% if forloop.index <= to_show %}
        <div class="col-md-6 col-lg-6" style="padding: 0px;">
    {% else %}
        <div class="col-md-6 col-lg-6 hideProject" style="padding: 0px;">
    {% endif %}
            <div class="card" style="background-image: url('{{ project.thumbnail | relative_url }}');">
                <div class="overlay">
                    <div class="content" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%;">
                        <h2 class="name" style="color: #FFFFFF; text-align: center;">{{ project.title }}</h2>
                        <div class="desc">
                            <div class="links" style="text-align: center; font-size: 2em; padding: 10px 0px;">
                                {% for link in project.links %}
                                    <a target="_blank" href="{{ link.link | relative_url }}" style="padding: 0px 5px;">
                                        <i class="{{ link.icon }} link" title="{{ link.name }}"></i>
                                    </a>
                                {% endfor %}
                            </div>
                            <p>{{ project.short_desc }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endfor %}

{% assign value = site.projects.size | modulo:2 %}
{% if value != 0 %}
    {% if site.blog.size > 2 %}
        <div id="placeholderPost" class="col-md-6 col-lg-6 hideProject" style="padding: 0px;">
    {% else %}
        <div id="placeholderPost" class="col-md-6 col-lg-6 hideProject" style="padding: 0px;">
    {% endif %}
            <div class="card" style="cursur: initial;"></div>
        </div>
{% endif %}

<div style="width: 100%; text-align: center;">
    {% if site.projects.size > to_show %}
        <a style="font-size: 2em;" id="ProjectArrow" href="javascript:void(0);" onclick="projectArrow()">
            <i class="fas fa-chevron-down arrow" id="arrowProject"></i>
        </a>
    {% else %}
        <a style="font-size: 2em;">
            <i class="fas fa-chevron-down arrow" style="color: #BBBBBB;"></i>
        </a>
    {% endif %}
</div>

</div>