-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
211 lines (194 loc) · 8.68 KB
/
index.html
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
---
layout: default
footer-main: true
---
<section class="site-intro grid-x cell align-center">
<div class="cell grid-x medium-9 grid-padding-x">
<div class="cell" style="position: relative;">
<svg class="watermark" viewBox="0 0 45 16">
<text x="-1" y="15">Hello</text>
</svg>
</div>
<div class="cell grid-y small-12 medium-shrink emoji-wrapper text-center">
<div class="cell shrink" id="plane-emoji">✈️</div>
<div class="cell shrink" id="world-emoji">🌏 </div>
<div class="cell shrink" id="camera-emoji">📷 </div>
<div class="cell shrink" id="penguin-emoji">🐧</div>
</div>
<div class="cell medium-auto">
<h1>Hi there! I'm Rehan<span class="wave">👋</span></h1>
<p>I am a <span class="rainbow">devzgner</span>, designer + developer, currently creating magic at Walt Disney Animation Studios. Previously worked with organizations like UPMC Enterprises, GE Healthcare, the NBA & the NFL on consumer and enterprise applications.</p>
<p><span id="plane-effect">I love to travel</span>, and have <span id="world-effect">been fortunate enough to have lived all over the world,</span> now bringing the unique aspects of each culture into my work. In my free time, <span id="camera-effect">I enjoy photography</span> and <span id="penguin-effect">creating cute digital illustrations.</span></p>
<a href="/about" onclick="gtag('event', 'Click - Learn more about me', {
'event_category': 'Intro',
'event_label': 'Learn more about me - click'
});">Learn more about me <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</section>
{% assign project_order = site.projects | sort: 'date' | reverse %}
<section class="featured-projects">
{% for project in project_order %}
{% if project.featured == true %}
<div class="cell grid-x grid-padding-x feature-row align-center">
<div class="cell medium-4 grid-x align-middle align-center text-wrapper">
<div class="featured-text cell">
<h2 class="">{{ project.tile-name }}</h2>
<p class="">{{ project.tile-description }}</p>
<div class="explore-wrapper">
{% if project.external-link %}
<a class="explore-button" rel="noopener" href="{{ project.external-link | prepend: site.baseurl }}" target="_blank">Explore<span class="visually-hidden">Opens a new window</span></a>
{% else %}
<a class="explore-button" href="{{ project.url | prepend: site.baseurl }}">Explore</a>
{% endif %}
</div>
</div>
</div>
<div class="medium-7 cell image-wrapper">
{% if project.external-link %}
<a class="" rel="noopener" href="{{ project.external-link | prepend: site.baseurl }}" target="_blank"><span class="visually-hidden">Opens a new window</span>
{% else %}
<a class="" href="{{ project.url | prepend: site.baseurl }}">
{% endif %}
<div class="thumbnail-container-featured">
<img class="thumbnail-image-featured" src="img/thumbnails/{{ project.thumbnail | append: '-featured.jpg' }}" alt="{{ project.tile-name }} Tile">
</div>
</a>
</div>
</div>
{% endif %}
{% endfor %}
<div class="cell grid-x align-center grid-padding-x">
<div class="cell small-12 medium-6 large-4">
<a class="more-button" href="/portfolio">Explore more projects</a>
</div>
</div>
</section>
<section class="cell grid-x featured-resources-speaking grid-padding-x grid-margin-x grid-margin-y">
<div class="cell small-12 medium-6 grid-x resources-container">
<div class="cell">
<h2>Resources</h2>
<p class="section-description">A bunch references you may find useful. Here are a few of my most recent finds.</p>
</div>
{% assign allresources = site.resources | concat: site.articles %}
{% assign resources_sorted = allresources | sort: 'date' | reverse %}
<!-- TODO if no tags then skip -->
<!-- TODO add articles to this page as well.. CONFIRM THIS WORKS -->
{%- for resource in resources_sorted limit:3 -%}
{%- if resource.article == true -%}
{% include article-element.html item=resource %}
{%- else -%}
{% include resource-element.html item=resource %}
{%- endif -%}
{%- endfor -%}
<a class="more-button cell align-self-bottom" href="/resources">More resources</a>
<div class="black-cat">
<img class="head" src="/img/black-cat.svg" alt="Black Cat Illustration">
</div>
<!-- <div class="black-cat-2">
<img class="paws" src="/img/paws.svg" alt="Black Cat Paws">
</div> -->
</div>
<div class="cell small-12 medium-6 grid-x speaking-container">
<div class="cell">
<h2>Speaking</h2>
<p class="section-description">I've been fortunate to speak at many events on design, development and start-ups. I love to share what I know with others and speaking is 1 of the ways I get to do that.</p>
{%- comment -%}
<p class="section-description">Check out one of my recent favorites about working with design systems in a world of new and legacy products. <a href="https://www.youtube.com/watch?v=q5R9hmpvGUo&t=13s" target="_blank" rel="noopener">Watch the talk.</a></p>
{%- endcomment -%}
<p class="section-description section-description-special">Looking for a speaker for your next event? Let's connect!</p>
<div class="speaking-socials">
<div class="email-container" onclick="copyToClipboard('[email protected]',this)">
<i class='fas fa-envelope fa-xs' title='Email'></i>
</div>
<a target="_blank" rel="noopener" href="https://www.linkedin.com/in/rehan-butt/">
<i class="fab fa-linkedin-in fa-xs" title="Linkedin"></i>
<span class="visually-hidden">Opens a new window</span>
</a>
</div>
</div>
{%- comment -%}upcoming speaking events{%- endcomment -%}
<a class="more-button cell align-self-bottom" href="/about#speaking-events">Where I've spoken</a>
</div>
</section>
{%- assign photos_order = site.photography | sort: 'date' | reverse -%}
<section class="photography-preview-container cell grid-x grid-padding-x">
<div class="cell">
<h2>Photography</h2>
</div>
<div class="photo-row grid-x cell">
{%- for photo in photos_order -%}
{%- if photo.featured == true -%}
<div class="cell small-12 medium-4 photo-wrapper">
<div class="photo-tile">
<a class="" href="{{ photo.url | prepend: site.baseurl }}">
<div class="photo-cell">
<img src="img/photography/thumbnails/{{photo.thumbnail}}" alt="{{photo.thumbnail-alt}}">
<p>{{photo.title}}</p>
</div>
</a>
</div>
</div>
{%- endif -%}
{%- endfor -%}
</div>
<div class="cell grid-x align-center">
<div class="cell small-12 medium-6 large-4">
<a class="more-button" href="/photography">Explore more photos</a>
</div>
</div>
</section>
{% assign yir_order = site.year-in-review | sort: 'year' | reverse %}
<section class="year-in-review grid-x grid-padding-x">
<div class="cell yir-header">
<h2>Year in Review <span class="time-travel">a little bit of time travel</span></h2>
<p class="making-of">
Curious what goes into creating my Year in Review? Checkout the
{% include external-link.html css-class="" link="https://making-of-year-in-review.rehanbutt.com" content="Making Of" %}
</p>
</div>
{%- for year in yir_order -%}
{% if year.current == true %}
<div class="cell small-6 medium-4">
<div class="year-container">
<div class="year-square current-year">
<svg class="" viewBox="0 0 83 50">
<text x='-10%' y="75%" textLength="100" lengthAdjust="spacing">{{year.year}}</text>
</svg>
</div>
<div class="yir-label">
{{year.year}} in progress
</div>
</div>
</div>
{% else %}
<div class="cell small-6 medium-4">
<a href="https://{{ year.year | append: ".rehanbutt.com" }}" target="_blank" rel="noopener">
<div class="year-container">
<style>
.year-square-{{year.year}} {
background: {{year.color}};
}
@media (prefers-color-scheme: dark) {
.year-square-{{year.year}} {
background: {{year.color-dark}};
}
}
</style>
<div class="year-square year-square-{{year.year}}">
<div class="overlay">
</div>
<svg class="" viewBox="0 0 83 50">
<text x='-10%' y="75%" textLength="100" lengthAdjust="spacing">{{year.year}}</text>
</svg>
</div>
<div class="yir-label">
{{year.year}} in review
</div>
</div>
<span class="visually-hidden">Opens a new window</span>
</a>
</div>
{% endif %}
{%- endfor -%}
</section>