speaking.html

---
layout: default
title: "Speaking"
permalink: speaking

header-visibility: show
header-sort-order: 3

footer-section: main
footer-sort-order: 3
---

<div class="speaking-page grid-x align-center cell">
    <div class="speaking-intro cell medium-8">
      <h1>Speaking</h1>
      <p>I've had the privilege of speaking at various events on design, development, and product, sharing my knowledge and experiences with others. Whether at schools or conferences, I'm passionate about discussing design and technology.</p>
      <p>I'm always eager for new opportunities to share insights and inspire conversations. Planning an event? Let's connect!</p>
      <div class="grid-x cta-container">
          <div class="email-wrapper cta-button cell shrink" onclick="copyToClipboard('me@rehanbutt.com',this)">
            <i class="fa-solid fa-envelope"></i> Email Me
          </div>
          {% include external-link.html css-class="cta-button cell shrink" link="https://www.linkedin.com/in/rehan-butt/" content="<i class='fa-brands fa-linkedin'></i> Message Me" %}
      </div>
    </div>
    
    <section class="speaking-events-intro cell medium-8" id="speaking-events">
      <div class="cell grid-x align-middle">
        <h2 class="cell small-12 medium-shrink">Speaking Events</h2>
        <div class="cell small-12 medium-auto divider"></div>
      </div>
    </section>

    {% assign event_order = site.speaking | sort: 'date' | reverse %}
    {% for event in event_order %}
    {% assign current_date = 'now' | date: "%s" %}
    {% assign event_date = event.date | date: "%s" %}

    {%- if event.featured == true -%}
      <div class="speaking-item-hero" id="{{event.featured-id}}">
        <div class="top-images cell">
          <img class="top-square-img" src="../img/speaking-events/{{event.featured-id}}/{{event.image-top-square}}" alt="{{event.image-top-square-alt}}">
          <img class="top-img" src="../img/speaking-events/{{event.featured-id}}/{{event.image-top}}" alt="{{event.image-top-alt}}">
        </div>
        <div class="main-content cell grid-x align-middle align-center">
          <div class="logo-wrapper cell shrink">
            <img class="brand-logo" src="/img/{{event.logo}}-logo.svg" alt="{{event.logo}} Logo">
          </div>
          <div class="text-wrapper cell medium-8">
            {% if event.link %}
            <a href="{{event.link}}" target="_blank" rel="noopener">
            {% endif %}
              <div>
                <h3>
                  {{event.title}}
                  {% if event.link %}
                    <i class="fas fa-link"></i>
                  {% endif %}
                </h3>
                {% if event_date > current_date %}
                  <span>Upcoming</span>
                {% endif %}
              </div>
              <p class="date">{{event.date| date: "%B %Y" }}
                {% if event.location %}
                ・ {{event.location}}
                {% endif %}
              </p>
              <p class="description">{{event.description}}</p>
            {% if event.link %}
              </a>
            {% endif %}
          </div>
        </div>
        <div class="bottom-images cell">
          <img class="bottom-img" src="../img/speaking-events/{{event.featured-id}}/{{event.image-bottom}}" alt="{{event.image-bottom-alt}}">
        </div>
      </div>
    {%- else -%}
    <section class="speaking-events cell medium-8">
      {% if event.featured != true %}
      <div class="speaking-item {% if event_date > current_date %}future-event{% endif %}">
        {% if event.logo %}
        <div class="brand-logo-container" id="{{event.logo}}">
          <img class="brand-logo" src="/img/{{event.logo}}-logo.svg" alt="{{event.logo}} Logo">
        </div>
        {% endif %}
        {% if event.link %}
          <a href="{{event.link}}" target="_blank" rel="noopener">
        {% endif %}
        <div>
          <h3>
            {{event.title}}
            {% if event.link %}
              <i class="fas fa-link"></i>
            {% endif %}
          </h3>
          {% if event_date > current_date %}
            <span>Upcoming</span>
          {% endif %}
        </div>
        <p class="date">{{event.date| date: "%B %Y" }}
          {% if event.location %}
          ・ {{event.location}}
          {% endif %}
        </p>
        <p class="description">{{event.description}}</p>
        {% if event.link %}
          </a>
        {% endif %}
      </div>
      {% endif %}
    </section>
    {%- endif -%}
    {% endfor %}

    <section class="grid-x cell cta-bar-wrapper">
      <div class="cta-bar cell grid-x align-justify">
        <div class="cell grid-x medium-shrink text-area">
          <p class="cell text-main">Looks like you're a fan of speaking events. So am I!</p>
          <p class="cell text-secondary">Got one coming up? Let's make it happen.</p>
        </div>
        <div class="cell grid-x medium-shrink align-middle">
          <div class="email-wrapper cta-button cell medium-shrink" onclick="copyToClipboard('me@rehanbutt.com',this)">
            <i class="fa-solid fa-envelope"></i> Email Me
          </div>
        </div>
      </div>
    </section>
    {%- comment -%}
    <!-- //////////////////////// -->
    <!-- Insert new sections here -->
    <!-- //////////////////////// -->
    {%- endcomment -%}
</div>