-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
683 lines (668 loc) · 25.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
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
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<title>Anni Wang | Personal Website</title>
<link
rel="stylesheet"
type="text/css"
href="./Assets/css/default.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&display=swap"
rel="stylesheet"
/>
<link rel="icon" type="image/png" href="./Version16.png" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Mali:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Poller+One&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap"
rel="stylesheet"
/>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<script
src="https://kit.fontawesome.com/154d42b0c7.js"
crossorigin="anonymous"
></script>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/6465234174285f0ec46c1008/1h0lh3elo';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</head>
<body style="background-color: #FFE43B">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<header class="homeMenu">
<nav>
<div class="navbrand">
<img class="logo" src="./Version16.png" alt="Logo" />
</div>
<ul class="nav-links">
<li>
<a href="#About">About Me</a>
</li>
<li>
<a href="#Projects">Projects</a>
</li>
<li>
<a href="#Experiences">Experiences</a>
</li>
<li>
<a href="#Interests">Blog</a>
</li>
<li>
<a href="#Contacts">Contact Me</a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="header-text-img">
<div class="header-text">
<h4 class="sub-text">HI, I'M</h4>
<h1 class="main-text">Anni Wang</h1>
</div>
<img class="sunflower-img" src="Sunflower.png" alt="Sunflower on i" />
<img class="bee-gif floating" src="Bee.gif" alt="floating bee" />
<h4 class="slide-wrapper"><span class="slide-text"></span></h4>
</div>
</header>
<div class="about-area" id="About">
<div class="about-container">
<div class="hovereffect about-image">
<img
class="profile-picture"
src="Assets/profile.jpg"
alt="profile
picture"
/>
<div class="overlay">
<p class="icon-links">
<a href="https://github.com/aninibread/" target="_blank"
><span class="fa fa-github-alt"></span
></a>
<!-- <a
href="https://drive.google.com/file/d/11eEUWMrFCqzUUHBHpyUYlphMAd31tFwY/view?usp=sharing"
target="_blank"
><span class="fa fa-file-pdf"></span
></a> -->
<a href="https://www.linkedin.com/in/anniwang44/" target="_blank"
><span class="fa fa-linkedin"></span
></a>
<a href="mailto:anniwang44@gmail.com" target="_blank"
><span class="fa fa-envelope"></span
></a>
</p>
</div>
</div>
<div class="about-text">
<h1 class="about-header">🌻 About Me</h1>
<p>
Hi there! My name is Anni Wang, and I am a Biomedical Engineering
student 👩🔬 at the University of Waterloo. A bit about me (I guess
that is what you are here for), I love programming 👩💻 and learning
about this multifaceted field from web development to machine
learning. Besides programming, I have a variety of hobbies such as
origami and 🥌 curling. And as crazy as it may sound, I aspire to
pursue a career in ⚖️ law and 💻 tech in the future.
</p>
<p>
Now, let me help you navigate through this web page (aka. my brain
hub 🧠). You can find <a href="#Projects">my projects</a> and
<a href="#Experiences">work experience</a> 💼 in its respective
sections below. If you would like to dig deeper into my brain, feel
free to check out <a href="#Interests">my blog</a> for some
unsolicited opinions and throughts ✍️. Finally, if you would like to
contact me 🤙, visit the <a href="#Contacts">Contact Me</a> footer
or hover my picture on the left 👈. Bye now! 👋
</p>
</div>
</div>
</div>
<div class="projects-area" id="Projects">
<h1 class="projects-header">My Projects 🌻</h1>
<h2 class="work-header">Software Projects 🖱️</h2>
<div class="projects-container" id="accordion">
<div class="card">
<div class="face face1 card-header" id="headingOne">
<h5 class="mb-0">
<button
class="btn btn-link"
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
<div class="pro-content">
<img src="Images/cat2.png" alt="cat game" />
</div>
</button>
</h5>
</div>
<div
id="collapseOne"
class="collapse face face2"
aria-labelledby="headingOne"
data-parent="#accordion"
>
<div class="card-body pro2-content">
<p>
Kitty Jump 🐱 is a web game based on the Chrome Dinosaur 🐱
game. This was the first project I built using HTML and
Javascript. It is DEFINITELY not perfect, something I plan to
work on and improve in the future. I designed all original
graphics using PhotoShop 🎨. Take a peek below 👇. (Files got
corrupted).
</p>
<a
class="readMore"
href="./KittyJumpGame/KittyGame.html"
target="_blank"
>Read More</a
>
</div>
</div>
</div>
<div class="card">
<div class="face face1 card-header" id="headingTwo">
<h5 class="mb-0">
<button
class="btn btn-link collapsed"
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
<div class="pro-content">
<img src="Images/health.png" alt="health website" />
</div>
</button>
</h5>
</div>
<div
id="collapseTwo"
class="collapse face face2"
aria-labelledby="headingTwo"
data-parent="#accordion"
>
<div class="card-body pro2-content">
<p>
I collaborated in a team with 2 of my girl friends 👧 to create
a web app that streamlines the acquisition of feminine products
💊 to help users avoid unwanted online search histories 🔒. This
is the project we worked on at DeltaHacks 2020. Check it out
below 👇.
</p>
<a class="readMore" href="http://shecares.space/" target="_blank"
>Read More</a
>
</div>
</div>
</div>
<div class="card">
<div class="card-header face1 face" id="headingThree">
<h5 class="mb-0">
<button
class="btn btn-link collapsed"
data-toggle="collapse"
data-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
<div class="pro-content">
<img src="Images/budget.png" alt="Budget App" />
</div>
</button>
</h5>
</div>
<div
id="collapseThree"
class="face face2 collapse"
aria-labelledby="headingThree"
data-parent="#accordion"
>
<div class="card-body pro2-content">
<p>
I worked in a team of three 👨👩👧 at Hack the Valley 2020 to create
a personal finance mobile application 📱 aimed at help students
budget 💸 more consciously. We used Xamarin.Forms with C#, and
MySQL to develop the app for various platforms. Feel free to
take a look below 👇.
</p>
<a
class="readMore"
href="https://github.com/aninibread/BudgetBud"
target="_blank"
>Read More</a
>
</div>
</div>
</div>
</div>
<h2 class="work-header">Design Projects ✒️</h2>
<div class="projects-container" id="accordion">
<div class="card">
<div class="card-header face1 face" id="headingFour">
<h5 class="mb-0">
<button
class="btn btn-link collapsed"
data-toggle="collapse"
data-target="#collapseFour"
aria-expanded="false"
aria-controls="collapseFour"
>
<div class="pro-content">
<img src="Images/ArthoPouch.png" alt="Budget App" />
</div>
</button>
</h5>
</div>
<div
id="collapseFour"
class="face face2 collapse"
aria-labelledby="headingFour"
data-parent="#accordion"
>
<div class="card-body pro2-content">
<p>
In my design class, we were given the prompt "Instrumental
Activities of Daily Living" 🦯. My group created a wallet for
those with arthritis. Throughout the term, we completed weekly
design 📐 deliverables. In the end we were able to create a 3-D
printed 🖨️ medium fidelity product. See a summary below 👇.
</p>
<a
class="readMore"
href="https://docs.google.com/presentation/d/18-4eO7u8vTR5nOadQsPnGCO92_k-w0VavuI-sudfFDo/edit?usp=sharing"
target="_blank"
>Read More</a
>
</div>
</div>
</div>
<div class="card">
<div class="card-header face1 face" id="headingFive">
<h5 class="mb-0">
<button
class="btn btn-link collapsed"
data-toggle="collapse"
data-target="#collapseFive"
aria-expanded="false"
aria-controls="collapseFive"
>
<div class="pro-content">
<img src="Images/wabbit.png" alt="Budget App" />
</div>
</button>
</h5>
</div>
<div
id="collapseFive"
class="face face2 collapse"
aria-labelledby="headingFive"
data-parent="#accordion"
>
<div class="card-body pro2-content">
<p>Designed and 3-D printed a 3-D puzzle 🧩 that is able to be built into both a
wolf 🐺 and a rabbit 🐇 for BME101L. I was able to conceive
the design on paper. My group members and I were
able to reproduce it on CAD through proportioning 📏. See our presentation poster ❤️</p>
<a
class="readMore"
href="https://drive.google.com/file/d/1NPLFxUa5TWZA42Gr7IM0Sf2_iHSJW6oO/view?usp=sharing"
target="_blank"
>Read More</a
>
</div>
</div>
</div>
<div class="card">
<div class="card-header face1 face" id="headingSix">
<h5 class="mb-0">
<button
class="btn btn-link collapsed"
data-toggle="collapse"
data-target="#collapseSix"
aria-expanded="false"
aria-controls="collapseSix"
>
<div class="pro-content">
<img src="Images/CADPort.png" alt="Budget App" />
</div>
</button>
</h5>
</div>
<div
id="collapseSix"
class="face face2 collapse"
aria-labelledby="headingSix"
data-parent="#accordion"
>
<div class="card-body pro2-content">
<p>After learning fundamentals from my first year design course 👩🏫,
I was able to design some fun and funky objects on SolidWorks.
From planes 🛫 to buildings 🏗️, I had a lot of fun meshing my artistic
and techincal sides. Check out my CAD Portfolio below. 🖥️📗</p>
<a
class="readMore"
href="https://drive.google.com/drive/folders/1m-X_FqI-D3_LOiFrO3ihTjEJnPdaLILf?usp=sharing"
target="_blank"
>Read More</a
>
</div>
</div>
</div>
</div>
<div class="experiences-area" id="Experiences">
<h1 class="experiences-header">My Experiences 🌻</h1>
<h2 class="work-header">Work Experiences ⚙️</h2>
<div class="experiences-container">
<div class="box work">
<div class="content">
<h3>🔬 BioEng Lab Assistant 🧬</h3>
<img src="Images/York.jpg" alt="YorkU internship" />
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" id="pop1" onclick="togglePopup(this.id)">
×
</div>
<h1>My introduction to Biomedical Engineering</h1>
<p>
In the summer of 2018 ⛱️, I had the opportunity to work with
<a
href="https://lassonde.yorku.ca/users/sboakyey"
target="_blank"
>Dr. Solomon Boakye-Yiadom</a
>
in the Advanced Materials and Impact Biomechanics Lab at York
University 🔬. At the lab, I completed a report on "The
effects of heat treatment on biomechanical titanium used in
implants". Since then, I've always carried a facination for
biomed eng and material science 🧫. This position is also one
of the key reasons for why I chose my major 👩🎓.
</p>
</div>
</div>
<p class="subheading-pop">
My introduction to Biomedical Engineering
</p>
<a
id="pop1"
class="readMore popupButton"
onClick="togglePopup(this.id)"
>Read More</a
>
</div>
</div>
<div class="box work">
<div class="content">
<h3>💽 Software Developer 💻</h3>
<img src="Images/Teranet.jpg" alt="Software Developer internship" />
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" id="pop2" onclick="togglePopup(this.id)">
×
</div>
<h1>An internship in a COVID Era</h1>
<p>
My first Co-op at UWaterloo was done remotely at
<a href="https://www.teranet.ca/" target="_blank">Teranet</a>
🖥️, a fintech company 💸, as a Software Developer. The
experience was amazing. Everyone was very supportive of me,
and let me bombard them with questions ❓. I gained a lot fo
insight on large-scale relational databases 📁 and learned how
to implement SOLID/other computer science principles. I
couldn't have asked for a better experience 👩💻.
</p>
</div>
</div>
<p class="subheading-pop">An internship in a COVID Era</p>
<a id="pop2" class="readMore" onClick="togglePopup(this.id)"
>Read More</a
>
</div>
</div>
<div class="box work">
<div class="content">
<h3>Biomaterials Research Assistant</h3>
<img
src="./Images/uwaterloolab.png"
alt="Biomaterial Research Assistant"
/>
<div class="popup" id="popup-3">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" id="pop3" onclick="togglePopup(this.id)">
×
</div>
<h1>Tickling My Science Bone</h1>
<p>
I participated as a undergraduate researcher 🧬 at Professor
Thomas Willett's
<a
href="https://uwaterloo.ca/waterloo-composite-biomaterial-systems-lab/"
target="_blank"
>Composite Biomaterial Systems Laboratory.
</a>
🦴 In this position, I worked on synthezing and 3-D printing novel synthetic bone material. My main duty was to analyze the mechanical properties of these bones through various material testing methods. I will be back to work with Prof Willett and Dr. Mondal again in Spring 2021 🌼!
</p>
</div>
</div>
<p class="subheading-pop">Tickling My Science Bone</p>
<a id="pop3" class="readMore" onClick="togglePopup(this.id)"
>Read More</a
>
</div>
</div>
<div class="box work">
<div class="content">
<h3>Software Engineer</h3>
<img
src="./Images/Wish.jpg"
alt="Biomaterial Research Assistant"
/>
<div class="popup" id="popup-4">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" id="pop4" onclick="togglePopup(this.id)">
×
</div>
<h1>🌠 A Wish Upon a Star 🌠</h1>
<p>
I am beyond excited to join the Wish 🧞 Marketplace and Logisitics Team this coming year as a Software Engineer Intern. Can't wait!
</p>
</div>
</div>
<p class="subheading-pop">🌠 A Wish Upon A Star 🌠</p>
<a id="pop4" class="readMore" onClick="togglePopup(this.id)"
>Read More</a
>
</div>
</div>
</div>
<h2 class="vol-header">Other Experiences 🌈</h2>
<div class="other-experiences-container">
<div class="box">
<div class="content">
<h3>✨ SJMF Youth 2019</h3>
<p>👔 President</p>
<p>📍 La Ciénaga</p>
<p class="description">
Second volunteer trip to the Dominican Republic to help build 🏠
homes for those in need
</p>
<img src="Images/SJMF2019.jpg" alt="SJMF 2019" />
<a
class="rainbow readMore"
href="https://www.sjmf.ca/"
target="_blank"
>Read More
</a>
</div>
</div>
<div class="box">
<div class="content">
<h3>✨ SJMF Youth 2018</h3>
<p>👔 Vice President</p>
<p>📍 La Ciénaga</p>
<p class="description">
Fundraised year round for building material fees. Travelled to the
Dominican Republic 🌴 to help construct the house.
</p>
<img src="Images/SJMF2018.jpg" alt="SJMF 2018" />
<a class="readMore" href="https://www.sjmf.ca/" target="_blank"
>Read More</a
>
</div>
</div>
<div class="box">
<div class="content">
<h3>🤖 Robotics Team</h3>
<p>👔 Media Sub-team Lead</p>
<p>📍 4914 Panthers</p>
<p class="description">
Led the media team to document team progress and manage the team's
social media
</p>
<img src="Images/Robotics.jpg" alt="Robotics" />
<a
class="readMore"
href="https://team4914.github.io/web-design/VPCI-Robotics-Website-master/basic/"
target="_blank"
>Read More</a
>
</div>
</div>
<div class="box">
<div class="content">
<h3>🤖 LEGO Robotics</h3>
<p>👔 Volunteer</p>
<p>📍 Holland Bloorview Kids Hospital</p>
<p class="description">
Helped run 🧱 LEGO Robotics programs for other kids passionate
about robotics
</p>
<img src="Images/HBRobotics.jpg" alt="Robotics HB" />
<a
class="readMore"
href="https://hollandbloorview.ca/services/programs-services/robotics"
target="_blank"
>Read More</a
>
</div>
</div>
<div class="box">
<div class="content">
<h3>🏑 Girl's Field Hockey</h3>
<p>👔 Co-Captain</p>
<p>📍 Victoria Park C.I.</p>
<p class="description">
Co-led the 👧 girl's field hockey team with two of my friends at
Victoria Park C.I. from 2017-2018
</p>
<img src="Images/fieldhockey.jpg" alt="field hockey" />
<a
class="readMore"
href="https://twitter.com/vicparkci?lang=en"
target="_blank"
>Read More</a
>
</div>
</div>
<div class="box">
<div class="content">
<h3>🏑 Curling Team</h3>
<p>👔 Captain</p>
<p>📍 Victoria Park C.I.</p>
<p class="description">
Led the girls and co-ed curling team from 2016-2018. 🥇 Won 1 gold
and 2 bronze metals in city-wide competition.
</p>
<img src="Images/Curling2018.jpg" alt="curling" />
<a
class="readMore"
href="https://twitter.com/vicparkci?lang=en"
target="_blank"
>Read More</a
>
</div>
</div>
</div>
</div>
<script src="Scripts/SimpleStateManager-master/dist/ssm.min.js"></script>
<script src="Scripts/reactNav.js"></script>
<footer id="Contacts">
<h5>You've reached the end!</h5>
<p>Updated: Dec 2020</p>
<p>Visit me on other platforms:</p>
<div class="wrapper">
<ul
class="social-icons icon-circle icon-zoom list-unstyled list-inline"
>
<li>
<a href="https://github.com/aninibread/" target="_blank"
><i class="fa fa-github-alt"></i
></a>
</li>
<li>
<a href="https://www.linkedin.com/in/anniwang44/" target="_blank"
><i class="fa fa-linkedin"></i
></a>
</li>
<li>
<a href="mailto:anniwang44@gmail.com" target="_blank"
><i class="fa fa-envelope"></i
></a>
</li>
<!-- <li>
<a
href="https://drive.google.com/file/d/11eEUWMrFCqzUUHBHpyUYlphMAd31tFwY/view?usp=sharing"
target="_blank"
><i class="fa fa-file-pdf"></i
></a>
</li> -->
</ul>
</div>
</footer>
</body>
</html>