-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathskipped.html
496 lines (438 loc) · 20.5 KB
/
skipped.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
486
487
488
489
490
491
492
493
494
495
496
<html lang="en"><head>
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-EJ4J9G467E"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-EJ4J9G467E');
</script>
<title> Zachary Chan | Resume </title>
<style>h1 {color: white;}</style>
<style id="true-style">/*
* <<< DON'T LEAVE RIGHT AWAY OR ELSE YOU'RE MISSING OUT! >>>
*
*
* Hello! I'm Zachary Chan.
* A 5th year computer science student at Simon Fraser University.
* I am currently a Junior Software Developer at Amazon.
*
* I'm a programmer.
* Currently, I'm trying out all sorts of stuff to see what I like.
* This is one of my favourite projects, a website that I made.
*
* If you're a boring person, you can press the skip button at the bottom-left.
*
* FOR THE BEST EXPERIENCE, VIEW ON DESKTOP, FULL SCREENED
*/
/*
* Oh... There's nothing here...
* Let me fix that.
*
* First, lets animate EVERYTHING!
*/
* {
-webkit-transition: all 1s;
transition: all 1s;
}
/*
* Where's the animation?
* You will see... :)
*/
/*
* Let me create some space to work with.
*
* AND I SAY, "LET THERE BE A GRAY BOX AND WHITE TEXT!"
*/
pre:not(:empty) {
padding: 1em;
margin: 1em;
border: 1px solid #333;
border-radius: 5px;
background-color: #222;
color: white;
overflow: auto;
padding-bottom: 2em;
white-space: pre-wrap;
}
pre:hover {
box-shadow: 0px 0px 30px 5px rgba(255,255,255,0.4);
}
@media only screen and (min-width:769px) {
pre:not(:empty) {
height: 83%;
width: 45%;
}
}
@media only screen and (max-width: 768px) {
pre:not(:empty) {
width: 85vw;
height: 40vh;
position: absolute;
}
}
#styles {
position: absolute;
user-select: text;
-webkit-user-select: text;
-moz-user-select: text;
}
/*
* Oh EWWWW.
*
* My links are covering up this beautiful text and box.
* Let me fix this and make it not bother us.
*/
ul {
list-style: none;
width: 100%;
display: inline-block;
overflow: auto;
}
li {
font-family: monospace, serif;
display: inline;
padding: 0px 10px;
}
a:hover {color: #888888;}
a:visited {color: #ffffff;}
a:link {color: #ffffff;}
a:active {color: #ffffff;}
/*
* Much better, don't you think?
* Now let me style the background and really make the site pop!
*/
body {
background-color: #151515;
color: white;
font-size: 14px;
}
h1 {
font-size: 2em;
font-weight: bold;
margin-left: 29px;
margin-bottom: 0px;
padding: 0;
}
/* Customize scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background-color: #222;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background-color: #444;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
/*
* Not bad, if I do say so myself.
* But it feels a bit bland and empty. Doesn't it?
* Let me add some color. How about something IDE like?
* ... Maybe a lot more colourful than an IDE ...
*/
.number {
color: rgb(33, 205, 79);
}
.comment {
color: rgb(224, 127, 0);
}
.value {
color: rgb(228, 64, 64);
}
.property {
color: rgb(72, 196, 231);
}
.selector {
color: rgb(147, 147, 251);
}
.media {
color: rgb(255, 89, 225);
}
/*
* I can't imagine that you're here just for the fancy colours.
*
* You probably want to know a little more about me.
* About some of my work, projects and etc.
* Let me prep a TL;DR of my resume for you.
*
* Oh and just in case you didn't notice...
* The link to my master resume is at the bottom left.
* It includes all of my work experience, education, skills, etc.
*
*/
@media only screen and (min-width:769px) {
#styles {
transform: translateX(110%);
}
#resume {
position: absolute;
}
}
@media only screen and (max-width: 768px) {
#resume {
transform: translateX(0%);
}
#styles {
transform: translateX(0%);
bottom: 2em;
}
}
/*
* I hope you enjoyed my website.
*
* Just one more thing! If you want, you can EDIT this website.
* You can change the colours, the text, the code, the layout.
* You can even break the website if you want!
* Simply start typing in this window.
*
* If you have any questions, comments or concerns
*
* Feel free to contact me at:
* Email: [email protected]
* Discord: zach1502#4621
* LinkedIn: https://www.linkedin.com/in/zachary-chan-a125a01bb/
* GitHub: https://github.com/zach1502/
*
* I'm always looking for new opportunities to learn and grow.
*
* Thank you for your time and I hope you are impressed!
*
* - Zachary Chan
*
* [END ANIMATION]
*/
#skip {
display: none;
}</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A resume site that builds itself in front of you">
<meta name="keywords" content="resume, co-op, build, site, zach">
<meta name="author" content="Zachary Chan">
<link rel="icon" type="image/x-icon" href="icon.ico">
</head>
<body>
<iframe id="initial" title="" src="intro.css" style="display: none;"></iframe>
<div id="content" spellcheck="false">
<pre id="styles" contenteditable="" style="white-space: pre-wrap;"><span class="comment">/*
* <<< DON'T LEAVE RIGHT AWAY OR ELSE YOU'RE MISSING OUT! >>>
*
*
* Hello! I'm Zachary Chan.
* A <span class="number">5</span>th year computer science student at Simon Fraser University.
* I am currently a Junior Software Developer at Amazon.
*
* I'm a programmer.
* Currently, I'm trying out all sorts of stuff to see what I like.
* This is one of my favourite projects, a website that I made.
*
* If you're a boring person, you can press the skip button at the bottom-left.
*
* FOR THE BEST EXPERIENCE, VIEW ON DESKTOP, FULL SCREENED
*/</span>
<span class="comment">/*
* Oh... There'<span class="selector">s nothing here... </span>
* Let me fix that.
*
* First, lets animate EVERYTHING!
*/</span>
<span class="selector">* </span>{
<span class="property"><span class="selector"> </span>-webkit-transition:</span> all <span class="number">1</span>s;
<span class="property"><span class="selector"> </span>transition:</span> all <span class="number">1</span>s;
}
<span class="comment">/*
* Where's the animation?
* You will see... :)
*/</span>
<span class="comment">/*
* Let me create some space to work with.
*
* AND I SAY, "LET THERE BE A GRAY BOX AND WHITE TEXT!"
*/</span>
<span class="selector">pre:not(:empty) </span>{
<span class="property"><span class="selector"> </span>padding:</span> <span class="number">1</span>em;
<span class="property"><span class="selector"> </span>margin:</span> <span class="number">1</span>em;
<span class="property"><span class="selector"> </span>border:</span> <span class="number">1</span>px solid #<span class="number">333</span>;
<span class="property"><span class="selector"> </span>border-radius:</span> <span class="number">5</span>px;
<span class="property"><span class="selector"> </span>background-color:</span> #<span class="number">222</span>;
<span class="property"><span class="selector"> </span>color:</span> white;
<span class="property"><span class="selector"> </span>overflow:</span> auto;
<span class="property"><span class="selector"> </span>padding-bottom:</span> <span class="number">2</span>em;
<span class="property"><span class="selector"> </span>white-space:</span> pre-wrap;
}
<span class="selector">pre:hover </span>{
<span class="property"><span class="selector"> </span>box-shadow:</span> <span class="number">0</span>px <span class="number">0</span>px <span class="number">30</span>px <span class="number">5</span>px rgba(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0</span>.<span class="number">4</span>);
}
<span class="media">@media</span> only screen and (min-width:<span class="number">769</span>px) {
<span class="property"><span class="selector"> </span>pre:</span><span class="selector">not(:empty) </span>{
<span class="selector"> </span><span class="property"><span class="selector"> </span>height:</span> <span class="number">83</span>%;
<span class="selector"> </span><span class="property"><span class="selector"> </span>width:</span> <span class="number">45</span>%;
<span class="selector"> </span>}
}
<span class="media">@media</span> only screen and (max-width: <span class="number">768</span>px) {
<span class="property"><span class="selector"> </span>pre:</span>not(:empty) {
<span class="selector"> </span><span class="property"><span class="selector"> </span>width:</span> <span class="number">85</span>vw;
<span class="selector"> </span><span class="property"><span class="selector"> </span>height:</span> <span class="number">40</span>vh;
<span class="selector"> </span><span class="property"><span class="selector"> </span>position:</span> absolute;
<span class="selector"> </span>}
}
<span class="selector">#styles </span>{
<span class="property"><span class="selector"> </span>position:</span> absolute;
<span class="property"><span class="selector"> </span>user-select:</span> text;
<span class="property"><span class="selector"> </span>-webkit-user-select:</span> text;
<span class="property"><span class="selector"> </span>-moz-user-select:</span> text;
}
<span class="comment">/*
* Oh EWWWW.
*
* My links are covering up this beautiful text and box.
* Let me fix this and make it not bother us.
*/</span>
<span class="selector">ul </span>{
<span class="property"><span class="selector"> </span>list-style:</span> none;
<span class="property"><span class="selector"> </span>width:</span> <span class="number">100</span>%;
<span class="property"><span class="selector"> </span>display:</span> inline-block;
<span class="property"><span class="selector"> </span>overflow:</span> auto;
}
<span class="selector">li </span>{
<span class="property"><span class="selector"> </span>font-family:</span> monospace, serif;
<span class="property"><span class="selector"> </span>display:</span> inline;
<span class="property"><span class="selector"> </span>padding:</span> <span class="number">0</span>px <span class="number">10</span>px;
}
<span class="selector">a:hover </span>{color: #<span class="number">888888</span>;}
<span class="selector">a:visited </span>{color: #ffffff;}
<span class="selector">a:link </span>{color: #ffffff;}
<span class="selector">a:active </span>{color: #ffffff;}
<span class="comment">/*
* Much better, don't you think?
* Now let me style the background and really make the site pop!
*/</span>
<span class="selector">body </span>{
<span class="property"><span class="selector"> </span>background-color:</span> #<span class="number">151515</span>;
<span class="property"><span class="selector"> </span>color:</span> white;
<span class="property"><span class="selector"> </span>font-size:</span> <span class="number">14</span>px;
}
h<span class="number">1</span> {
<span class="property"><span class="selector"> </span>font-size:</span> <span class="number">2</span>em;
<span class="property"><span class="selector"> </span>font-weight:</span> bold;
<span class="property"><span class="selector"> </span>margin-left:</span> <span class="number">29</span>px;
<span class="property"><span class="selector"> </span>margin-bottom:</span> <span class="number">0</span>px;
<span class="property"><span class="selector"> </span>padding:</span> <span class="number">0</span>;
}
<span class="comment">/* Customize scrollbar */</span>
::-webkit-scrollbar {
<span class="property"><span class="selector"> </span>width:</span> <span class="number">8</span>px;
<span class="property"><span class="selector"> </span>height:</span> <span class="number">8</span>px;
}
::-webkit-scrollbar-track {
<span class="property"><span class="selector"> </span>background-color:</span> #<span class="number">222</span>;
<span class="property"><span class="selector"> </span>border-radius:</span> <span class="number">5</span>px;
}
::-webkit-scrollbar-thumb {
<span class="property"><span class="selector"> </span>background-color:</span> #<span class="number">444</span>;
<span class="property"><span class="selector"> </span>border-radius:</span> <span class="number">5</span>px;
}
::-webkit-scrollbar-thumb:hover {
<span class="property"><span class="selector"> </span>background-color:</span> #<span class="number">555</span>;
}
<span class="comment">/*
* Not bad, if I do say so myself.
* But it feels a bit bland and empty. Doesn't it?
* Let me add some color. How about something IDE like?
* ... Maybe a lot more colourful than an IDE ...
*/</span>
<span class="selector">.number </span>{
<span class="property"><span class="selector"> </span>color:</span> rgb(<span class="number">33</span>, <span class="number">205</span>, <span class="number">79</span>);
}
<span class="selector">.comment </span>{
<span class="property"><span class="selector"> </span>color:</span> rgb(<span class="number">224</span>, <span class="number">127</span>, <span class="number">0</span>);
}
<span class="selector">.value </span>{
<span class="property"><span class="selector"> </span>color:</span> rgb(<span class="number">228</span>, <span class="number">64</span>, <span class="number">64</span>);
}
<span class="selector">.property </span>{
<span class="property"><span class="selector"> </span>color:</span> rgb(<span class="number">72</span>, <span class="number">196</span>, <span class="number">231</span>);
}
<span class="selector">.selector </span>{
<span class="property"><span class="selector"> </span>color:</span> rgb(<span class="number">147</span>, <span class="number">147</span>, <span class="number">251</span>);
}
<span class="selector">.media </span>{
<span class="property"><span class="selector"> </span>color:</span> rgb(<span class="number">255</span>, <span class="number">89</span>, <span class="number">225</span>);
}
<span class="comment">/*
* I can't imagine that you're here just for the fancy colours.
*
* You probably want to know a little more about me.
* About some of my work, projects and etc.
* Let me prep a TL;DR of my resume for you.
*
* Oh and just in case you didn't notice...
* The link to my master resume is at the bottom left.
* It includes all of my work experience, education, skills, etc.
*
*/</span>
<span class="media">@media</span> only screen and (min-width:<span class="number">769</span>px) {
<span class="selector"> #styles </span>{
<span class="selector"> </span><span class="property"><span class="selector"> </span>transform:</span> translateX(<span class="number">110</span>%);
<span class="selector"> </span>}
<span class="selector"> #resume </span>{
<span class="selector"> </span><span class="property"><span class="selector"> </span>position:</span> absolute;
<span class="selector"> </span>}
}
<span class="media">@media</span> only screen and (max-width: <span class="number">768</span>px) {
<span class="selector"> #resume </span>{
<span class="selector"> </span><span class="property"><span class="selector"> </span>transform:</span> translateX(<span class="number">0</span>%);
<span class="selector"> </span>}
<span class="selector"> #styles </span>{
<span class="selector"> </span><span class="property"><span class="selector"> </span>transform:</span> translateX(<span class="number">0</span>%);
<span class="selector"> </span><span class="property"><span class="selector"> </span>bottom:</span> <span class="number">2</span>em;
<span class="selector"> </span>}
}
<span class="comment">/*
* I hope you enjoyed my website.
*
* Just one more thing! If you want, you can EDIT this website.
* You can change the colours, the text, the code, the layout.
* You can even break the website if you want!
* Simply start typing in this window.
*
* If you have any questions, comments or concerns
*
* Feel free to contact me at:
* Email: zca<span class="number">121</span>@sfu.ca
* Discord: zach<span class="number">1502</span>#<span class="number">4621</span>
* LinkedIn: https://www.linkedin.com/in/zachary-chan-a<span class="number">125</span>a<span class="number">01</span>bb/
* GitHub: https://github.com/zach<span class="number">1502</span>/
*
* I'm always looking for new opportunities to learn and grow.
*
* Thank you for your time and I hope you are impressed!
*
* - Zachary Chan
*
* [END ANIMATION]
*/</span>
<span class="selector">#skip </span>{
<span class="property"><span class="selector"> </span>display:</span> none;
}<br></pre>
<pre id="resume">===================<br>Zachary Chan<br>===================<br>5th year Computer Science Student at Simon Fraser University (SFU)<br>Junior Software Developer @ Amazon <br><br>===================<br>Personal Projects:<br>===================<br>This Website (JavaScript, HTML, CSS)<br>October 2022 - Present<br><br>OctoBot: Repo Assistant (Flask, React, Python, JavaScript)<br>September 2024 - September 2024<br><br>AI Need Help: Therapist App (MongoDB, Express, React, Node.js, Javascript)<br>May 2024 - May 2024<br><br>Statistical Analysis of SFU Computing Science Student Society Discord Server (Python, Pandas, Numpy, Matplotlib)<br>April 2024 - April 2024<br><br>Peak Buddies: Speed Networking App (MERN Stack, Socket.io, Javascript)<br>🏆 Mountain Madness 2024 Winner 🏆<br>April 2024 - April 2024<br><br>Statistical Analysis of SFU CSSS Discord Server (Python, Pandas, Numpy, Matplotlib)<br>March 2024 - April 2024<br><br>Asynchronous, Multi-threaded C++ Server (C++, Boost, Networking)<br>January 2024 - February 2024<br><br>Algorithmic Trading with LSTM (Python, PyTorch, Pandas, NumPy)<br>December 2023 - January 2024<br><br>Custom Malloc and Free Implementation (C)<br>November 2023 - November 2023<br><br>Simple Chat Application (C, Posix Threads, TCP Sockets)<br>October 2023 - October 2023<br><br>Sorting Algorithm Visualization Tool (Node.js, Javascript, React)<br>August 2023 - October 2023<br><br>Gesture Genius: Real Time ASL-to-English translator website (Javascript)<br>September 2023 - September 2023<br><br>Chess AI using Monte Carlo Tree Search and Deep Neural Networks (Python)<br>February 2023 - May 2023<br><br>4-Key Rhythm Game (JavaScript)<br>January 2023 - February 2023<br><br>Automatic UPass Registration (Python)<br>August 2022 - October 2023<br><br>Chess Engine Tournament (JavaScript and C++)<br>June 2022 - Sept 2022<br><br>Chess With Friends Discord Bot (JavaScript)<br>June 2022 - Sept 2022<br><br>Automated Crossword Puzzle Generator (Python)<br>May 2022 - June 2022<br><br>===================<br>Education:<br>===================<br>B.Sc Computer Science<br>Simon Fraser University<br>2022 - 2026 (expected graduation)<br>3.82 CGPA<br><br>Associate of Computer Science (Transferred)<br>Langara College<br>2020 - 2022<br>3.66 CGPA<br><br>===================<br>Skills:<br>===================<br>Programming Languages: C/C++, Python, JavaScript, HTML, CSS, SQL<br>Frameworks &amp; Libraries: React, Node.js, Express, Material-UI, PyTorch, Pandas, NumPy, Matplotlib<br>Developer Tools: Git, AWS (API Gateway, DynamoDB, Lambda, S3, Scheduler, TimeStream), GCP<br>Soft Skills: Effective Communication, Problem-Solving, Team Collaboration, Adaptability, Creativity<br>Human Languages: English, French, Mandarin<br><br>===================<br>Competitions and Hackathons: <br>===================<br>A Strange Programming Contest 2023, Simon Fraser University - 2nd Place<br>A Strange Programming Contest 2022, Simon Fraser University - 5th Place<br>New Year's MASH Programming Contest 2022, Simon Fraser University - 8th Place<br>ICPC Pacific NorthWest Regional Programming Contest 2022, Division 2 - Placed 16th out of 61 teams<br>ICPC Pacific NorthWest Regional Programming Contest 2023, Division 2 - Placed 17th out of 76 teams<br>Advent of Code 2023, Online - Placed 122nd out of 316,118 global participants<br>Advent of Code 2022, Online - Completed<br><br>Mountain Madness 2024, Simon Fraser University - 1st Place<br>Hack The North 2024, University of Waterloo - Participant<br>Hack The North 2023, University of Waterloo - Participant<br>StormHacks 2023, Simon Fraser University - Participant<br>Fall Hacks 2022, Simon Fraser University - Participant<br><br>===================<br>Interests:<br>===================<br>Chess<br>2000 Rapid, 1700 Blitz, 1250 Bullet, 2200 Puzzle on chess.com.<br><br>Finance<br>Self-directed investments. Took economics related electives.<br></pre>
</div>
<footer style="position:fixed; bottom:0px; left:0px; float:right;">
<ul>
<li>
<a href="./resume.pdf" download=""> Download My Resume </a>
</li>
<li>
<a href="https://github.com/zach1502/website"> Source Code </a>
</li>
<li>
<a href="https://github.com/zach1502/"> GitHub </a>
</li>
</ul>
</footer>
</body></html>