-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
403 lines (397 loc) · 19.1 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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
/>
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://kris-ellery.com" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👨🏻💻</text></svg>"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Figtree:[email protected]&family=Merriweather&display=swap"
rel="stylesheet"
/>
<link href="/styles/main.css" rel="stylesheet" />
<title>
Kris Ellery - Principal SDE and Front-End & Design Systems Expert
</title>
<meta
name="description"
content="Multidisciplinary professional with over 15 years of experience in design, development, and implementation of websites and web applications."
/>
<meta property="og:type" content="website" />
<meta property="fb:admins" content="2342745" />
<meta property="og:title" content="Kris Ellery" />
<meta
property="og:description"
content="Multidisciplinary professional with over 15 years of experience in design, development, and implementation of websites and web applications."
/>
<meta property="og:site_name" content="Kris Ellery" />
<meta property="og:url" content="https://kris-ellery.com" />
<meta
property="og:image"
content="https://kris-ellery.com/images/avatar.jpg"
/>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@kris_ellery" />
<meta name="twitter:title" content="Kris Ellery" />
<meta
name="twitter:description"
content="Multidisciplinary professional with over 15 years of experience in design, development, and implementation of websites and web applications."
/>
<meta
name="twitter:image"
content="https://kris-ellery.com/images/avatar.jpg"
/>
<meta name="twitter:url" content="https://kris-ellery.com" />
</head>
<body>
<header class="c-header">
<div class="o-wrapper">
<div class="c-header__row">
<div class="c-header__column c-header__column--content">
<h1 class="c-header__title">Kris Ellery</h1>
<p class="c-header__description">
Principal SDE and Front-End & Design Systems Expert • Crafting
Performant Web Applications
</p>
<nav class="c-service-links">
<a
href="https://www.linkedin.com/in/kris-ellery"
target="_blank"
rel="noopener"
rel="noreferrer"
class="c-service-links__item"
data-service="linkedin"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.13 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"
/>
</svg>
<span class="o-screen-reader">LinkedIn</span>
</a>
<a
href="https://github.com/kris-ellery"
target="_blank"
rel="noopener"
rel="noreferrer"
class="c-service-links__item"
data-service="github"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M13 0c-6.626 0-13 5.373-13 13 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.134-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-13-13-13z"
/>
</svg>
<span class="o-screen-reader">GitHub</span>
</a>
<a
href="https://dribbble.com/kris-ellery"
target="_blank"
rel="noopener"
rel="noreferrer"
class="c-service-links__item"
data-service="dribbble"
>
<svg
width="24"
height="24"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M50 0C22.397 0 0 22.397 0 50C0 77.603 22.397 100 50 100C77.5488 100 100 77.603 100 50C100 22.397 77.5488 0 50 0ZM83.026 23.0477C88.9913 30.3145 92.5705 39.5879 92.679 49.6204C91.269 49.3492 77.1692 46.4751 62.961 48.2646C62.6356 47.5597 62.3644 46.8004 62.0391 46.0412C61.1714 43.9805 60.1952 41.8655 59.2191 39.859C74.9458 33.4599 82.1041 24.2408 83.026 23.0477ZM50 7.37527C60.846 7.37527 70.7701 11.4425 78.308 18.1128C77.5488 19.1974 71.0954 27.82 55.9111 33.5141C48.9154 20.6616 41.1605 10.141 39.9675 8.5141C43.167 7.75488 46.5293 7.37527 50 7.37527ZM31.833 11.3883C32.9718 12.9067 40.564 23.4816 47.6681 36.0629C27.7115 41.3774 10.0868 41.269 8.18872 41.269C10.9544 28.0369 19.9024 17.0282 31.833 11.3883ZM7.26681 50.0542C7.26681 49.6204 7.26681 49.1866 7.26681 48.7527C9.11063 48.8069 29.8265 49.0781 51.1388 42.679C52.3861 45.0651 53.5249 47.5054 54.6095 49.9458C54.0672 50.1085 53.4707 50.2712 52.9284 50.4338C30.9111 57.538 19.1974 76.9523 18.2213 78.5792C11.4425 71.0412 7.26681 61.0087 7.26681 50.0542ZM50 92.7332C40.1302 92.7332 31.0195 89.3709 23.8069 83.731C24.5662 82.1584 33.243 65.4555 57.321 57.0499C57.4295 56.9957 57.4837 56.9957 57.5922 56.9414C63.6117 72.5054 66.0521 85.5748 66.7028 89.3167C61.551 91.5401 55.9111 92.7332 50 92.7332ZM73.807 85.4122C73.3731 82.8091 71.0955 70.3362 65.5098 54.9892C78.9046 52.8742 90.6182 56.3449 92.0824 56.833C90.2386 68.7093 83.4056 78.9588 73.807 85.4122Z"
/>
</svg>
<span class="o-screen-reader">Dribbble</span>
</a>
<a
href="http://codepen.io/kris-ellery/"
target="_blank"
rel="noopener"
rel="noreferrer"
class="c-service-links__item"
data-service="codepen"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="m.455 16.513 10.969 7.314c.374.23.774.233 1.152 0l10.969-7.314c.281-.187.455-.522.455-.857v-7.313c0-.335-.174-.67-.455-.857l-10.969-7.313c-.374-.23-.774-.232-1.152 0l-10.969 7.313c-.281.187-.455.522-.455.857v7.313c0 .335.174.67.455.857zm10.514 4.528-8.076-5.384 3.603-2.411 4.473 2.987zm2.062 0v-4.808l4.473-2.987 3.603 2.411zm8.907-7.314-2.585-1.727 2.585-1.728zm-8.907-10.767 8.076 5.384-3.603 2.411-4.473-2.987zm-1.031 6.602 3.643 2.438-3.643 2.438-3.643-2.438zm-1.031-6.602v4.808l-4.473 2.987-3.603-2.411zm-8.906 7.314v-.001l2.585 1.728-2.585 1.728z"
/>
</svg>
<span class="o-screen-reader">CodePen</span>
</a>
<a
href="https://twitter.com/kris_ellery"
target="_blank"
rel="noopener"
rel="noreferrer"
class="c-service-links__item"
data-service="twitter"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.013-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 013.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 013 18.407a11.616 11.616 0 006.29 1.84"
/>
</svg>
<span class="o-screen-reader">Twitter</span>
</a>
</nav>
</div>
<div class="c-header__column c-header__column--avatar">
<img
src="/images/avatar.png"
alt="Profile picture"
class="c-header__avatar"
/>
</div>
</div>
</div>
</header>
<main>
<section class="c-career">
<div class="o-wrapper">
<div class="c-career__intro">
<h2 class="c-career__title">Career</h2>
<p class="c-career__description">
Multidisciplinary professional with over 15 years of experience in
design, development, and implementation of websites and web
applications.
</p>
<a
href="/kris-ellery-resume.pdf"
class="c-button"
target="_blank"
rel="noopener"
rel="noreferrer"
>Download Resume</a
>
</div>
<div class="c-job">
<h3 class="c-job__title">
Principal Software Development Engineer at Zillow
</h3>
<p class="c-job__meta">Dallas, TX • May 2021 - Present</p>
<p class="c-job__description">
As the most-visited real estate website in the United States,
<a
href="https://www.zillow.com"
target="_blank"
rel="noopener"
rel="noreferrer"
>Zillow</a
>
offers customers an on-demand experience for selling, buying,
renting and financing with transparency and nearly seamless
end-to-end service.
</p>
<p class="c-job__description">
As the technical lead on the Design Systems team at Zillow, I
spearheaded the development and enhancement of our next-generation
internal UI library using React.js, TypeScript, Panda CSS,
Floating UI, PNPM, Turborepo, Vitest, Cypress, etc. Additionally,
my role was pivotal in advancing Zillow's web performance,
specifically targeting and improving Interaction to Next Paint
(INP) scores.
</p>
<blockquote class="c-quote">
<p class="c-quote__text"></p>
<cite class="c-quote__cite">
<span></span>
</cite>
</blockquote>
</div>
<div class="c-job">
<h3 class="c-job__title">Senior JavaScript Engineer at Cofense</h3>
<p class="c-job__meta">Dallas, TX • Sep 2017 - May 2021</p>
<p class="c-job__description">
<a
href="https://www.cofense.com"
target="_blank"
rel="noopener"
rel="noreferrer"
>Cofense</a
>
empowers people to recognize phishing attacks and stop them in
minutes, not days. Their end-to-end phishing defense solution
combines cutting-edge technology with collective human
intelligence to protect organizations from inbox to SOC.
</p>
<p class="c-job__description">
As the lead engineer on the PhishMe and ThreatHQ products, I built
single-page Jamstack applications with Vue.js and TypeScript. I
managed an internal Design System with over 60 handcrafted
components, packaged with Rollup.js, and deployed to a private NPM
registry in Artifactory. My contributions were pivotal in
improving phishing defense solutions.
</p>
<blockquote class="c-quote">
<p class="c-quote__text"></p>
<cite class="c-quote__cite">
<span></span>
</cite>
</blockquote>
</div>
<div class="c-job">
<h3 class="c-job__title">
Senior Interactive Developer at Hawkeye
</h3>
<p class="c-job__meta">
Charlotte, NC and Dallas, TX • Nov 2013 - Aug 2017
</p>
<p class="c-job__description">
<a
href="https://www.hawkeyeagency.com/"
target="_blank"
rel="noopener"
rel="noreferrer"
>Hawkeye</a
>
is an advertising agency specializing in extraordinary ideas by
leveraging data, creativity, and technology. Owned by Publicis
Groupe and Epsilon, Hawkeye delivers top-notch solutions for
domestic and international brands.
</p>
<p class="c-job__description">
At Hawkeye, I focused on high-performance, data-driven web
development. I led the UI engineering for the Magnolia CXM, an
internal suite of business applications built with Ember.js. My
work earned WebAwards for Outstanding Achievement in Web
Development in
<a
href="http://www.webaward.org/winner/30010/publicis-hawkeye-wins-2014-webaward-for-thrivent-web-design.html"
target="_blank"
rel="noopener"
rel="noreferrer"
>2014</a
>
and
<a
href="http://www.webaward.org/winner/32313/publicis-hawkeye--wins-2015-webaward-for-quadgraphics-website.html"
target="_blank"
rel="noopener"
rel="noreferrer"
>2015</a
>, reflecting my commitment to delivering top-notch solutions.
</p>
<blockquote class="c-quote">
<p class="c-quote__text"></p>
<cite class="c-quote__cite">
<span></span>
</cite>
</blockquote>
</div>
<div class="c-job">
<h3 class="c-job__title">
Web Designer & Developer at Red Ventures
</h3>
<p class="c-job__meta">Fort Mill, SC • Apr 2013 - Nov 2013</p>
<p class="c-job__description">
<a
href="https://redventures.com/"
target="_blank"
rel="noopener"
rel="noreferrer"
>Red Ventures</a
>
is a portfolio of brands and digital platforms that improves every
aspect of the consumer journey, helping people make better
decisions while unleashing transformative growth for their
businesses and partners.
</p>
<p class="c-job__description">
At Red Ventures, I designed and developed several internal R&D
products, including Articulate, ShadowBoard, and Tagular. I also
created various websites and A/B split tests for Insurance and
Energy business clusters. My hackathon project, an interactive map
for HBO's Game of Thrones, was featured in a Time
<a
href="https://techland.time.com/2013/04/03/follow-the-kings-roadmap-game-of-thrones-web-app-rules/"
target="_blank"
rel="noopener"
rel="noreferrer"
>article</a
>, showcasing my ability to blend creativity with technical
expertise.
</p>
<blockquote class="c-quote">
<p class="c-quote__text">
"Kris continually delivers projects in a timely fashion that
meet or exceed set requirements. It is well known that he
produce some of the best front-end code within the organization.
He is willing and open to using new technologies or developing
new techniques for pushing innovation in our projects. Kris uses
his knowledge of UI design approaches and techniques to ensure
our projects are both beautiful visually, but make logical sense
from a user interface and flow perspective."
</p>
<cite class="c-quote__cite">
John Sutton
<span
>Sr. Vice President for Digital Strategy at Red Ventures</span
>
</cite>
</blockquote>
</div>
<div class="c-job">
<h3 class="c-job__title">
Information Technologist at Michigan State University
</h3>
<p class="c-job__meta">East Lansing, MI • May 2009 - Apr 2013</p>
<p class="c-job__description">
<a
href="https://advancement.msu.edu/"
target="_blank"
rel="noopener"
rel="noreferrer"
>University Advancement</a
>
supports Michigan State University in terms of money and advocacy
by delivering an integrated program of communications, marketing,
and engagement.
</p>
<p class="c-job__description">
I designed and developed a range of websites and web applications
for MSU's students, donors, and alumni. Utilizing jQuery,
ColdFusion, MSSQL, and Authorize.net, I engineered scalable
solutions like the Online Giving and Event Registration platforms.
My work received recognition at the CASE conference for higher
education and was featured in University Business articles,
highlighting my impact on the university's digital strategy.
</p>
<blockquote class="c-quote">
<p class="c-quote__text">
"Kris has made exceptional contributions toward leading our
design and UI development on all our public facing websites. I
admire his tenacity and "let's get it done" type of attitude."
</p>
<cite class="c-quote__cite">
Randy Brown
<span
>Director of Web Services at Michigan State University</span
>
</cite>
</blockquote>
</div>
</div>
</section>
</main>
<footer class="c-footer">
<div class="o-wrapper">
<p class="c-footer__copyright">
2024 © Kris Ellery. All rights reserved.
</p>
</div>
</footer>
</body>
</html>