filter-people.html

{% assign row_counter = 0 %}
{% assign column_counter = 0 %}

{% for group in include.members %}
<!--        Sort the items by the name of the person-->
{% assign sorted_people = group.items | sort: "url" %}

{% for people in sorted_people %}
{% assign empty_name = people.name | strip %}
<!--        The unless block skips the template.md file, which is used as template for the new members-->
{% unless empty_name == '' %}

<!--        Start a new row of people-->
<!--        For large screens, we show 3 members per row, for medium screens we show 2 members per row and for small screens-->
<!--        we show 1 member for row. To accommodate all the changes, we make a row have 6 children, which based on the-->
<!--        screen size will display the correct amount. Therefore, the row_counter will reset at 5.-->
{% if row_counter == 0 %}
<div class="row">
    {% endif %}

    <!--        We keep a column counter to set the animation type, although for medium screens when a row has only 2 members,-->
    <!--        the animations will be chaotic.-->
    {% if column_counter == 0 %}
    <!--        Animation for the first column-->
    {% assign animationType = 'fadeInLeft' %}
    {% endif %}

    {% if column_counter == 1 %}
    <!--        Animation for the second column-->
    {% assign animationType = 'zoomIn' %}
    {% endif %}

    {% if column_counter == 2 %}
    <!--            Animation for the 3rd column-->
    {% assign animationType = 'fadeInRight' %}
    {% endif %}

    <div class="col-lg-4 col-md-6">
        {% assign people_slug = people.url | slugify %}
        <div id="{{ people_slug }}" class="card person-card animated"
             onclick="window.location.href='{{site.baseurl}}{{people.url}}'" data-animation="{{ animationType }}">
            <div class="card-header clearfix">
                <div class="square pull-left">
                    {% if people.image contains 'http://' or people.image contains 'https://' %}
                    <div class="person-image" style="background-image:url('{{ people.image }}')"></div>
                    {% else %}
                    <div class="person-image"
                         style="background-image:url('{{ site.baseurl }}/assets/img/people/{{ people.image }}')"></div>
                    {% endif %}
                </div>
                <div class="text-left">
                    <h4>
                        <a class="people-item-name" href="{{site.baseurl}}{{people.url}}" style="pointer-events: auto;">{{people.name}}</a>
                    </h4>
                    <p>{{people.role}} {% if people.team contains 'cel' %} @ CEL {% endif %}</p>
                </div>
            </div>
            <div class="card-body text-center">
                <p>{{people.office}}</p>
                <p>
                    <a href="mailto:{{people.email}}" target="_blank" class="icon-link" onclick="event.stopPropagation();"><i
                            class="fa-solid fa-lg fa-envelope"></i></a>
                    {% assign empty_linkedin = people.linkedin | strip %}
                    {% unless empty_linkedin == '' %}
                    | <a href="{{people.linkedin}}"
                         class="icon-link" style="pointer-events: auto;" target="_blank" title="LinkedIn" onclick="event.stopPropagation();">
                    <i class="fa-brands fa-lg fa-linkedin"></i>
                </a>
                    {% endunless %}
                    {% assign empty_github = people.github | strip %}
                    {% unless empty_github == '' %}
                    | <a href="{{people.github}}"
                         class="icon-link" target="_blank" title="GitHub" onclick="event.stopPropagation();" >
                    <i class="fa-brands fa-lg fa-github"></i>
                </a>
                    {% endunless %}
                </p>
            </div>
        </div>

    </div>

    <!--        We close the div after 6 columns (0 to 5), although 3, 2 or 1 are displayed in a row. -->
    {% if row_counter == 5 %}
</div>
{% assign row_counter = -1 %}
{% endif %}

<!--        Reset the counter for animations-->
{% if column_counter == 2 %}
{% assign column_counter = -1 %}
{% endif %}

{% assign column_counter = column_counter | plus:1 %}
{% assign row_counter = row_counter | plus:1 %}

{% endunless %}
{% endfor %}

<!--        Sometimes the end of the row is when the for loop finishes and before reaching the last column-->
{% if forloop.last and row_counter != 0%}
</div>
{% endif %}
{% endfor %}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        function onVisibilityChange(entries, observer) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    entry.target.classList.add(entry.target.getAttribute('data-animation'));

                    // Add an event listener for the animation end event
                    entry.target.addEventListener('animationend', function () {
                        entry.target.classList.remove(entry.target.getAttribute('data-animation'));
                    });

                    observer.unobserve(entry.target);
                }
            });
        }

        const observer = new IntersectionObserver(onVisibilityChange, {threshold: 0.1});
        document.querySelectorAll('.card').forEach(card => {
            observer.observe(card);
        });
    });
</script>