rehanbutt.com/speaking.html at gh-pages · naher94/rehanbutt.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
---
layout: default
title: "Speaking"
og-image: speaking.jpg
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" %}

    {% assign prev_index = forloop.index0 | minus: 1 %}
    {% assign next_index = forloop.index0 | plus: 1 %}
    {% assign prev_event = event_order[prev_index] %}
    {% assign next_event = event_order[next_index] %}

    {%- 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 -%}
      {%- comment -%}
        Only open the section if this is the first in a series of non-featured events
        (either the first event overall, or the previous event is featured)
      {%- endcomment -%}
      {%- if forloop.first or prev_event.featured == true -%}
        <section class="speaking-events cell medium-8">
      {%- endif -%}

      <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>

      {%- comment -%}
        Only close the section if this is the last in a series of non-featured events
        (either the last event overall, or the next event is featured)
      {%- endcomment -%}
      {%- if forloop.last or next_event.featured == true -%}
        </section>
      {%- endif -%}
    {%- 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>