projects.html

<div class="card-columns m-3 mt-5">

  {% for project in site.projects %}

    {% comment %} Determine project link {% endcomment %}
    {% if project.direct_link %}
      {% assign project_link = project.direct_link %}
    {% else %}
      {% assign project_link = project.url | relative_url %}
    {% endif %}

    <div class="wow animated fadeIn" data-wow-delay=".15s">
      <a href="{{ project_link }}" class="project card text-dark">
        {% if project.image %}
          <img class="card-img-top" src="{{ project.image }}" alt="Card image cap">
        {% endif %}
        <div class="card-body">
          <h5 class="card-title">{{ project.name }}</h5>
          <p class="card-text">{{ project.description }}</p>
          <p class="card-text">
            {% for tool in project.tools %}
              <span class="badge badge-pill text-primary border border-primary">{{tool}}</span>
            {% endfor %}
          </p>
        </div>
      </a>
    </div>
    
  {% endfor %}

</div>