-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
485 lines (448 loc) · 37 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
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
<script src="index.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<body>
<div class="page" id="home">
<div id="my-name">
<div class="name white" id="henry">Henry</div>
<div id="underscore"></div>
<div class="name white" id="white">White</div>
</div>
<div id="media">
<button class="media-button" id="github">
<img src="assets/github-icon.svg" id="github-icon" class="media-icon"
onclick="window.open('https://github.com/Henry-Turtle/', '_BLANK')">
</button>
<button class ="media-button" id = "resume">
<img src = "assets/resume_icon.svg" id = "resume-icon" class = "media-icon"
onclick="window.open('./assets/Henry_White_Resume.pdf')">
</button>
<button class="media-button" id="discord"
onclick="window.open('https://discordapp.com/users/371803629130219530', '_BLANK')">
<img src="assets/discord-icon.svg" id="discord-icon" class="media-icon">
</button>
<button class="media-button" id="instagram">
<img src="assets/instagram-icon.svg" id="instagram-icon" class="media-icon"
onclick="window.open('https://www.instagram.com/its_henry_white/', '_BLANK')">
</button>
</div>
<div id="about-me-button" class="section-button" onclick="document.getElementById('about-me').scrollIntoView()">
<!--TODO: Change all such occurances to make sure animation plays first-->
<div id="about-me-container">
<h2 class="noselect">About Me</h2>
<svg viewBox="0 0 227 170" fill="none" xmlns="http://www.w3.org/2000/svg" id="portrait">
<g id="Henry">
<g id="hand">
<path
d="M73.5 169.5C65.0378 146.059 59.867 135.584 48 133.5C52.7845 140.164 51.2063 143.463 45 149C34.3893 150.718 31.6222 149.091 30 143.5C24.6136 149.86 25.1185 155.909 30 169.5H73.5Z"
fill="#A259FF" />
<path
d="M45 149C51.2063 143.463 52.7845 140.164 48 133.5L45.4171 130C46.146 129.016 46.9642 127.752 48 126V109C49.4884 103.235 48.4314 101.881 45 101C42.2393 101.328 40.306 103.987 36.5 111C31.0627 105.067 28.249 100.515 23.5 91C21.6105 87.964 20.1839 86.9854 17 86.5C14.5039 88.4896 13.9635 90.2142 14 94C12.0953 90.5076 10.6845 89.8231 7.5 91C4.46989 94.5022 6.40625 97.6521 7.5 102.5C5.3951 100.285 4.17864 100.415 2 101C1.06507 102.035 1.03989 103.762 2 109C2.96011 114.238 17 133.5 17 133.5L27 139L30 143.5C31.6222 149.091 34.3893 150.718 45 149Z"
fill="#EDCCC3" />
<path
d="M48 133.5C59.867 135.584 65.0378 146.059 73.5 169.5H30C25.1185 155.909 24.6136 149.86 30 143.5M48 133.5C52.7845 140.164 51.2063 143.463 45 149C34.3893 150.718 31.6222 149.091 30 143.5M48 133.5L45.4171 130M30 143.5L27 139M27 139L17 133.5C17 133.5 2.96011 114.238 2 109C1.03989 103.762 1.06507 102.035 2 101C4.17864 100.415 5.3951 100.285 7.5 102.5M27 139H32M7.5 102.5C6.40625 97.6521 4.46989 94.5022 7.5 91C10.6845 89.8231 12.0953 90.5076 14 94M7.5 102.5C11.8714 109.562 14.2828 112.808 18.5 117.5M14 94C13.9635 90.2142 14.5039 88.4896 17 86.5C20.1839 86.9854 21.6105 87.964 23.5 91C28.249 100.515 31.0627 105.067 36.5 111M14 94C18.9272 102.843 21.7676 106.931 27 112.5M36.5 111C40.306 103.987 42.2393 101.328 45 101C48.4314 101.881 49.4884 103.235 48 109V126C46.9642 127.752 46.146 129.016 45.4171 130M36.5 111V114.5M42 133.5C43.274 132.471 44.2265 131.608 45.4171 130M34.5 126.5C32.1041 125.703 32.55 124.248 34.5 121"
stroke="black" />
</g>
<g id="body">
<path
d="M114.284 2L112.777 11C112.777 11 108.152 11.6584 105.439 15L108.784 22.5C108.784 22.5 105.417 25.7501 104.784 28.5C104.168 31.1776 105.337 36.1472 105.929 37.5481C106.451 35.4684 107.284 32 107.284 32C107.284 32 122.744 33.6171 129.784 28C136.464 22.6703 149.784 24 149.784 24C147.667 25.7884 148.499 33.4821 150.784 34C155.399 35.046 156.603 32.3925 160.23 35.5C163.517 38.3159 166.372 46.5957 166.372 46.5957C166.553 44.6945 167.188 42.6391 167.284 41C167.099 38.8133 167.284 35.5 167.284 35.5C170.242 29.4232 166.832 22.6848 161.784 18.5C159.521 16.6239 158.6 17.7864 154.849 16.9984C153.593 11.8916 150.99 8.9101 145.284 7.5C131.592 7.16288 124.804 6.69535 114.284 2Z"
fill="#FFE74C" />
<path
d="M112.777 73.1832C112.777 73.1832 119.625 82.5633 127.942 84.7212C144.949 83.9776 152.326 82.3708 160.23 71C162.027 68.199 164.642 65.7159 165.184 62.5C165.389 61.2815 165.532 59.975 165.65 58.5C165.886 55.5655 165.951 51.0126 166.372 46.5957C166.372 46.5957 163.517 38.3159 160.23 35.5C156.603 32.3925 155.399 35.046 150.784 34C148.499 33.4821 147.667 25.7884 149.784 24C149.784 24 136.464 22.6703 129.784 28C122.744 33.6171 107.284 32 107.284 32C106.997 33.2867 106.369 36.386 106.157 38.0677C105.361 44.3801 105.101 52.5971 105.439 56.1271C106.002 62.0005 108.24 67.5228 112.777 73.1832Z"
fill="#EDCCC3" />
<path
d="M165.65 58.5C165.65 58.5 171.949 53.9948 170.284 49.5C169.767 48.1036 167.416 45.5134 166.372 44.0875C165.937 43.493 167.385 42.1836 167.284 41C167.188 42.6391 166.553 44.6945 166.372 46.5957C165.951 51.0126 165.886 55.5655 165.65 58.5Z"
fill="#EDCCC3" />
<path
d="M102.014 46.5957C101.301 50.5507 105.439 56.1271 105.439 56.1271C105.101 52.5971 105.361 44.3801 106.157 38.0677C106.157 38.0677 106.068 37.878 105.929 37.5481C105.328 39.9433 104.64 42.5562 104.46 42.7121C103.391 43.6413 102.311 44.9501 102.014 46.5957Z"
fill="#EDCCC3" />
<path
d="M160.23 81.7112V71C152.326 82.3708 144.949 83.9776 127.942 84.7212V87.7311V97.7641C131.18 99.686 133.522 100.782 135.784 101.422C137.641 101.947 139.443 102.165 141.64 102.279C144.963 101.61 147.589 100.911 149.784 100.094C154.326 98.405 157.022 96.2139 160.23 92.7476V81.7112Z"
fill="#D3B4AC" />
<path
d="M225.784 169.5C220.081 145.744 207.229 129.703 177.842 99.2689C173.538 87.3012 169.675 83.4118 160.23 81.7112V92.7476C157.022 96.2139 154.326 98.405 149.784 100.094C147.589 100.911 144.963 101.61 141.64 102.279C139.443 102.165 137.641 101.947 135.784 101.422C133.522 100.782 131.18 99.686 127.942 97.7641V87.7311C120.695 89.5385 117.785 92.2303 116.201 102.279C92.9925 124.258 84.6438 138.778 80 169.5H110.784H187.284H225.784Z"
fill="#A259FF" />
<path
d="M160.23 81.7112C169.675 83.4119 173.538 87.3012 177.842 99.2689C207.229 129.703 220.081 145.744 225.784 169.5H187.284M160.23 81.7112V71M160.23 81.7112V92.7476C157.022 96.2139 154.326 98.405 149.784 100.094M160.23 71C152.326 82.3708 144.949 83.9776 127.942 84.7212M160.23 71C162.027 68.1989 164.642 65.7159 165.184 62.5C165.389 61.2815 165.532 59.975 165.65 58.5M127.942 84.7212C119.625 82.5633 112.777 73.1832 112.777 73.1832C108.24 67.5228 106.002 62.0005 105.439 56.1271M127.942 84.7212V87.7311M167.284 35.5C170.242 29.4232 166.832 22.6848 161.784 18.5C159.521 16.6239 158.6 17.7864 154.849 16.9984C153.593 11.8916 150.99 8.9101 145.284 7.5C131.592 7.16288 124.804 6.69535 114.284 2L112.777 11C112.777 11 108.152 11.6584 105.439 15L108.784 22.5C108.784 22.5 105.417 25.7501 104.784 28.5C104.168 31.1776 105.337 36.1472 105.929 37.5481M167.284 35.5C167.284 35.5 167.099 38.8133 167.284 41M167.284 35.5C167.395 36.5792 167.398 39.0722 167.284 41M165.65 58.5C165.65 58.5 171.949 53.9948 170.284 49.5C169.767 48.1036 167.416 45.5134 166.372 44.0875C165.937 43.493 167.385 42.1836 167.284 41M165.65 58.5C165.886 55.5655 165.951 51.0126 166.372 46.5957M107.284 32C107.284 32 122.744 33.6171 129.784 28C136.464 22.6703 149.784 24 149.784 24C147.667 25.7884 148.499 33.4821 150.784 34C155.399 35.046 156.603 32.3925 160.23 35.5C163.517 38.3159 166.372 46.5957 166.372 46.5957M107.284 32C106.997 33.2867 106.369 36.386 106.157 38.0677M107.284 32C107.284 32 106.451 35.4684 105.929 37.5481M105.439 56.1271C105.439 56.1271 101.301 50.5507 102.014 46.5957C102.311 44.9501 103.391 43.6413 104.46 42.7121C104.64 42.5562 105.328 39.9433 105.929 37.5481M105.439 56.1271C105.101 52.5971 105.361 44.3801 106.157 38.0677M166.372 46.5957C166.553 44.6945 167.188 42.6391 167.284 41M106.157 38.0677C106.157 38.0677 106.068 37.878 105.929 37.5481M127.942 87.7311V97.7641C131.18 99.686 133.522 100.782 135.784 101.422M127.942 87.7311C120.695 89.5385 117.785 92.2303 116.201 102.279C92.9925 124.258 84.6438 138.778 80 169.5H110.784M113.284 42C117.774 39.6417 120.294 39.5236 124.784 42M135.284 42C140.083 40.3288 142.756 39.6446 147.284 42M110.784 169.5L116.201 135.5M110.784 169.5H187.284M187.284 169.5L176.784 135.5M135.784 101.422C137.641 101.947 139.443 102.165 141.64 102.279C144.963 101.61 147.589 100.911 149.784 100.094M135.784 101.422V135M135.784 135H134.784V136H136.784V135H135.784ZM149.784 100.094V131M149.784 131H148.784V132H150.784V131H149.784Z"
stroke="black" />
</g>
<path id="mouth" d="M123.266 65.1584C128.275 69.4352 135.44 69.17 140 65.1584" stroke="black" />
<ellipse id="eye_left" cx="119.352" cy="46.0957" rx="1.95683" ry="2.0066" fill="black" />
<ellipse id="eye_right" cx="140.878" cy="46.0957" rx="1.95683" ry="2.0066" fill="black" />
</g>
</svg>
</div>
</div>
<div id="skills-button" class="section-button" onclick="document.getElementById('skills').scrollIntoView()">
<div id="skills-container">
<h2 class="noselect">Skills</h2>
<svg id = "toolbox" width="218" height="204" viewBox="0 0 218 204" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<path id="toolbox-top" d="M31.5 102V48H194.5V102H178V65H48V102H31.5Z" fill="#F5B41A" stroke="black" stroke-width="4"/>
<g id="screwdriver" class = "tool">
<g id="screwdriver-body">
<path d="M113.5 31L108 79.5L117.5 80.5L124.5 32.5C124.5 32.5 127.5 29 128 27.5C128.5 26 126.5 11.5 125.5 11.5C124.5 11.5 118.5 10.5 117.5 11C116.5 11.5 111.5 23.5 111.5 25.5C111.5 27.5 113.5 31 113.5 31Z" fill="#D9D9D9"/>
<path d="M98 103.5L94.5 131.5H115.5L119.5 103.5L122.5 81L117.5 80.5L108 79.5L101 78.5L98 103.5Z" fill="#779DBC"/>
<path d="M108 79.5L101 78.5L98 103.5L94.5 131.5H115.5L119.5 103.5L122.5 81L117.5 80.5M108 79.5L113.5 31C113.5 31 111.5 27.5 111.5 25.5C111.5 23.5 116.5 11.5 117.5 11C118.5 10.5 124.5 11.5 125.5 11.5C126.5 11.5 128.5 26 128 27.5C127.5 29 124.5 32.5 124.5 32.5L117.5 80.5M108 79.5L117.5 80.5" stroke="black" stroke-width="2"/>
</g>
<path id="screwdriver-shadow-top" d="M127.5 27.5C128 26 127 13 125 12.5C123 12 121 12 121 12C121 12 124 26.5 123.5 27.5C123 28.5 122.5 29.5 122 30C121.5 30.5 113 79 113 79L117 79.5L123.5 32.5C123.5 32.5 127 29 127.5 27.5Z" fill="#969696"/>
<path id="screwdriver-shadow-bottom" d="M122 82L112.5 81L108 111.5L117.5 112L122 82Z" fill="#638098"/>
</g>
<g id="wrench" class = "tool">
<path id="wrench_2" d="M136 133.5L148 104C148 104 166.5 58.0001 166.5 55.5C166.5 53 158.231 44.5464 158.5 36.5C158.78 28.1198 161.461 22.0565 168.5 17.5C172.284 15.0503 179 13.5 179.5 14C180 14.5 174 29 174 29C174 29 174 32 175.5 34C177 36 185 40 186 40C187 40 192.5 37.5 194 36.5C195.5 35.5 198.5 22.5 200 22.5C201.5 22.5 206.051 30.4889 206.5 36.5C207.105 44.6061 204.136 50.1681 198 55.5C193.374 59.5198 184.5 61 183.5 61.5C182.5 62 167.5 104 167.5 104L156.5 133.5H136Z" fill="#D9D9D9" stroke="black" stroke-width="2"/>
<path id="wrench-shadow" d="M168 100C168 100 161 100 162 99.5C163 99 175 60 176.5 58.5C178 57 189.641 53.6619 195 48C199.261 43.4986 200.494 34.0219 200.494 34.0219L200.5 24C200.5 24 202.563 26.9244 203.5 29C204.669 31.5914 205.5 36 205.5 36C205.814 40.7766 205.789 43.796 203.5 48C201.056 52.4881 198.368 54.3463 194 57C190.25 59.2785 183 61 183 61L168 100Z" fill="#969696"/>
</g>
<g id="hammer" class = "tool">
<g id="hammer-base">
<path d="M20 44.5L35.5 40L34 35.5L40.5 34C46.8708 34 48.7319 37.0065 53 35.9254C54.7614 35.4793 56.9327 34.337 60 32C60.8275 29.5885 65.5 25.5 68 25C70.5 24.4999 78 28.4999 78.5 25C79 21.5 63.2027 13.7703 52 14C43.5422 14.1734 31.5 21 31.5 21L30 16L12.5 22.5L20 44.5Z" fill="#D9D9D9"/>
<path d="M40.5 34L58.5 101.5L66.5 133.5H78.5H86.5L78 101.5L60 32C56.9327 34.337 54.7614 35.4793 53 35.9254C48.7319 37.0065 46.8708 34 40.5 34Z" fill="#779DBC"/>
<path d="M34 35.5L35.5 40L20 44.5L12.5 22.5L30 16L31.5 21C31.5 21 43.5422 14.1734 52 14C63.2027 13.7703 79 21.5 78.5 25C78 28.4999 70.5 24.4999 68 25C65.5 25.5 60.8275 29.5885 60 32M34 35.5C34 35.5 37.9616 34.5858 40.5 34M34 35.5L40.5 34M40.5 34C47.5294 60.3604 58.5 101.5 58.5 101.5M40.5 34L58.5 101.5M40.5 34C46.8708 34 48.7319 37.0065 53 35.9254C54.7614 35.4793 56.9327 34.337 60 32M58.5 101.5L66.5 133.5H78.5H86.5L78 101.5M78 101.5C78 101.5 67.0294 59.1415 60 32M78 101.5L60 32" stroke="black" stroke-width="3"/>
</g>
<path id="hammer-shadow-bottom" d="M52.5 37.5L78 132H84.5L59 34C59 34 58.4204 34.6419 58 35C57.1333 35.7383 56.5323 36.0196 55.5 36.5C54.3803 37.021 52.5 37.5 52.5 37.5Z" fill="#638098"/>
<path id="hammer-shadow-top" d="M62 16.5C58.3724 15.5265 56.2528 15.3468 52.5 15.5C52.5 15.5 54.3539 20.593 54.5 24C54.6789 28.1704 52.5 34.5 52.5 34.5C52.5066 34.4978 56.4589 33.5331 58.5 31.5C59.6901 30.3146 59.8617 29.7352 61 28.5C62.5087 26.8629 63.4253 25.8076 65.5 25C67.5099 24.2177 71 24 71 24C71 24 77 25.5 77.5 25C78 24.5001 74.3444 21.985 72 20.5C68.4468 18.2493 66.0623 17.5903 62 16.5Z" fill="#969696"/>
</g>
<path id="toolbox-bottom" d="M16 102.188V184.968C16 184.968 16.3198 188.924 17.8957 190.656C20.112 193.09 26.1106 192.551 26.1106 192.551H199.254C199.254 192.551 204.08 192.499 206.205 190.656C208.081 189.028 209.049 184.968 209.049 184.968V102.188H197.043H180.297H76.6635H57.0743H44.752H28.3223H16Z" fill="#F5B41A" stroke="black" stroke-width="5" stroke-linejoin="round"/>
<path id="Vector 1" d="M206 189.5C201.5 193.5 21.5 192 19.5 190C17.5 188 18.5 180.5 18.5 180.5C18.5 180.5 185 180.5 190 175C195 169.5 201 104.5 201 104.5H206.5C206.5 104.5 210.5 185.5 206 189.5Z" fill="#BD8B14"/>
</g>
</svg>
</div>
</div>
<div id="projects-button" class="section-button" onclick="document.getElementById('projects').scrollIntoView()">
<div id="projects-container">
<h2 class="noselect">Past Work</h2>
<svg id = "gears" fill="#F5F6F3" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px"
viewBox="0 0 418.879 418.879" xml:space="preserve">
<path class="gear" id = "gear1" d="M188.634,234.066c8.462-5.287,16.126-11.735,22.767-19.127l23.942,13.826l21.8-37.76l-23.894-13.796
c3.038-9.275,4.825-19.113,5.16-29.311l27.183-4.793l-7.574-42.938l-27.178,4.793c-3.756-9.309-8.795-17.965-14.906-25.744
l17.766-21.17L200.3,30.022l-17.751,21.152c-8.67-4.646-18.059-8.119-27.954-10.203V13.385h-43.6v27.586
c-9.896,2.084-19.285,5.557-27.956,10.203l-17.75-21.152l-33.4,28.025l17.764,21.17c-6.11,7.779-11.149,16.436-14.905,25.744
L7.57,100.168L0,143.106l27.179,4.793c0.335,10.199,2.123,20.035,5.161,29.313L8.444,191.007l21.801,37.759l23.943-13.822
c6.639,7.389,14.303,13.838,22.766,19.125l-9.451,25.963l40.972,14.91l9.438-25.928c4.864,0.688,9.831,1.053,14.882,1.053
c5.051,0,10.019-0.363,14.883-1.053l9.437,25.93l40.97-14.914L188.634,234.066z M132.793,200.065
c-30.702,0-55.68-24.977-55.68-55.68c0-30.701,24.978-55.68,55.68-55.68s55.68,24.979,55.68,55.68
C188.473,175.088,163.496,200.065,132.793,200.065z" />
<path class="gear" id = "gear2" d="M376.041,266.807l-18.795,6.08c-3.584-6.229-8.014-11.869-13.115-16.779l10.504-16.764l-26.447-16.57l-10.498,16.75
c-6.604-2.438-13.602-3.973-20.826-4.471l-2.725-19.559l-30.912,4.309l2.725,19.559c-6.809,2.453-13.125,5.847-18.812,9.996
l-14.672-13.244l-20.912,23.168l14.684,13.259c-3.562,6.118-6.277,12.752-8.02,19.726l-19.744-0.714l-1.129,31.188l19.743,0.716
c1.246,7.198,3.486,13.991,6.558,20.271l-15.578,12.143l19.185,24.615l15.609-12.164c5.438,4.582,11.511,8.396,18.031,11.311
l-4.138,19.344l30.522,6.52l4.133-19.314c3.516,0.01,7.072-0.229,10.652-0.727c3.582-0.498,7.07-1.25,10.447-2.215l9.256,17.451
l27.574-14.623l-9.266-17.471c5.48-4.586,10.271-9.918,14.252-15.812l18.338,7.436l11.727-28.924l-18.303-7.422
c1.234-6.875,1.529-14.027,0.764-21.293l18.799-6.084L376.041,266.807z M297.129,350.006
c-21.771,3.031-41.949-12.209-44.98-33.977c-3.037-21.769,12.207-41.949,33.977-44.979c21.768-3.036,41.941,12.207,44.98,33.978
C334.135,326.795,318.896,346.969,297.129,350.006z" />
<path class="gear" id = "gear3" d="M418.146,158.647l0.732-24.629l-15.586-0.463c-0.977-5.428-2.723-10.803-5.285-15.971l12.24-9.67l-15.271-19.33
l-12.238,9.666c-4.365-3.627-9.193-6.584-14.318-8.816l3.164-15.291l-24.123-4.996l-3.17,15.281
c-5.559,0.008-11.156,0.797-16.641,2.412l-7.391-13.727l-21.695,11.684l7.391,13.729c-4.363,3.686-8.107,7.934-11.176,12.566
l-14.496-5.77l-9.111,22.893l14.508,5.779c-0.955,5.508-1.141,11.158-0.514,16.799l-14.809,4.898l7.732,23.395l14.809-4.896
c2.9,4.986,6.426,9.396,10.426,13.201l-8.191,13.268l20.963,12.946l8.209-13.292c5.285,1.896,10.828,3.051,16.453,3.414
l2.252,15.453l24.383-3.561l-2.246-15.434c2.602-0.957,5.17-2.109,7.684-3.463c2.516-1.352,4.891-2.867,7.123-4.51l11.648,10.371
l16.387-18.398l-11.656-10.383c2.795-4.9,4.875-10.164,6.203-15.619L418.146,158.647z M359.436,171.844
c-15.281,8.227-34.404,2.492-42.627-12.783c-8.23-15.277-2.494-34.404,12.787-42.627c15.273-8.229,34.395-2.49,42.625,12.787
C380.443,144.499,374.711,163.616,359.436,171.844z" />
</svg>
</div>
</div>
<div id="contact-button" class="section-button" onclick="document.getElementById('contact').scrollIntoView()">
<div id="contact-container">
<h2 class = "noselect">Contact</h2>
<div id="envelope-container">
<svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" id="envelope">
<g id="Letter" clip-path="url(#clip0_102_34)">
<path id="envelope-top"
d="M3.5 196.5V72.2641L93.1593 5.9162C97.2238 2.90845 102.776 2.90845 106.841 5.9162L196.5 72.2641V196.5H100H3.5Z"
fill="white" stroke="black" stroke-width="7" />
<g id="envelope-letter">
<g id="letter-paper">
<mask id="path-2-inside-1_102_34" fill="white">
<path
d="M35 78C35 74.134 38.134 71 42 71H158C161.866 71 165 74.134 165 78V164C165 167.866 161.866 171 158 171H42C38.134 171 35 167.866 35 164V78Z" />
</mask>
<path
d="M35 78C35 74.134 38.134 71 42 71H158C161.866 71 165 74.134 165 78V164C165 167.866 161.866 171 158 171H42C38.134 171 35 167.866 35 164V78Z"
fill="white" />
<path
d="M29 78C29 70.8203 34.8203 65 42 65H158C165.18 65 171 70.8203 171 78H159C159 77.4477 158.552 77 158 77H42C41.4477 77 41 77.4477 41 78H29ZM165 171H35H165ZM42 171C34.8203 171 29 165.18 29 158V78C29 70.8203 34.8203 65 42 65V77C41.4477 77 41 77.4477 41 78V164C41 167.866 41.4477 171 42 171ZM158 65C165.18 65 171 70.8203 171 78V158C171 165.18 165.18 171 158 171C158.552 171 159 167.866 159 164V78C159 77.4477 158.552 77 158 77V65Z"
fill="black" mask="url(#path-2-inside-1_102_34)" />
</g>
<path id="letter-text"
d="M118.216 131.976C118.216 134.472 118.568 136.248 119.272 137.304C120.008 138.328 121.112 138.84 122.584 138.84C124.184 138.84 125.736 138.216 127.24 136.968C128.744 135.688 129.976 133.592 130.936 130.68C131.928 127.768 132.424 123.848 132.424 118.92C132.424 112.904 131.16 107.672 128.632 103.224C126.136 98.744 122.6 95.272 118.024 92.808C113.48 90.312 108.12 89.064 101.944 89.064C97.016 89.064 92.552 89.976 88.552 91.8C84.552 93.624 81.112 96.184 78.232 99.48C75.384 102.744 73.192 106.584 71.656 111C70.12 115.384 69.352 120.152 69.352 125.304C69.352 132.312 70.568 138.216 73 143.016C75.432 147.816 78.808 151.448 83.128 153.912C87.48 156.376 92.536 157.608 98.296 157.608C101.816 157.608 105.208 157.304 108.472 156.696C111.768 156.12 114.872 155.256 117.784 154.104C118.552 154.808 119.176 155.784 119.656 157.032C120.136 158.312 120.376 159.544 120.376 160.728C118.104 161.592 115.704 162.328 113.176 162.936C110.68 163.576 108.12 164.072 105.496 164.424C102.872 164.776 100.28 164.952 97.72 164.952C90.424 164.952 83.928 163.448 78.232 160.44C72.536 157.464 68.072 153.032 64.84 147.144C61.608 141.256 59.992 133.976 59.992 125.304C59.992 119.128 61.016 113.416 63.064 108.168C65.112 102.92 67.992 98.344 71.704 94.44C75.448 90.504 79.88 87.464 85 85.32C90.152 83.144 95.8 82.056 101.944 82.056C107.768 82.056 113.112 82.936 117.976 84.696C122.84 86.424 127.032 88.904 130.552 92.136C134.104 95.368 136.84 99.272 138.76 103.848C140.712 108.424 141.688 113.544 141.688 119.208C141.688 125.096 140.744 130.024 138.856 133.992C136.968 137.96 134.536 140.968 131.56 143.016C128.616 145.032 125.512 146.04 122.248 146.04C119.56 146.04 117.24 145.496 115.288 144.408C113.368 143.32 111.896 141.848 110.872 139.992C109.848 138.104 109.336 135.928 109.336 133.464V110.712C108.536 109.912 107.448 109.224 106.072 108.648C104.728 108.04 103.256 107.736 101.656 107.736C99.352 107.736 97.432 108.52 95.896 110.088C94.392 111.656 93.256 113.752 92.488 116.376C91.752 119 91.384 121.896 91.384 125.064C91.384 129.192 92.008 132.552 93.256 135.144C94.504 137.704 96.568 138.984 99.448 138.984C100.888 138.984 102.392 138.552 103.96 137.688C105.528 136.792 106.936 135.656 108.184 134.28C109.464 132.872 110.408 131.432 111.016 129.96L114.472 134.664C113.704 136.52 112.44 138.36 110.68 140.184C108.952 141.976 106.936 143.48 104.632 144.696C102.36 145.88 99.976 146.472 97.48 146.472C92.712 146.472 88.968 144.552 86.248 140.712C83.528 136.872 82.168 131.72 82.168 125.256C82.168 120.776 82.92 116.696 84.424 113.016C85.928 109.304 88.12 106.36 91 104.184C93.912 101.976 97.464 100.872 101.656 100.872C105.016 100.872 108.136 101.512 111.016 102.792C113.928 104.04 116.328 105.576 118.216 107.4V131.976Z"
fill="black" />
</g>
<g id="envelope-base" filter="url(#filter0_d_102_34)">
<path
d="M0 70.5V135.25V143.344V151.438V167.625V200L81.25 129.686L75 125.133L50 106.922L0 70.5Z"
fill="white" />
<path
d="M0 200H100H200L118.75 129.686L112.5 134.238L108.832 136.91C103.568 140.745 96.4318 140.745 91.1682 136.91L87.5 134.238L81.25 129.686L0 200Z"
fill="white" />
<path
d="M200 135.25V70.5L150 106.922L125 125.133L118.75 129.686L200 200V167.625V151.438V143.344V135.25Z"
fill="white" />
<path
d="M72.9392 127.962L75.6291 129.921L3.5 192.342V167.625V151.438V143.344V135.25V77.3797L47.9392 109.751L72.9392 127.962ZM9.39285 196.5L81.4373 134.152L85.4392 137.067L89.1074 139.739C95.5993 144.468 104.401 144.468 110.893 139.739L114.561 137.067L118.563 134.152L190.607 196.5H100H9.39285ZM196.5 167.625V192.342L124.371 129.921L127.061 127.962L152.061 109.751L196.5 77.3797V135.25V143.344V151.438V167.625Z"
stroke="black" stroke-width="7" />
</g>
</g>
<defs>
<filter id="filter0_d_102_34" x="-4" y="70.5" width="208" height="137.5"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy="4" />
<feGaussianBlur stdDeviation="2" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_102_34" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_102_34"
result="shape" />
</filter>
<clipPath id="clip0_102_34">
<rect width="200" height="200" fill="white" />
</clipPath>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div class="page" id="about-me">
<div id="about-me-wrapper">
<div id="about-me-blurb">
<h1>I'm Henry, it's a pleasure to meet you!</h1>
<p>I’m a self taught software developer based in Massachussets, passionate about learning and computer
science. I love taking on challenges and building programs with real world applications</p>
<p>I started programming with python as a freshman in high school, and ever since then I've been
challenging myself to grow my skillset and create ambitious projects</p>
<p>Aside from coding, I’m super interested in science and philosophy, and I love going to the gym.</p>
</div>
<div id="about-me-graphic">
<div class="about-me-image" style="grid-area: science-image" id="science-image"><img
src="assets/science.png"></div>
<div class="about-me-image" style="grid-area: gym-image" id="gym-image"><img src="assets/gym.png"></div>
<div class="about-me-image" style="grid-area: philosophy-image" id="philosophy-image"><img
src="assets/philosophy.png"></div>
<div class="about-me-image" style="grid-area: computer-image" id="computer-image"><img
src="assets/computer.png"></div>
</div>
</div>
</div>
<div class="page" id="skills">
<div id="skills-blurb">
<p>I'm always open to learning new technologies and better ways of solving problems. Here's what I've used
effectively in the past:</p>
</div>
<div id="skills-icons">
<div class="skills-icon">
<div class="skills-icon-wrapper">
<div class="skills-icon-front">
<img src="assets/skills_assets/html.svg">
</div>
<div class="skills-icon-back">
<h1>HTML</h1>
</div>
</div>
</div>
<div class="skills-icon">
<div class="skills-icon-wrapper">
<div class="skills-icon-front">
<img src="assets/skills_assets/css.svg">
</div>
<div class="skills-icon-back">
<h1>CSS</h1>
</div>
</div>
</div>
<div class="skills-icon">
<div class="skills-icon-wrapper">
<div class="skills-icon-front">
<img src="assets/skills_assets/javascript.svg">
</div>
<div class="skills-icon-back">
<h1>Javascript</h1>
</div>
</div>
</div>
<div class="skills-icon">
<div class="skills-icon-wrapper">
<div class="skills-icon-front">
<img src="assets/skills_assets/typescript.svg">
</div>
<div class="skills-icon-back">
<h1>Typescript</h1>
</div>
</div>
</div>
<div class="skills-icon">
<div class="skills-icon-wrapper">
<div class="skills-icon-front">
<img src="assets/skills_assets/php.svg">
</div>
<div class="skills-icon-back">
<h1>PHP</h1>
</div>
</div>
</div>
<div class="skills-icon">
<div class="skills-icon-wrapper">
<div class="skills-icon-front">
<img src="assets/skills_assets/laravel.svg">
</div>
<div class="skills-icon-back">
<h1>Laravel</h1>
</div>
</div>
</div>
<div class="skills-icon">
<div class="skills-icon-wrapper">
<div class="skills-icon-front">
<img src="assets/skills_assets/sqlite.svg">
</div>
<div class="skills-icon-back">
<h1>SQLite</h1>
</div>
</div>
</div>
<div class="skills-icon">
<div class="skills-icon-wrapper">
<div class="skills-icon-front">
<img src="assets/skills_assets/python.svg">
</div>
<div class="skills-icon-back">
<h1>Python</h1>
</div>
</div>
</div>
<div class="skills-icon">
<div class="skills-icon-wrapper">
<div class="skills-icon-front">
<img src="assets/skills_assets/rust.svg">
</div>
<div class="skills-icon-back">
<h1>Rust</h1>
</div>
</div>
</div>
<div class="skills-icon">
<div class="skills-icon-wrapper">
<div class="skills-icon-front">
<img src="assets/skills_assets/java.svg">
</div>
<div class="skills-icon-back">
<h1>Java</h1>
</div>
</div>
</div>
<div class="skills-icon">
<div class="skills-icon-wrapper">
<div class="skills-icon-front">
<img src="assets/skills_assets/flutter.svg">
</div>
<div class="skills-icon-back">
<h1>Flutter</h1>
</div>
</div>
</div>
<div class="skills-icon">
<div class="skills-icon-wrapper">
<div class="skills-icon-front">
<img src="assets/skills_assets/figma.svg" id="skills-icon-figma">
</div>
<div class="skills-icon-back">
<h1>Figma</h1>
</div>
</div>
</div>
</div>
</div>
<div class="break"></div>
<div class="page" id="projects">
<div id="projects-title">
<h1 class="red center">Notable Projects</h1>
</div>
<button id="scouting-project" class="project white"
onclick="window.open('https://github.com/Henry-Turtle/Scouting-Program', '_BLANK')">
<div class="project-header">
<img src="assets/robotics.png">
<h1>Robotics Scouting</h1>
</div>
<div class="project-description">
<p>For my FTC Robotics team, I created a web app to track our matches, store game data, and analyze
other teams' weaknesses. After entering game data, it is stored on a server and retrieved to get
match insights and team statistics. The app was built with Laravel PHP, and I bundled it with
Electron for offline desktop use.</p>
<div class="learn-more">
<h2>Learn More >></h2>
</div>
</div>
</button>
<button id="tetris-project" class="project white"
onclick="window.open('https://github.com/Henry-Turtle/tetris-console', '_BLANK')">
<div class="project-header">
<img src="assets/tetris-logo.png" id = "tetris-image">
<h1>Tetris in Rust</h1>
</div>
<div class="project-description">
<p>To learn the programming language Rust, I decided to create an homage to one of my favorite games ever, Tetris. My version has
all the mechanics of the original, including a faithful implementation of the SRS rotation system. I initially intended to embed this program onto an arduino, and while
I never quite had the time, it's something I'd love to do soon.
</p>
<div class="learn-more">
<h2>Learn More >></h2>
</div>
</div>
</button>
<!--
<button id="oncall-project" class="project white"
onclick="window.open('https://github.com/Henry-Turtle/OnCall', '_BLANK')">
<div class="project-header">
<img src="assets/oncall.png">
<h1>OnCall Dentist</h1>
</div>
<div class="project-description">
<p>I created a prototype for OnCall Dentist, a startup dedicated to providing after-hours service for
dental offices. Since we wanted both a mobile and web app, and the development team was quite small,
we chose to try out Flutter. The prototype included a registration flow, home screen, and messaging
screen.</p>
<div class="learn-more">
<h2>Learn More >></h2>
</div>
</div>
</button>
-->
</div>
<div class="break"></div>
<div class="page" id="contact">
<div id="contact-box">
<div id="contact-blurb">
<h2>Seen enough?<br>Let's get in touch!</h2>
<p>I'm always open to business opportunities, questions, or just chatting!</p>
<p>Don't hesitate to contact me through my email [email protected], or any of my socials</p>
</div>
<form id="contact-form">
<label for="contact-name">Name:</label>
<br>
<input id="contact-name" name="contact-name" type="text" class="input" minlength="1" required>
<br>
<label for="contact-email">Email:</label>
<br>
<input id="contact-email" name="contact-email" type="email" class="input" required>
<br>
<label for="contact-message">Message</label>
<br>
<textarea id="contact-message" name="contact-message" class="input" minlength="1" required></textarea>
<br>
<div id="contact-button-wrapper">
<input type="submit" id="contact-submit" value="Let's Talk!">
</div>
</form>
</div>
</div>
<div id="footer"></div>
</body>
</html>