Tampa Devs

Team Members

For the team members section, I created a custom data file for people that included the person's name, title, bio, image, and href. I then created a custom Nunjucks filter to sort the people by order. I used the filter to sort the people in the order they should be displayed on the page and then looped through the people to display their information on the page.

<div class="td-about-team-wrapper">
  {% for person in people | sort(false, false, 'order') %}
    {% if person.team.indexOf("Organizers") > -1 %}
      <div class="td-about-person">
        <div class="image-container">
          <img
            src="/_assets/img/people/{{ person.img if person.img else "no-avatar.jpg" }}"
            alt="{{ person.name }}"
            class="person__image"
          >
        </div>
        <h3 class="person-name">
          {% if person.href %}
            <a href="{{ person.href.url }}"
               target="_blank"
               rel="noreferrer noopener"
            >
              {{ person.name }}
            </a>
          {% else %}
            {{ person.name }}
          {% endif %}
        </h3>
        <strong class="person-title">
          {{ person.title }}
        </strong>
        <p class="person-bio">
          {{ person.bio }}
        </p>
        {% if person.href %}
          <a class="btn"
             href={{ person.href.url }}
             target="_blank"
             rel="noreferrer noopener"
          >
            View {{ person.href.type }}
          </a>
        {% endif %}
      </div>
    {% endif %}
  {% endfor %}
</div>

Sponsors

One of the challenges I faced was creating a marque effect for the sponsors section. I wanted to have the logos scroll horizontally across the screen and stop when hovered without the use of any third-party libraries. To achieve this I used CSS animations but also had to use two duplicate containers to create a seamless loop effect. I took that into consideratation when developing that section of the page template.

Similarly to the team members section, I created a custom data file for sponsors that included the sponsor's name, logo, and href. I then looped through the sponsors to display their logos on the page. The loop it self, as mentioned before, is duplicated to create the marquee effect.

<div class="td-about-sponsor__wrapper">
  <div class="marquee">
    {% for sponsor in sponsors | sort(false, false, 'name') %}
      <a href="{{sponsor.href}}" class="sponsor" target="_blank" rel=”noopener noreferrer”>
        <img src="/_assets/misc/sponsors/{{sponsor.logo}}" alt=""/>
      </a>
    {% endfor %}
  </div>
  <div class="marquee">
    {% for sponsor in sponsors | sort(false, false, 'name') %}
      <a href="{{sponsor.href}}" class="sponsor" target="_blank" >
        <img src="/_assets/misc/sponsors/{{sponsor.logo}}" alt=""/>
      </a>
    {% endfor %}
  </div>
</div>

The maquee style is setup to animate the logos acrossed continously. Whenever the user hovers over the marquee, the animation is paused by changing the animation-play-state property to paused.

_about.scss

.td-about {
  &-sponsor__wrapper {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    .marquee {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: baseline;
      animation: marquee 25s linear infinite;
    }
    &:hover .marquee {
      animation-play-state: paused;
    }
  }
}

marquee.scss

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}