website/_subpages/03-portfolio.md

title, permalink

title	permalink
Portfolio	/portfolio

<ul class="filter-list">

<li class="filter-item">
    <button class="active" data-filter-btn>All</button>
</li>

{% assign tags = site.data.portfolio | map: "tag" | uniq %}
{% for tag in tags %}
<li class="filter-item">
    <button data-filter-btn>{{ tag }}</button>
</li>
{% endfor %}

</ul>

<div class="filter-select-box">

<button class="filter-select" data-select>

    <div class="select-value" data-select-value>Select category</div>

    <div class="select-icon">
    <ion-icon name="chevron-down"></ion-icon>
    </div>

</button>

<ul class="select-list">

    <li class="select-item">
    <button data-select-item>All</button>
    </li>

    {% assign tags = site.data.portfolio | map: "tag" | uniq %}
    {% for tag in tags %}
    <li class="select-item">
        <button data-select-item>{{ tag }}</button>
    </li>
    {% endfor %}

</ul>

</div>

<ul class="select-grid-list">

{% for project-item in site.data.portfolio %}
<li class="select-grid-item active" data-filter-item data-category="{{ project-item.tag | downcase }}">
    <a target="_blank" href="{{ project-item.link }}">

    <figure class="select-grid-item-img">
        <div class="select-grid-item-icon-box">
        <ion-icon name="eye-outline"></ion-icon>
        </div>

        <img src="{{ project-item.image }}" alt="{{ project-item.image_alt }}" loading="lazy">
    </figure>

    <h3 class="select-grid-item-title">{{ project-item.title }}</h3>

    <p class="select-grid-item-description">{{ project-item.date }}, {{ project-item.tag }}</p>

    </a>
</li>
{% endfor %}

</ul>