modals.html

<!-- Portfolio Modals -->
{% for post in site.posts %}

<div class="modal" id="#portfolioModal-{{ post.modal-id }}">
  {{ post.title }}
</div>
<div class="portfolio-modal modal-dialog modal fade" id="portfolioModal-{{ 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 class="star-primary">
            <img src="img/portfolio/{{ post.img }}" class="img-responsive img-centered" alt="{{ post.alt }}">
            {% if post.description %}
            <p>{{ post.description }}</p>
            {% endif %}
            <ul class="list-inline item-details">
              {% if post.client %}
              <li>Client:
                <strong><a href="http://startbootstrap.com">{{ post.client }}</a>
                </strong>
              </li>
              {% endif %}
              {% if post.project-date %}
              <li>Date:
                <strong><a href="http://startbootstrap.com">{{ post.project-date }}</a>
                </strong>
              </li>
              {% endif %}
              {% if post.category %}
              <li>Service:
                <strong><a href="http://startbootstrap.com">{{ post.category }}</a>
                </strong>
              </li>
              {% endif %}
            </ul>
            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i>
              Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endfor %}

projects.html

<h1>Featured Projects</h1>
<section id="portfolio">
  <div class="row">
    {% for post in site.posts %}
    <div class="col-md-6 portfolio-item">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">{{ post.title }}</h5>
          <a href="#portfolioModal-{{ post.modal-id }}" class="portfolio-link" data-toggle="modal" data-target="#portfolioModal-{{ post.modal-id }}">
            <div class="caption">
              <div class="caption-content">
                <i class="fa fa-search-plus fa-3x"></i>
              </div>
            </div>
            <img src="/assets/img/{{ post.img }}" class="img-responsive" alt="{{ post.alt }}">
            {% for tag in post.tags %}
            <div class="tags">
              <a href="{{site.baseurl}}/tags/#{{tag | slugify }}">{{ tag }}</a>
            </div>
            {% endfor %}
          </a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</section>