---
layout: page
title: Portfolio
subtitle: A library of brand collaborations and research projects.
permalink: /portfolio/
---

{% assign brands = site.brands | sort: 'year' | reverse %}
{% assign projects = site.projects | sort: 'year' | reverse %}
{% assign all = brands | concat: projects %}

<div class="filter" role="tablist" aria-label="Filter portfolio">
  <button data-filter="all" class="active">All</button>
  <button data-filter="brand">Brands</button>
  <button data-filter="project">Projects</button>
</div>

<div class="grid" id="portfolio-grid">
  {% for item in all %}
    <div class="grid-item" data-kind="{{ item.kind }}">
      {% include portfolio-card.html item=item %}
    </div>
  {% endfor %}
</div>

{% if all.size == 0 %}
  <p class="lead">Portfolio entries will appear here. Add Markdown files under <code>_brands/</code> or <code>_projects/</code>.</p>
{% endif %}

<script>
  (function () {
    var buttons = document.querySelectorAll('.filter button');
    var items = document.querySelectorAll('#portfolio-grid .grid-item');
    buttons.forEach(function (btn) {
      btn.addEventListener('click', function () {
        buttons.forEach(function (b) { b.classList.remove('active'); });
        btn.classList.add('active');
        var f = btn.getAttribute('data-filter');
        items.forEach(function (el) {
          el.style.display = (f === 'all' || el.getAttribute('data-kind') === f) ? '' : 'none';
        });
      });
    });
  })();
</script>