Repository navigation
Expand file tree
/
Copy pathprojects.html
More file actions
512 lines (471 loc) · 22.2 KB
/
Copy pathprojects.html
File metadata and controls
512 lines (471 loc) · 22.2 KB
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
<html>
<head>
<title>Main Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><link href="index.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<link rel="icon" type="image/png" href="logo.png">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300&family=Titillium+Web:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
color: rgba(255, 255, 255, 0.75);
/* font-weight: bold; */
}
.topnav {
background-color: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 1.35vw;
text-decoration: none;
font-size: 1.25vw;
}
.topnav a:hover {
background-color: rgba(255, 255, 255, 0.75);
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.btn {
padding: 14px 24px;
border: 0 none;
font-weight: 700;
text-transform: none;
outline: 0 none;
background: none;
color: #ffffff;
font-size: 50px;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
outline: 0 none;
}
.btn:hover {
background: none;
color: #4CAF50;
}
a:link {
color: white;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: lightgreen;
background-color: transparent;
text-decoration: none;
}
a:active {
color: white;
background-color: transparent;
text-decoration: none;
}
#particles-js{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color: black;
/*2D2E2D*/
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.fa {
font-size: 40px;
text-align: center;
text-decoration: none;
margin: 5px 10px;
color: white;
}
.group:after {
content: "";
display: table;
clear: both;
}
.text {
float: left;
width: 99.9%;
font-size: 1.25vw;
}
.media-links{
font-size: 1.25vw;
}
.images {
float: left;
width: .1%;
padding-bottom: 20px;
}
.panel {
padding-top: 0vw;
padding-bottom: 0vw;
}
.panel-title{
font-weight: bold; margin-left: 25px; margin-right: 25px; font-size: 2.75vw;
}
.panel-body{
margin-left: 25px; margin-right: 40px;
}
.panel-group{
padding-top: 80px;
}
/* Adjustments for smaller screens */
@media screen and (max-width: 767px) {
.topnav {
background-color: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 40px;
display: flex;
justify-content: center; /* Horizontally center the items */
}
.topnav a {
padding: 12px 6px; /* Adjusted padding for smaller screens */
font-size: 12px; /* Adjusted font size for smaller screens */
text-align: center;
}
.fa {
font-size: 30px; /* Adjusted font size for icons on smaller screens */
}
.panel-title{
font-weight: bold; margin-left: 15px; margin-right: 20px;
}
.panel-body{
margin-left: 15px; margin-right: 20px;
}
.panel-title a {
font-size: 18px;
}
.text {
font-size: 14px;
}
.panel-group{
padding-top: 45px;
}
.media-links{
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="topnav sticky-top">
<a href="index.html">Home</a>
<a href="my_resume.pdf" target="_blank">Resume</a>
<a class="active" href="projects.html">Projects</a>
<a href="notes.html">Class Notes</a>
<a href="https://healthy-atom-0ce.notion.site/eaa94e9fa4ba4df1b8737ccb11f42ae7?v=179b9707c07540c3859d557ae8f2850d&pvs=4" target="_blank">Digital Garden</a>
<a href="https://healthy-atom-0ce.notion.site/Travel-Blog-b1f10af7a11d4990bb5cad0808abc790?pvs=4" target="_blank">Travel Blog</a>
</div>
<div id="particles-js" style="position:fixed;width:100%;z-index:-10;"></div>
<script src="particles.js"></script>
<script src="app.js"></script>
<script>
AOS.init();
</script>
<div data-aos="fade-up" data-aos-duration="2000">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse16">
Company Offer Valuation App</a>
<a href="https://share.streamlit.io/mochael/company-salary-valuation/main.py" class="fa fa-money"></a>
</div>
</div>
<div id="collapse16" class="panel-collapse collapse in">
<div class="panel-body">
<div class="group">
<div class="text">
When I was interviewing in January 2022, I received offers from a mix of public and private companies at different stages of funding. I found it incredibly difficult to compare the offers between public companies that were offering RSUs (restricted stock units) and private companies that were giving me stock options, so I decided to build this app that would help me better understand and compare my offers.
The app generates a breakdown of salary and taxes by year given your projected growth of the company. Feel free to play around with it and see how much you would make if your company quintuples in value!
</div>
<div class="images">
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse15">
Databased Perspectives</a>
<a href="https://www.databasedperspectives.com/" class="fa fa-bar-chart"></a>
</div>
</div>
<div id="collapse15" class="panel-collapse collapse in">
<div class="panel-body">
<div class="group">
<div class="text">
Frustrated with the bias, data inaccessiblity, and pedantic nature of current political statistical analyses, Kodi Obika and I worked together to create a website that provides a dataset repository of collated open source political data and also straightforward statistical analysis of current events and politics using this data.
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse14">
Whim</a>
<a href="https://whim.so/" class="fa fa-sticky-note"></a>
</div>
</div>
<div id="collapse14" class="panel-collapse collapse in">
<div class="panel-body" >
<div class="group">
<div class="text">
Whim is a note taking web app designed to support the way our brains organize data and make connections between ideas. I am currently developing Whim with Tanishq Kancharla, and we have an early read-only version of the webapp published at whim.so.
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse13" >
Notion Slides</a>
<a href="https://chrome.google.com/webstore/detail/notion-slide-shows/hmcfamnbfmaaogikhpkmgkanecnkpkpa?hl=en&authuser=0" class="fa fa-chrome" ></a>
</div>
</div>
<div id="collapse13" class="panel-collapse collapse in">
<div class="panel-body" >
<div class="group">
<div class="text">
Notion Slides is a google chrome extension that allows users to navigate notion databases in a slide show. Tanishq Kancharla and I were frustrated by the clunkiness of popular slide show creation tools like Powerpoint and Google Slides and wanted to tweak some of the limitations imposed by these tools. We adapted Notion's clean and minimialistic UI to support creating slide shows in a way that was consistent with our design principles: slides are not limited in the amount of content they can show, content like youtube videos and websites can be embedded within a slide, and formatting is automatic with markdown. Unfortunately the way the chrome extension operates is not ideal since Notion was not desiged to support slide shows, nonetheless I think the chrome extension is a step forward in how slide shows should be built and designed.
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse12" >
Time Varying Graphs with NOTEARS</a>
</div>
</div>
<div id="collapse12" class="panel-collapse collapse in">
<div class="panel-body" >
<div class="group">
<div class="text">
I worked with Maxwell Wang, Wuwei Lin, and Chang Shi to adapt an existing DAG structure estimation algorithm called NOTEARS to time series data.
</div>
<div class="media-links">
<a href="videos/10708project.pdf">↗ Link to paper</a> <br>
<a href="https://www.youtube.com/embed/RDtl45kxzUE">↗ Video explanation</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse11" >
Optimal Treatent Regimes</a>
</div>
</div>
<div id="collapse11" class="panel-collapse collapse in">
<div class="panel-body" >
<div class="group">
<div class="text">
I wrote a report reviewing recent literature on optimal treatment regimes in the causal inference community.
</div>
<div class="media-links">
<a href="videos/Causal_Inference_Final.pdf">↗ Link to paper</a> <br>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse10" >
Song Year Prediction</a>
<a href="https://github.com/tklightningfast/10701SongProject" class="fa fa-github" ></a>
</div>
</div>
<div id="collapse10" class="panel-collapse collapse in">
<div class="panel-body" >
<div class="group">
<div class="text">
I worked with Tanishq Kancharla to build a regression model that would predict the year a song was released just based on some of the song's musical factors and some of its lyrics.
We determined that predictive ability of the lyrics was much worse than the musical factors for a given song. Our final paper is shown below.
</div>
<div class="media-links">
<a href="videos/10701FinalProject.pdf">↗ Link to paper</a> <br>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3" >
Website Prototyping System</a>
<a href="https://github.com/CandiaGu/PennAppsF18" class="fa fa-github" ></a>
</div>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body" >
<div class="group">
<div class="text">
I worked with Bradley Zhou, Candia Gu, and Aditi Hebbar to build an app that would automatically create html code from drawings on a sheet of paper.
The user of our application would place their phone on top of an acrylic mount and load our mobile app that we created using React Native.
The app would continuously take snapshots of a sheet of paper where they would draw the website layout in real time and then transmit these images into HTML.
We used OpenCV to extract and differentiate between meaningful components (such as text and images) from the drawing and turn them into HTML.
We then sent the HTML to be rendered and displayed on a website via a Flask API.
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4" >
Automated Logo Generator</a>
<a href="https://github.com/Mochael/Automated-Logo-Generator" class="fa fa-github" ></a>
</div>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body" >
<div class="group">
<div class="text">
I worked with Evann Wu, Ka Chun Cheung, and Tanishq Kancharla to build an app that would take in an image from a user, as well as certain visual preferences, and automatically output a logo based on their input.
We first used Microsoft Azure to extract interesting features from the input image (such as color, items in the background, etc.) that would influence the generated logo design. We then used Adobe Illustrator's Javascript API to manipulate the user's input image based on their preferences and the data extracted from the image using Microsoft Azure's API.
We also use this data to generate a brand name for the logo.
Once we have the manipuated image and brand name our code determines a pleasing way to orient them and outputs a logo.
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5" >
Professor Doppleganger</a>
<a href="https://github.com/Mochael/ProfessorDoppleganger" class="fa fa-github" ></a>
</div>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body" >
<div class="group">
<div class="text">
I worked with Evann Wu and Tanishq Kancharla to create a website using Django that would take in an image url and match it with a CMU professor who looked the most similar to the individual in the given picture.
We used the Microsoft Azure API to extract traits from the input image and then matched the image with the person who had the most similar traits in CMU's faculty database.
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6" >
Intellichess</a>
<a href="https://github.com/Mochael/Chess-Game" class="fa fa-github" ></a>
</div>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<div class="group">
<div class="text">
This was the final project for my introductory programming class at CMU, 15-112.
This project introduced me to machine learning, and it was one of the major reasons why I switched majors from business to statistics and machine learning. For this project, I developed a fully functioning chess game using python. The game's main modes were: competitive and multiplayer.
In the competitive mode I developed a chess AI that used a minimax search algorithm to iterate through possible game states and a neural network that scored each board that would be encountered with the minimax search.
I trained my neural network to match the board evaluations given by the famous chess engine Stockfish, using a database of grandmaster games in .pgn formatting. I made the neural network entirely by myself (without a library), so it was not very skilled at playing chess and was pretty slow at making a decision.
I used sockets to implement multiplayer in the game.
</div>
<div class="media-links">
<a href="https://www.youtube.com/embed/_CEE_5XILdA">↗ Video explanation</a> <br>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse7" >
GunAR</a>
<a href="https://github.com/Mochael" class="fa fa-github" ></a>
</div>
</div>
<div id="collapse7" class="panel-collapse collapse">
<div class="panel-body" >
<div class="group">
<div class="text">
I worked with Alex Li, Evann Wu, and Tanishq Kancharla to develop GunAR for CMU's Build18 competition.
The goal of the project was to develop a laser tag game that used computer vision to identify when you had been shot. The user would mount their phone on top of our toy gun, and when the trigger was pressed, a bluetooth signal would be sent to the user's phone through our mobile app.
If that person's target was displayed within a certain area on the phone's camera then the shot would register as a hit.
We had a competitive mode where players could play against each other and a single player mode where virtual reality targets were spawned for the user to shoot at.
Unfortunately we ran out of time to complete the project and put together all of the project's different components, but the experience was quite fun, and it inspired me to take Introduction to Electrical and Computer Engineering.
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse9" >
Muon Scattering Tomography</a>
</div>
</div>
<div id="collapse9" class="panel-collapse collapse in">
<div class="panel-body">
<div class="group">
<div class="text">
I worked with Trevor Daino and Arpad Voros to design a new way to detect the trajectory of high energy muon particles for the purposes of muon tomography. We had read a few papers about how vaccuum tubes were being used to measure the trajectory of muons to capture images of materials.
We were fascinated by the new technology and reached out to a professor to learn more about building our own muon tomography device. We crafted a design and he told us it would cost over a million dollars!
So we scrapped the design and set out to build a new device to use muonss for imaging, that would be within our price range of a few hundred dollars.
Our idea was to have 4 layers of plastic scintillators, each paired with a silicon photomultiplier array, to triangulate the muon's position at each layer. Then we could use the change in positions from layer to layer to find the muon's trajectory.
We planned to put an object in the middle of the device (between two top layers and two bottom layers) so that we could measure the deflection of the muon after penetrating through the object (by comparing the muon's trajectory before and after hitting the object).
We worked every day after school for months designing, soldering, and sawing in my friend's garage to create a working model. We tested our protoype using UV light and built a muon scattering simulation for a scaled up version of the device in java and matlab.
Eventually we presented our findings at the Intel International Science and Engineering Fair (ISEF) where we placed 3rd in the Physics and Astronomy category!
You can learn more about what we built from <a href="https://www.triwnews.com/featured/marvin-ridge-high-seniors-win-third-place-in-international-science-competition/">this article</a> in the local paper. Also, the poster we displayed at ISEF is shown below!
</div>
<div class="media-links">
<a href="videos/IntelAwards.mp4">↗ Video of award ceremony</a> <br>
<a href="videos/isef_leftPanel.pdf">↗ Poster write up left panel</a> <br>
<a href="videos/isef_middlePanel.pdf">↗ Poster write up middle panel</a> <br>
<a href="videos/isef_rightPanel.pdf">↗ Poster write up right panel</a> <br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>