-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
384 lines (342 loc) · 17.7 KB
/
portfolio.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
<link rel="stylesheet" href="assets/css/templatemo-style.css">
<noscript>
<link rel="stylesheet" href="assets/css/noscript.css" />
</noscript>
<link id="google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alata:400">
</head>
<body>
<header id="header">
<a href="/" class="logo"><img src="images/logo.png" alt="Emily Wang" /></a>
<nav id="nav">
<ul>
<li><a href="about.html">About</a></li>
<li class="current">
<a href="portfolio.html">Portfolio</a>
</li>
<li><a href="assets/resume.pdf">Resume</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div style="text-align: center; padding-bottom: 5em;">
</div>
<div style="text-align: center; padding-bottom: 1em;">
<h1>My Work</h1>
</div>
<div class="container-fluid tm-container-content tm-mt-60">
<div class="row tm-mb-90 tm-gallery">
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
<figure class="effect-ming tm-video-item">
<img src="images/mongodb_logo.png" alt="Image" class="img-fluid">
<figcaption class="d-flex align-items-center justify-content-center" id="mongodb-btn">
<h2>View</h2>
<!--<a href="photo-detail.html">View more</a>-->
</figcaption>
</figure>
<div class="d-flex justify-content-between tm-text-gray">
<span class="tm-text-gray-light">Summer 2022</span>
<span>SWE Intern</span>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
<figure class="effect-ming tm-video-item">
<img src="images/intersystems.jpg" alt="Image" class="img-fluid">
<figcaption class="d-flex align-items-center justify-content-center" id="intersystems-btn">
<h2>View</h2>
</figcaption>
</figure>
<div class="d-flex justify-content-between tm-text-gray">
<span class="tm-text-gray-light">Summer 2021</span>
<span>SWE Intern</span>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
<figure class="effect-ming tm-video-item">
<img src="images/coalescence_logo.png" alt="Image" class="img-fluid">
<figcaption class="d-flex align-items-center justify-content-center" id="coalescence-btn">
<h2>View</h2>
</figcaption>
</figure>
<div class="d-flex justify-content-between tm-text-gray">
<span class="tm-text-gray-light">Spring 2022</span>
<span>CoalescenceML</span>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
<figure class="effect-ming tm-video-item">
<img src="images/compiler_logo.png" alt="Image" class="img-fluid">
<figcaption class="d-flex align-items-center justify-content-center" id="compiler-btn">
<h2>View</h2>
</figcaption>
</figure>
<div class="d-flex justify-content-between tm-text-gray">
<span class="tm-text-gray-light">Spring 2023</span>
<span>Course Project</span>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
<figure class="effect-ming tm-video-item">
<img src="images/eastbanc_logo.png" alt="Image" class="img-fluid">
<figcaption class="d-flex align-items-center justify-content-center" id="eastbanc-btn">
<h2>View</h2>
</figcaption>
</figure>
<div class="d-flex justify-content-between tm-text-gray">
<span class="tm-text-gray-light">Summer 2020</span>
<span>SWE Intern</span>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
<figure class="effect-ming tm-video-item">
<img src="images/krasnow_logo.png" alt="Image" class="img-fluid">
<figcaption class="d-flex align-items-center justify-content-center">
<h2>View</h2>
</figcaption>
</figure>
<div class="d-flex justify-content-between tm-text-gray">
<span class="tm-text-gray-light">Summer 2019</span>
<span>Research Intern</span>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
<figure class="effect-ming tm-video-item">
<img src="images/rapstudy_logo.png" alt="Image" class="img-fluid">
<figcaption class="d-flex align-items-center justify-content-center">
<h2>View</h2>
</figcaption>
</figure>
<div class="d-flex justify-content-between tm-text-gray">
<span class="tm-text-gray-light">Spring 2021</span>
<span>Web Developer</span>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
<figure class="effect-ming tm-video-item">
<img src="images/pokerbot_logo.png" alt="Image" class="img-fluid">
<figcaption class="d-flex align-items-center justify-content-center">
<h2>View</h2>
</figcaption>
</figure>
<div class="d-flex justify-content-between tm-text-gray">
<span class="tm-text-gray-light">Fall 2021</span>
<span>PokerBot</span>
</div>
</div>
</div> <!-- row -->
</div> <!-- container-fluid, tm-container-content -->
<div id="mongodb-modal" class="modal-portfolio">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="modal-header">Abstract Binding Tree @ MongoDB</div>
<div class="modal-paragraph">MongoDB's query optimizer is classically a
heuristics-based optimizer. What does this mean? This means when you get a query
like this: </div>
<img src="images/mongodb-example.png" alt="" style="width: 40%;
height: auto; align-self: center;
" />
<div class="modal-paragraph">
MongoDB matches the steps of the query and does some optimizations like
switching steps, choosing indexes, and other canonical optimizations that usually
will make the query faster.
The Abstract Binding Tree, on the other hand, aims to create a new form of query
representation that allows queries to go through a
dynamic-programming based optimizer!
</div>
<div class="modal-paragraph">
On this project, I worked on three components: I implemented <i>$project functionality</i>
in the new query optimizer. Secondly, I implemented <i>type-bracketing</i> essential to
greater-than and less-than queries. Lastly, I designed and implemented translating
<i>$in expressions</i>
in MQL; this took the size of the generated query tree from O(n)-sized tree to O(1)!
</div>
<div class="modal-paragraph">All of this was done in C++. On top of learning about
databases, C++, and better programming, I learned about build systems, continuous
integrations and continuous deployment (CI/CD), and more.</div>
<div class="modal-paragraph modal-link"> <a target="_blank" rel="noopener noreferrer"
href="https://github.com/mongodb/mongo/tree/master/src/mongo/db/pipeline/abt">
Go To Project
Repository</a>
</div>
</div>
</div>
<!-- intersystems -->
<div id="intersystems-modal" class="modal-portfolio">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="modal-header">Intelligent Chart Review @ InterSystems</div>
<p class="modal-paragraph">Intelligent Chart Review is a product that tackles a
multi-million dollar problem for physicians: surprisingly large amounts of time is
spent on chart review and chart data entry, rather than research or seeing patients.
Intelligent Chart Review seeks to make chart operations <strong>faster</strong> and more
<b>automated</b>
using Natural Language Processing features!
</p>
<iframe width="420" height="315" style="align-self: center;"
src="https://www.youtube.com/embed/1y31u1Z1mp0">
</iframe>
<p class="modal-paragraph">
Physicians are able to upload charts for multiple patients, and review each patient
in quick succession while analyzing them for the same medical data. Chart review is
dictated by the template creator - <i>this was created by me</i>!
</p>
<p class="modal-paragraph">
On this project, I worked on three major components: I created from the ground up
the
chart review template creator. Secondly, I refactored and rebuilt the Intelligent
Chart Review
underlying database structure for enforced foreign keys and optimized querying.
Lastly, I immplemented fuzzy search (Levenshtein distance) using the iKnow package
to help populate terms for NLP analysis.
As a result, Intelligent Chart Review was taken to a stage of viability in which it
was presented to <b>two corporate clients</b> by the end of the summer.
</p>
<p class="modal-paragraph">All of this was project was completed in Angular,
Typescript, and InterSystem's proprietary language. On top of learning about
databases, web development, and design, I learned a <b>propietary language</b> at-depth in
a two-week training program.</p>
<p class="modal-paragraph modal-link"> <a target="_blank" rel="noopener noreferrer"
href="https://www.youtube.com/watch?v=1y31u1Z1mp0&ab_channel=InterSystemsDevelopers">
Link To Demo</a>
</p>
</div>
</div>
<div id="coalescence-modal" class="modal-portfolio">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="modal-header">CoalescenceML @ Cornell Data Science</div>
<p class="modal-paragraph">Machine Learning these days very often does not escape the
Jupyter Notebook. There are a large number of steps, and many different tools that Machine Learning
Engineers must familiarize themselves with to put a machine learning model intor production. We aimed to
launch an
open-source MLOps framework to develop
industry-grade production ML pipelines, all for a data scientist to work with in <i>one place</i>! </p>
<iframe src="https://drive.google.com/file/d/13uOeuy_M1ywMyTaTSBPpoxyPNeMVv1s8/preview" width="400"
height="300" allow="autoplay" style=" align-self: center;"></iframe>
<p class="modal-paragraph">
CoalescenceML v0.5.1 was launched in Spring of 2022, and although is no longer supported, was a large
learning experience! This sparked my passion for work with true impact; the ability to deploy an
application is an underrated but exceedingly important skill.
</p>
<img src="images/coalescence_img.png" alt="" style="width: 40%;
height: auto; align-self: center;
" />
<div class="modal-paragraph modal-link"> <a target="_blank" rel="noopener noreferrer"
href="https://pypi.org/project/coalescenceml/">
See the PyPI package here!</a>
</div>
</div>
</div>
<div id="compiler-modal" class="modal-portfolio">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="modal-header">Compilers (CS4120) @ Cornell</div>
<p class="modal-paragraph">
This course offers an introduction to topics like lexical
scanning, parsing, type checking, code generation and
translation, an introduction to optimization, and compile-time and run-time support for modern
programming languages. </p>
<p class="modal-paragraph">
Currently I am building a fully-working compiler in C++ for the course-specified language Eta!
</p>
<div class="modal-paragraph modal-link">
<a target="_blank" rel="noopener noreferrer" href="https://www.cs.cornell.edu/courses/cs4120/2023sp/">
Link to Course
</a>
</div>
</div>
</div>
<div id="eastbanc-modal" class="modal-portfolio">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="modal-header">TransitIQ @ EastBanc Technologies</div>
<img src="images/transitiq.png" alt="" style="width: 80%;
height: auto; align-self: center;
" />
<p class="modal-paragraph">
More info coming soon! </p>
<div class="modal-paragraph modal-link">
<a target="_blank" rel="noopener noreferrer" href="https://transitiq.com/#what-is-transitiq">
View the project here.
</a>
</div>
</div>
</div>
<footer id="footer">
<div class="inner">
<ul class="copyright">
<li>© 2023 Emily Wang</li>
</ul>
</div>
</footer>
<script src="assets/js/plugins.js"></script>
<script>
$(window).on("load", function () {
$('body').addClass('loaded');
});
</script>
<script>
var close_spans = document.getElementsByClassName("close");
var mongodb_modal = document.getElementById("mongodb-modal");
var intersystems_modal = document.getElementById("intersystems-modal");
var coalescence_modal = document.getElementById("coalescence-modal");
var compiler_modal = document.getElementById("compiler-modal");
var east_modal = document.getElementById("eastbanc-modal");
// Get the button that opens the modal
var mongodb_btn = document.getElementById("mongodb-btn");
var intersystems_btn = document.getElementById("intersystems-btn");
var coalescence_btn = document.getElementById("coalescence-btn");
var compiler_btn = document.getElementById("compiler-btn");
var east_btn = document.getElementById("eastbanc-btn");
// Get the <span> element that closes the modal
var mongodb_span = close_spans[0];
var intersystems_span = close_spans[1];
var coalescence_span = close_spans[2];
var compiler_span = close_spans[3];
var east_span = close_spans[4];
// When the user clicks on the button, open the modal
mongodb_btn.onclick = function () {
mongodb_modal.style.display = "block";
}
intersystems_btn.onclick = function () {
intersystems_modal.style.display = "block";
}
coalescence_btn.onclick = function () {
coalescence_modal.style.display = "block";
}
compiler_btn.onclick = function () {
compiler_modal.style.display = "block";
}
east_btn.onclick = function () {
east_modal.style.display = "block";
}
mongodb_span.onclick = function () {
mongodb_modal.style.display = "none";
}
intersystems_span.onclick = function () {
intersystems_modal.style.display = "none";
}
coalescence_span.onclick = function () {
coalescence_modal.style.display = "none";
}
compiler_span.onclick = function () {
compiler_modal.style.display = "none";
}
east_span.onclick = function () {
east_modal.style.display = "none";
}
</script>
</body>
</html>