-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
305 lines (271 loc) · 17.9 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.getElementsByTagName("html")[0].className += " js";</script>
<link rel="stylesheet" href="main/assets/css/style.css">
<title>Andrew Himmer</title>
</head>
<body>
<nav class="padding-y-sm">
<div class="container">
<div class="ld-switch js-adv-select js-ld-switch">
<select name="select-color-theme" id="select-color-theme">
<optgroup label="Appearance">
<option value="0" data-option-theme="default" data-option-theme-preview="select-color-theme-light.svg">Light</option>
<option value="1" data-option-theme="dark" data-option-theme-preview="select-color-theme-dark.svg">Dark</option>
<option value="2" data-option-theme-preview="select-color-theme-system.svg">System</option>
</optgroup>
</select>
<button class="reset ld-switch-btn is-hidden js-adv-select__control" aria-controls="color-theme-popover" aria-haspopup="listbox">
<span class="sr-only js-adv-select__value"></span>
<div class="ld-switch-btn__icon-wrapper ld-switch-btn__icon-wrapper--in js-ld-switch-icon" aria-hidden="true">
<svg class="icon ld-switch-btn__icon" viewBox="0 0 20 20">
<title>light</title>
<g fill="currentColor">
<circle cx="10" cy="10" r="4" fill-opacity=".2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 1v1.5"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.364 3.636l-1.061 1.061"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 10h-1.5"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.364 16.364l-1.061-1.061"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19v-1.5"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.636 16.364l1.061-1.061"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 10h1.5"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.636 3.636l1.061 1.061"></path>
</g>
</svg>
</div>
<div class="ld-switch-btn__icon-wrapper js-ld-switch-icon" aria-hidden="true">
<svg class="icon ld-switch-btn__icon" viewBox="0 0 20 20">
<title>dark</title>
<g fill="currentColor">
<path d="M11.964 3.284c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036a7 7 0 1 0 8.68-8.68z" fill-opacity=".2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
<path d="M7 4a.979.979 0 0 1-1-1 1 1 0 0 0-2 0 .979.979 0 0 1-1 1 1 1 0 0 0 0 2 .979.979 0 0 1 1 1 1 1 0 0 0 2 0 .979.979 0 0 1 1-1 1 1 0 0 0 0-2z"></path>
</g>
</svg>
</div>
<div class="ld-switch-btn__icon-wrapper js-ld-switch-icon" aria-hidden="true">
<svg class="icon ld-switch-btn__icon" viewBox="0 0 20 20">
<title>light-auto</title>
<g fill="currentColor">
<path d="M10 14a4 4 0 1 1 3.465-6" fill-opacity=".2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18l2.5-7h1l2.5 7"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.714 16h4.572"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 1v1.5"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.364 3.636l-1.061 1.061"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.636 16.364l1.061-1.061"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 10h1.5"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.636 3.636l1.061 1.061"></path>
</g>
</svg>
</div>
<div class="ld-switch-btn__icon-wrapper js-ld-switch-icon" aria-hidden="true">
<svg class="icon ld-switch-btn__icon" viewBox="0 0 20 20">
<title>dark-auto</title>
<g fill="currentColor">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18l2.5-7h1l2.5 7"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.714 16h4.572"></path>
<path d="M12.146 10.159A2.5 2.5 0 0 1 14.5 8.5h1a2.5 2.5 0 0 1 1.412.441 7 7 0 0 0-4.948-5.657c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036a6.99 6.99 0 0 0 6.427 5.012z" fill-opacity=".2"></path>
<path d="M16.71 8a7.015 7.015 0 0 0-4.746-4.716c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036A7.006 7.006 0 0 0 9 16.929" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
<path d="M7 4a.979.979 0 0 1-1-1 1 1 0 0 0-2 0 .979.979 0 0 1-1 1 1 1 0 0 0 0 2 .979.979 0 0 1 1 1 1 1 0 0 0 2 0 .979.979 0 0 1 1-1 1 1 0 0 0 0-2z"></path>
</g>
</svg>
</div>
</button>
</div>
<div id="color-theme-popover" class="popover ld-switch-popover bg-light padding-x-xs padding-bottom-xs padding-top-xxxs radius-md inner-glow shadow-md is-hidden js-popover js-adv-select-popover js-tab-focus" role="listbox">
<div class="flex flex-wrap justify-between" role="group" describedby="select-color-theme-optgroup-label">
<div class="width-100% margin-bottom-xs" id="select-color-theme-optgroup-label">
<span class="text-xs color-contrast-medium">{optgroup-label}</span>
</div>
<div class="ld-switch-popover__option" role="option">
<figure class="radius-md inner-glow">
<img class="block radius-inherit" src="/media/{option-theme-preview}" alt="Theme preview">
</figure>
<div class="text-xs margin-top-xxxs padding-x-xxxxs">{option-label}</div>
</div>
</div>
</div>
</div>
</nav>
<main>
<header class="position-relative z-index-1">
<div class="container padding-y-lg padding-y-xxl@md max-width-adaptive-md position-relative z-index-2">
<div class="grid gap-lg justify-center">
<div class="col-12 col-content@md">
<div class="text-component">
<h1 class="margin-bottom-sm text-xxxxl">I'm Andrew</h1>
<p class="margin-bottom-lg font-semibold">A humble UI developer and designer.</p>
</div>
</div>
<div class="col">
<div class="pie-chart flex flex-column gap-sm gap-md@sm flex-row@xs items-center js-pie-chart"
data-pie-chart-type="donut">
<div class="flex-shrink-0 ">
<div class="pie-chart__area js-pie-chart__area">
<!-- svg will be created here using javascript -->
<!-- tooltip element -->
<div class="pie-chart__tooltip is-hidden js-pie-chart__tooltip"></div>
</div>
</div>
<div>
<ul class="grid gap-sm">
<li class="flex items-center">
<span class="circle padding-xs bg-primary-dark margin-right-xxs" aria-hidden="true">
<svg class="icon icon--sm fill-current color-white" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512">
<path
d="M414.8 40.79L286.8 488.8C281.9 505.8 264.2 515.6 247.2 510.8C230.2 505.9 220.4 488.2 225.2 471.2L353.2 23.21C358.1 6.216 375.8-3.624 392.8 1.232C409.8 6.087 419.6 23.8 414.8 40.79H414.8zM518.6 121.4L630.6 233.4C643.1 245.9 643.1 266.1 630.6 278.6L518.6 390.6C506.1 403.1 485.9 403.1 473.4 390.6C460.9 378.1 460.9 357.9 473.4 345.4L562.7 256L473.4 166.6C460.9 154.1 460.9 133.9 473.4 121.4C485.9 108.9 506.1 108.9 518.6 121.4V121.4zM166.6 166.6L77.25 256L166.6 345.4C179.1 357.9 179.1 378.1 166.6 390.6C154.1 403.1 133.9 403.1 121.4 390.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4L121.4 121.4C133.9 108.9 154.1 108.9 166.6 121.4C179.1 133.9 179.1 154.1 166.6 166.6V166.6z" />
</svg>
</span>
<span><i class="js-pie-chart__value" data-pie-chart-style="fill: var(--color-primary-dark);">70%</i>
Front end web developer</span>
</li>
<li class="flex items-center">
<span class="circle padding-xs bg-primary-light margin-right-xxs" aria-hidden="true">
<svg class="icon icon--sm fill-current color-white" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512">
<path
d="M224 263.3C224.2 233.3 238.4 205.2 262.4 187.2L499.1 9.605C517.7-4.353 543.6-2.965 560.7 12.9C577.7 28.76 580.8 54.54 568.2 74.07L406.5 324.1C391.3 347.7 366.6 363.2 339.3 367.1L224 263.3zM320 400C320 461.9 269.9 512 208 512H64C46.33 512 32 497.7 32 480C32 462.3 46.33 448 64 448H68.81C86.44 448 98.4 429.1 96.59 411.6C96.2 407.8 96 403.9 96 400C96 339.6 143.9 290.3 203.7 288.1L319.8 392.5C319.9 394.1 320 397.5 320 400V400z" />
</svg>
</span>
<span><i class="js-pie-chart__value" data-pie-chart-style="fill: var(--color-primary-light);">30%</i>
UI Designer</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="position-relative z-index-1 overflow-hidden padding-y-xl bg-dark">
<div class="margin-bottom-lg">
<h1 class="text-center">My experience</h1>
</div>
<div class="container max-width-adaptive-lg">
<div class="v-timeline js-v-timeline" data-animation="on">
<section class="v-timeline__section js-v-timeline__section">
<div class="v-timeline__marker bg-contrast-high border border-3 border-bg-dark" aria-hidden="true"></div>
<div class="v-timeline__items-group">
<div class="v-timeline__item bg-light padding-md radius-md shadow-xs">
<div class="v-timeline__date margin-bottom-sm">
<time class="v-timeline__date-value" datetime="2019-03-18T00:00">2019</time>
</div>
<div class="text-component">
<h2 class="text-lg">Front End Web Developer</h2>
<h3 class="text-md color-contrast-medium">Aquasana</h3>
<p class="color-contrast-medium">Austin, TX</p>
<ul class="list list--ul">
<li>Responsible for UI/UX of aquasana.com (and other domains).</li>
<li>Guided the marketing web team to adopt modern practices such as version control and implement a front end UI framework.</li>
<li>Redesigned and helped migrate the site to new ecommerce platform (SFCC).</li>
</ul>
</div>
</div>
</div>
</section>
<section class="v-timeline__section js-v-timeline__section">
<div class="v-timeline__marker bg-contrast-high border border-3 border-bg-dark" aria-hidden="true"></div>
<div class="v-timeline__items-group">
<div class="v-timeline__item bg-light padding-md radius-md shadow-xs">
<div class="v-timeline__date margin-bottom-sm">
<time class="v-timeline__date-value" datetime="2016-03-26T00:00">2016</time>
</div>
<div class="text-component">
<h2 class="text-lg">Front End Web Developer</h2>
<h3 class="text-md color-contrast-medium">Bazaarvoice</h3>
<p class="color-contrast-medium">Austin, TX</p>
<ul class="list list--ul">
<li>Responsible for UI/UX of bazaarvoice.com. This included publishing all content and media for marketing and sales initiatives.</li>
<li>Implemented 3rd party plugin's and consumed RESTful API's.</li>
<li>Served as Atlassian Administrator for JIRA & Confluence company-wide.</li>
</ul>
</div>
</div>
</div>
</section>
<section class="v-timeline__section js-v-timeline__section">
<div class="v-timeline__marker bg-contrast-high border border-3 border-bg-dark" aria-hidden="true"></div>
<div class="v-timeline__items-group">
<div class="v-timeline__item bg-light padding-md radius-md shadow-xs">
<div class="v-timeline__date margin-bottom-sm">
<time class="v-timeline__date-value" datetime="2014-05-17T00:00">2014</time>
</div>
<div class="text-component">
<h2 class="text-lg">Web Developer / Implementation Engineer</h2>
<h3 class="text-md color-contrast-medium">Bazaarvoice</h3>
<p class="color-contrast-medium">Austin, TX</p>
<ul class="list list--ul">
<li>Implemented ratings and review and other SAAS products on client websites.</li>
<li>Subject matter expert on several products and services.</li>
</ul>
</div>
</div>
</div>
</section>
<section class="v-timeline__section js-v-timeline__section">
<div class="v-timeline__marker bg-contrast-high border border-3 border-bg-dark" aria-hidden="true"></div>
<div class="v-timeline__items-group">
<div class="v-timeline__item bg-light padding-md radius-md shadow-xs">
<div class="v-timeline__date margin-bottom-sm">
<time class="v-timeline__date-value" datetime="2012-04-08T00:00">2012</time>
</div>
<div class="text-component">
<h2 class="text-lg">Front End Web Developer</h2>
<h3 class="text-md color-contrast-medium">Daz 3D</h3>
<p class="color-contrast-medium">Salt Lake City, UT</p>
<ul class="list list--ul">
<li>Served as the lead UI/UX developer for the ecommerce portion of the magento website.</li>
<li>Developed and established new Front End Style Guide and web practices for the ecommerce marketing team.</li>
</ul>
<figure class="text-component__block">
<img src="../../../app/assets/img/vertical-timeline-img-1.jpg" alt="Image description">
</figure>
</div>
</div>
</div>
</section>
<section class="v-timeline__section js-v-timeline__section">
<div class="v-timeline__marker bg-contrast-high border border-3 border-bg-dark" aria-hidden="true"></div>
<div class="v-timeline__items-group">
<div class="v-timeline__item bg-light padding-md radius-md shadow-xs">
<div class="v-timeline__date margin-bottom-sm">
<time class="v-timeline__date-value" datetime="2012-05-17T00:00">2008 - 2012</time>
</div>
<div class="text-component">
<h2 class="text-lg">Bacherlors of Science, Business Management</h2>
<h3 class="text-md color-contrast-medium">Brigham Young University — Idaho</h3>
<p class="color-contrast-medium">Rexburg, ID</p>
<p>Received a hybrid minor in Web Development & Marketing.</p>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</main>
<footer>
<div class="container max-width-sm padding-y-lg text-center">
<div class="row">
<div class="col">
<object type="image/svg+xml" data="/media/logo-ah.svg" class="margin-y-sm width-xl fill-current" />AH</object>
</div>
<div class="col">
<p class="font-bold">Andrew Himmer</p>
<p class="color-contrast-low">front end developer-designer</p>
</div>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container max-width-lg padding-y-sm text-center color-contrast-low">
© 2023 All Rights Reserved.
</div>
</div>
</footer>
<script src="main/assets/js/scripts.js"></script>
</body>
</html>