team.html

---
title:  "Meet the Activiti Team"
# We have this list here for easy manual sorting
team:
  - elias-de-medeiros
  - bassam-al-sarori
  - daisuke-yoshimoto
  - igor-dianov
  - almerico
  - mteodori
  - ffazzini
  - mauriziovitale
  - illia-goncharov
  - MiguelRuizDev
  - fcorti
  - rallegre

---

<div class="bg-green py-6 md:py-8 lg:py-12 xl:py-16">
  <h1 class="text-white text-center">{{ page.title | escape }}</h1>
</div>

<div class="wrap py-4 md:py-8 xl:py-16 text-center flex flex-wrap justify-center">
  {% assign team_collection = site.collections | where: 'label', 'team' | first %}
  {% for slug in page.team %}
    {% assign person = site.team | where: 'slug', slug | first %}
    <div class="w-full max-w-xs md:w-1/2 md:px-2 lg:w-1/3 my-4 md:my-6 block">
      <a href="{{ person.url }}" data-modal="#profile-{{ slug }}" class="block">
        {% assign headshot = team_collection.files | where: "basename", person.slug | first %}
        <div class="inline-block w-2/3 overflow-hidden rounded-full relative">
          {% if headshot %}
            <img class="w-full align-middle" src="/{{ headshot.path | replace_first: '_team', 'team' }}" alt="Picture of {{ person.name | escape }}" />
          {% else %}
            <div class="intrinsic-1x1 bg-grey-light"></div>
          {% endif %}
          {% if person.badge %}
            <div class="bg-green text-white absolute w-full pin-b mb-6 font-bold text-lg badge {{ person.badge | slugify }}">{{ person.badge }}</div>
          {% endif %}
        </div>
        <h2 class="text-green text-xl font-normal">{{ person.name }}</h2>
        <span class="text-grey-darker text-lg">{{ person.role }}</span>
      </a>
      <div id="profile-{{ slug }}" class="hidden modal w-full max-w-md xl:max-w-xl bg-white text-left px-3 py-6 lg:px-6 lg:pb-2 shadow align-middle relative">
          {% include team_profile.html person=person %}
          <div class="absolute pin-r mr-6 pin-b mb-6">
            {% assign prev = forloop.index0 | minus: 1 %}
            {% assign prev_person = site.team | where: 'slug', page.team[prev] | first %}
            <a class="text-grey-darker inline-block w-6 mr-6" href="{{ prev_person.url }}" data-modal="#profile-{{ page.team[prev] }}">{% include svg/nav-prev.svg alt_text="See previous team member" %}</a>
            {% assign next = forloop.index0 | plus: 1 %}
            {% assign next_person = site.team | where: 'slug', page.team[next] | first %}
            <a class="text-grey-darker inline-block w-6" href="{{ next_person.url }}" data-modal="#profile-{{ page.team[next] }}">{% include svg/nav-next.svg alt_text="See next team member" %}</a>
          </div>
      </div>
    </div>
    {% endfor %}
</div>