-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
406 lines (397 loc) · 31.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" content="max-age=31536000" />
<title>Mark Cui Pan</title>
<meta property="og:title" content="Mark Cui Pan" />
<meta property="og:description" content="Hi, I'm Mark Cui Pan. I'm a web developer and entrepreneur." />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://markcuipan.com/assets/img/preview.png" />
<meta property="og:url" content="https://markcuipan.com/" />
<!-- <meta property="fb:admins" content=""> -->
<meta property="fb:app_id" content="1344458722327567" />
<meta name="description" content="Hi, I'm Mark Cui Pan. I'm a web developer and entrepreneur." />
<meta name="author" content="Mark Cui Pan" />
<meta property="article:author" content="https://www.facebook.com/markcuipan" />
<meta property="article:publisher" content="https://www.facebook.com/markcuipan" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="image_src" href="https://markcuipan/assets/img/preview.png" />
<link rel="shortcut icon" href="https://markcuipan.com/assets/img/favicon/favicon.png" type="image/png" />
<link rel="author" href="https://github.com/factcondenser" />
<link rel="canonical" href="https://markcuipan.com/" />
<style>html, body {height: 100%;width: 100%;}.vert-text {color: #fff;display: table-cell;vertical-align: middle;text-align: center;opacity: .9 }.vert-text h1 {padding: 0;margin: 0;font-size: 4.5em;font-weight: 700;text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3) }.icon {opacity: .4;color: #fff }.icon:hover {opacity: .8;}i.fa-linkedin:hover {color: #0077b5 }i.fa-github:hover {color: #333 }i.fa-quora:hover {color: #A20 }i.fa-envelope:hover {color: #0072C6 }.tooltip-inner {background: 0;color: #fff;opacity: .6 }.dp {height: 240px;width: 240px;border-radius: 100%;margin-top: -60px;border: 3px solid #fff }.lead a {color: #09d }.lead a.audio-clip {color: #fff;opacity: .6 }.lead a.audio-clip:hover {text-decoration: none;color: #ddd;opacity: 1.0 }#sidebar-wrapper {margin-right: -250px;right: 0;width: 250px;background: #000;position: fixed;height: 100%;overflow-y: auto;z-index: 1000;-webkit-transition: all .4s ease 0;-moz-transition: all .4s ease 0;-ms-transition: all .4s ease 0;-o-transition: all .4s ease 0;transition: all .4s ease 0 }.sidebar-nav {position: absolute;top: 0;width: 250px;list-style: none;margin: 0;padding: 0 }hr {border-color: #ddd;}.sidebar-nav hr {border-color: #aaa;margin-left: 5%;width: 45%;}.sidebar-nav li {line-height: 40px;text-indent: 20px }.sidebar-nav li a {color: #999;display: block;text-decoration: none }.sidebar-nav li a:hover {color: #fff;background: rgba(255, 255, 255, 0.2);text-decoration: none }.sidebar-nav li a:active, .sidebar-nav li a:focus {text-decoration: none }.sidebar-nav>.sidebar-brand {height: 55px;line-height: 55px;font-size: 18px }.sidebar-nav>.sidebar-brand a {color: #999 }.sidebar-nav>.sidebar-brand a:hover {color: #fff;background: 0 }.sidebar-special {font-size: 20px }#menu-toggle {top: 0;right: 0;position: fixed;z-index: 1;color: #fff;text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);border-radius: 10px;-webkit-transition: all .3s ease 0;-moz-transition: all .3s ease 0;-ms-transition: all .3s ease 0;-o-transition: all .3s ease 0;transition: all .3s ease 0 }#menu-toggle:hover {border: 1px solid #999;background-color: rgba(0, 0, 0, 0.1) }#sidebar-wrapper.active {right: 250px;width: 250px;-webkit-transition: all .4s ease 0;-moz-transition: all .4s ease 0;-ms-transition: all .4s ease 0;-o-transition: all .4s ease 0;transition: all .4s ease 0 }.toggle {margin: 5px 5px 0 0 }#menu-close.toggle-override {color: rgba(255, 255, 255, 0.4);border-radius: 10px;background-color: #222;border-color: rgba(255, 255, 255, 0.4) }#menu-close.toggle-override:hover {color: #fff;background-color: #333 }.location-label {color: #fff;opacity: .1;bottom: 10px;left: 20px;position: absolute;}.header {display: table;height: 100%;width: 100%;position: relative;}.img-src {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-attachment: fixed;background-repeat: no-repeat;background-position: center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;z-index: -10;background-color: #222;background-image: url('../assets/img/Madison0/bg0-blur.jpg') }.scroll-img {opacity: 0;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-image: url('../assets/img/Madison0/bg0.jpg') }@media(max-width:767px) {.img-src {background-attachment: scroll }}
</style>
<noscript id="deferred-styles">
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link type="text/css" href="./assets/css/shared.min.css" rel="stylesheet">
<link type="text/css" href="./assets/css/main.min.css" rel="stylesheet">
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function() {
window.setTimeout(loadDeferredStyles, 0);
});
else window.addEventListener('load', loadDeferredStyles);
</script>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="https://markcuipan.com/img/favicon/favicon180.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://markcuipan.com/img/favicon/favicon152.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://markcuipan.com/img/favicon/favicon120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://markcuipan.com/img/favicon/favicon76.png" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Mark Cui Pan",
"url": "https://www.markcuipan.com/",
"sameAs": [
"https://www.facebook.com/markcuipan",
"https://www.linkedin.com/in/markcuipan",
"https://twitter.com/markcuipan",
// "https://youtube.com/markcuipan",
"https://github.com/factcondenser"
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Mark Cui Pan",
"url": "https://markcuipan.com/"
}
</script>
</head>
<body id="page">
<a id="menu-toggle" href="#" class="btn btn-lg toggle"><i class="fa fa-bars"></i></a>
<div id="sidebar-wrapper">
<ul class="sidebar-nav"><a id="menu-close" href="https://markcuipan.com/#" class="btn btn-default btn-lg pull-right toggle toggle-override"><i class="fa fa-times"></i></a>
<li class="sidebar-brand"><a href="https://markcuipan.com/">Mark Cui Pan</a></li>
<li><a href="./#top">Home</a></li>
<li><a href="./#intro">Intro</a></li>
<li><a href="./#work-header">Work</a></li>
<li><a href="./#projects-header">Projects</a></li>
<li><a href="./#about-header">About</a></li>
<li><a href="./#resume-header">Resume</a></li>
<hr>
<li><a class="sidebar-special" href="https://markcuipan.com/blog/">Blog</a></li>
<li><a class="sidebar-special" href="https://markcuipan.com/autonomy/">Autonomy</a></li>
<li><a class="sidebar-special" href="https://markcuipan.com/tutor/">Tutor</a></li>
</ul>
</div>
<div id="top" class="header">
<h2 class="location-label">Madison, WI</h2>
<div class="img-src"></div>
<div class="img-src scroll-img"></div>
<div class="vert-text"><img class="dp" src="./assets/img/dp0.jpg">
<br>
<h1>Mark</h1>
<p class="lead">Hi! I'm <b><a class="audio-clip" onclick="englishname.playclip()"><i class="fa fa-volume-up"></i> Mark Cui Pan </a></b>. My Chinese name is <b><a class="audio-clip" onclick="chinesename.playclip()"><i class="fa fa-volume-up"></i> 潘子早 </a></b>.</p>
<ul class="list-inline ">
<!-- <li><a title="" class="icon" href="http://www.facebook.com/markcuipan" data-original-title="Facebook"><i class="fa fa-facebook fa-3x"></i></a></li> -->
<li><a title="" class="icon" href="https://github.com/factcondenser" data-original-title="GitHub"><i class="fa fa-github fa-3x"></i></a></li>
<li><a title="" class="icon" href="http://www.linkedin.com/in/markcuipan" data-original-title="LinkedIn"><i class="fa fa-linkedin fa-3x"></i></a></li>
<li><a title="" class="icon" href="https://twitter.com/markcuipan" data-original-title="Twitter"><i class="fa fa-twitter fa-3x"></i></a></li>
<!-- <li><a title="" class="icon" href="http://www.youtube.com/user/markcuipan" data-original-title="YouTube"><i class="fa fa-youtube-play fa-3x"></i></a></li>-->
<!-- <li><a title="" class="icon" href="https://www.quora.com/profile/Mark-Cui-Pan" data-original-title="Quora"><i class="fa fa-quora fa-3x"></i></a></li> -->
<li><a title="" class="icon" href="mailto:[email protected]" data-toggle="tooltip" data-original-title="Email"><i class="fa fa-envelope fa-3x"></i></a></li>
</ul>
<br>
</div>
</div>
<div id="intro" class="intro">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6 text-center">
<h2><i class="fa fa-user fa-3x"></i></h2>
<p class="lead">I'm a self-taught software engineer and entrepreneur.
<br>
<br>I've lived all over the US - in Madison, WI; Austin, TX; Menlo Park, CA; New York, NY - and spent two years in Hong Kong.
<br>One of my favorite hobbies is thinking about <a href="https://www.strongtowns.org/about">human habitat</a>.
<br>
<br>I grew up in <a href="https://en.wikipedia.org/wiki/Wausau,_Wisconsin">Wausau, Wisconsin</a> (<a href="https://www.wpr.org/ginseng-festival-draws-international-visitors-wausau">ginseng capital of the world</a>).
<br>
<br>I gather materials relating to my twin passions of automation and economics on a page called <a href="https://markcuipan.com/autonomy/">Autonomy</a>, and I keep a collection of my written works on my <a href="https://markcuipan.com/blog/">blog</a>.</p>
</div>
</div>
</div>
</div>
<div id="work-header" class="callout work">
<div class="vert-text">
<h1 class="textual-content">Some of the places I've worked...</h1>
</div>
</div>
<div id="work" class="work">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2><i class="fa fa-users fa-3x"></i></h2>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-offset-4 col-md-4 text-center">
<div class="work-item"><a href="https://www.splitwise.com/about"><img class="work-icon enlarge-on-hover" src="./assets/img/work/splitwise.jpg"></a>
<h3>Splitwise<br><small>Oct '22 - present</small></h3>
<p class="lead">Splitwise lets you split expenses with friends. I'm a proud member of the server team.</p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="row">
<div class="col-md-6 text-center">
<div class="work-item"><a href="https://www.meta.com/"><img class="work-icon enlarge-on-hover" src="./assets/img/work/meta.jpg"></a>
<h3>Meta<br><small>Aug '21 - Oct '22</small></h3>
<p class="lead">I hacked on <b><a href="https://www.facebook.com/business/news/announcing-facebook-shops/">Shops</a></b> as well as product tagging in Communities.</p>
</div>
</div>
<div class="col-md-6 text-center">
<div class="work-item"><a href="https://www.doximity.com/"><img class="work-icon enlarge-on-hover" src="./assets/img/work/dox.jpg"></a>
<h3>Doximity<br><small>Aug '19 - Aug '21</small></h3>
<p class="lead">Doximity is the world's leading professional medical network.</p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-4 text-center">
<div class="work-item"><a href="https://www.glbrc.org/"><img class="work-icon enlarge-on-hover" src="./assets/img/work/glb.jpg"></a>
<h3>Great Lakes Bioenergy<br><small>Feb '18 - Jul '19</small></h3>
<p class="lead">The GLBRC is a division of the <b><a href="https://energy.wisc.edu/">Wisconsin Energy Institute</a></b>. I built tools to catalyze research being done by the center's scientists in field-to-fuel optimization.</p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="work-item"><a href="https://markcuipan.com/tutor/"><img class="work-icon enlarge-on-hover" src="./assets/img/work/hk.jpg"></a>
<h3>Freelance<br><small>Jun '16 - Sep '17</small></h3>
<p class="lead">When I wasn't teaching myself to code on <b><a href="https://www.learnenough.com/">LearnEnough</a>, </b> <b><a href="https://www.edx.org/">edX</a></b>, <b><a href="https://www.coursera.org/">Coursera</a></b>, or <b><a href="https://www.udacity.com/">Udacity</a></b>,
I taught others. I used the excellent <b><a href="https://www.khanacademy.org/">Khan Academy</a></b> to
help students reach their learning goals.</p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="work-item"><a href="https://www.keystoneprep.com/"><img class="work-icon enlarge-on-hover" src="./assets/img/work/ks.jpg"></a>
<h3>Keystone<br> <small>Oct '15 - May '16</small></h3>
<p class="lead">I worked in the <b>Hong Kong</b> office, helping students and their families navigate the complex world of university applications as an <b>Education Consultant and Instructor</b>.</p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="row">
<div class="col-md-6 text-center">
<div class="work-item"><a href="https://integrativebiology.wisc.edu/"><img class="work-icon enlarge-on-hover" src="./assets/img/work/uw.jpg"></a>
<h3>University of Wisconsin<br><small>Sep '11 - May '15</small></h3>
<p class="lead">I went to college here, in <b>Madison</b>. It's a lively place,
with a big <a href="https://www.google.com/search?q=bascom+hill&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjRtp6lnoDXAhUF6IMKHTGBCZYQ_AUICigB&biw=2328&bih=1176">hill</a> you have to climb a lot. I graduated with a Bachelors in
<b>Molecular Bio</b> and a certificate in <b>Chinese</b>.</p>
</div>
</div>
<div class="col-md-6 text-center">
<div class="work-item"><a href="http://west.wausauschools.org/"><img class="work-icon enlarge-on-hover" src="./assets/img/work/west.jpg"></a>
<h3>Wausau West<br><small>Sep '07 - May '11</small></h3>
<p class="lead">I went to high school here. It was one of the first schools in the nation to use <a href="http://www.wausaudailyherald.com/story/news/2016/05/17/wausau-west-teachers-pen-schools-history/83925238/">flex-mod scheduling</a>,
which allowed me to take so many classes that they actually overlapped with each other.</p>
</div>
</div>
</div>
</div>
</div>
<!-- unused work items >
<div class="work-item"><a href="https://www.baozitutors.com/"><img class="work-icon enlarge-on-hover" src="./assets/img/work/bzt.jpg"></a>
<h3>Baozi Tutors<br><small>Oct '17 - Present</small></h3>
<p class="lead">I co-founded this startup with <b><a href="https://github.com/wbonack">Westley Bonack</a></b>. We match tutors with clients in Hong Kong</b>. Need a tutor? We'll find you one for free. Sign up <a href="https://www.baozitutors.com/signup?type=client"
>here</a>.</p>
</div>
<div class="work-item"><a href="https://win.wisc.edu/organization/AHA"><img class="work-icon enlarge-on-hover" src="./assets/img/work/aha.jpg"></a>
<h3>AHA @UW-Madison<br><small>Jun '14 - Aug '15</small></h3>
<p class="lead">I was the organization's <b>Treasurer</b>. I secured over $69,000 in funding and was a founding member of the <b>Faith & Reason Forum</b>, a joint effort with <b><a href="http://badgercatholic.org/">Badger Catholic</a></b> to foster dialogue on issues relevant to modern secularism.</p>
</div>
<div class="work-item"><a href="https://anthonyauger.weebly.com/"><img class="work-icon enlarge-on-hover" src="./assets/img/work/al.jpg"></a>
<h3>UW-Madison Auger Lab<br><small>Jan '14 - Aug '14</small></h3>
<p class="lead">I did research here in <b><a href="https://en.wikipedia.org/wiki/Behavioral_epigenetics">behavioral epigenetics</a></b> under Prof. <b><a href="https://psych.wisc.edu/faculty-anthony-auger.htm">Tony Auger</a></b>,
was taught how to <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3201134/">slice</a> rat brains by <b><a href="https://www.linkedin.com/in/tyler-grawien-86556a113/">Tyler Grawein</a></b>, and was mentored
in <a href="https://en.wikipedia.org/wiki/Scientific_method">how to science</a> by Dr. <b><a href="https://www.researchgate.net/profile/Stacey_Kigar">Stacey Kigar</a></b> and the superb <b><a href="https://www.linkedin.com/in/liza-chang-b760357b/">Liza Chang</a></b>.</p>
</div>
<div class="work-item"><a href="https://www.waisman.wisc.edu/"><img class="work-icon enlarge-on-hover" src="./assets/img/work/wc.jpg"></a>
<h3>Waisman Center<br><small>Jun '12 - Aug '12</small></h3>
<p class="lead">Drawn here by the <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2944261/">fascinating work</a> of <b><a href="https://www.richardjdavidson.com/">Richard Davidson</a></b> on minds and meditation,
I got a job in the <b><a href="https://www.waisman.wisc.edu/rmc.htm">Rodent Models Core</a></b>. I took care of the <a href="https://www.youtube.com/watch?v=S4fy2NWZvfA">lab equipment</a> and <a href="https://en.wikipedia.org/wiki/Laboratory_rat"
>rats</a>, and peeped in on <a href="https://www.wired.com/wp-content/uploads/archive/wired/archive/14.02/images/FF_96_dalai1_f.jpg">experiments</a> during my downtime.</p>
</div>
-->
</div>
</div>
<div id="projects-header" class="callout projects">
<div class="vert-text">
<h1>Some of the things I've made...</h1>
</div>
</div>
<div id="projects" class="projects">
<div class="container">
<div class="row">
<div class="col-md-offset-4 col-md-4 text-center">
<h2><i class="fa fa-code fa-3x"></i></h2>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-6 text-center">
<div class="projects-item"><a href="http://optimizeyourgrow.com/"><img class="projects-icon enlarge-on-hover" src="./assets/img/proj/oyg.jpg"></a>
<h3>Optimize Your Grow<br><small>Dec '17</small></h3>
<p class="lead"><b><a href="https://www.linkedin.com/in/iatkinz/">Ian Atkins</a></b> was having an <a href="https://devcenter.heroku.com/articles/request-timeout">issue</a>
with requests timing out while his server was busy solving a gnarly optimization problem. I hacked together a solution and learned about <b><a href="https://www.rabbitmq.com/" target="">task queuing</a></b> and Heroku's
<b><a href="https://devcenter.heroku.com/articles/process-model">process model</a></b>. The result is <a href="http://optimizeyourgrow.com/">this</a> proof-of-concept for a site that will help farmers and
scientists alike minimize the operating costs of vertical farms and indoor grows.</p>
<blockquote class="text-left"><i>"Mark solved a problem with Heroku timing out that had shut down progress on our site for months. Mark is a great communicator and even though he was new to Julia (the programming language used to run our site), he had everything working within a few days of getting started on the project."</i></blockquote>
<p class="text-right">- Ian Atkins, Engineering Designer @ <b><a href="http://www.doctorgreenhouse.com/">Dr. Greenhouse</a></b></p>
</div>
</div>
<div class="col-md-6 text-center">
<div class="projects-item"><a href="https://game-of-fifteen.herokuapp.com"><img class="projects-icon enlarge-on-hover" onmouseover="changeToGif(this, 'gof')" onmouseout="changeToJpg(this, 'gof')" src="./assets/img/proj/gof.jpg"></a>
<h3>Game of Fifteen<br><small>Nov '17</small></h3>
<p class="lead">Originally <a href="https://github.com/factcondenser/cs50x/blob/master/pset3/fifteen/fifteen.c">implemented</a> in <b>C</b> for a CS50x <a href="https://docs.cs50.net/problems/fifteen/fifteen.html">assignment</a>, this is the second iteration of my take on the classic <a href="https://en.wikipedia.org/wiki/15_puzzle">15-puzzle</a>. To help me retain what I was learning better, I wrote every line from scratch using <b>JavaScript</b>.
What I learned is that JS is a huge pain in the butt when you don't know what you're doing. Fortunately, there are many excellent <a href="https://www.youtube.com/playlist?list=PLDnPn0VfLq80AMHugRj4MRd_15Syq4KZn">videos</a> for mastering the <a href="./assets/img/proj/jsfunny.jpg">
good parts</a>. I made this before learning about <b>responsive web design</b>, but <strike>that will be the next thing I implement</strike> it now scales to various devices. I'm still having trouble getting it to work properly after device rotation though, so for now, the <a href="https://game-of-fifteen.herokuapp.com">game</a> is best played on a computer with a keyboard.</p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-4 text-center">
<div class="projects-item"><a href="./projects/breakout.html"><img class="projects-icon enlarge-on-hover" onmouseover="changeToGif(this, 'breakout')" onmouseout="changeToJpg(this, 'breakout') "src="./assets/img/proj/breakout.jpg"></a>
<h3>Breakout<br><small>Oct '17</small></h3>
<p class="lead"><a href=".projects/breakout_js.html">This little project</a> served as my introduction to the <b>functional programming</b> paradigm. I wrote a <a href="./projects/breakout_phaser/index.html"
>sillier version</a> of this app using the <a href="https://phaser.io/">Phaser</a> game framework just for fun.</p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="projects-item"><a href="https://twitter-clone-app-baby.herokuapp.com/"><img class="projects-icon enlarge-on-hover" onmouseover="changeToGif(this, 'tc')" onmouseout="changeToJpg(this, 'tc')" src="./assets/img/proj/tc.jpg"></a>
<h3>Twitter Clone<br><small>Winter '16</small></h3>
<p class="lead">A much-simplified version of the actual Twitter, this resulted from months spent going through <b><a href="https://www.michaelhartl.com/">Michael Hartl</a></b>'s <b><a href="https://www.railstutorial.org/">Ruby on Rails Tutorial</a></b>. I learned the <b>Model-View-Controller</b> pattern and how to do <b>version control</b> with <b>Git</b>. This project also introduced me to <b>SQL</b>, <b>unit tests</b>, <b>integration tests</b>, <b>Bootstrap</b>, and <b>Sass</b>. The final (for now) product is <a href="https://twitter-clone-app-baby.herokuapp.com">deployed</a> on <b>Heroku</b>.</p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="projects-item"><a href="#"><img class="projects-icon enlarge-on-hover" src="./assets/img/proj/kanj.jpg"></a>
<h3>Kanjure<br><small>Summer '15</small></h3>
<p class="lead">This is a work in progress, since I'm in the process of learning enough <b>Android</b> and <b>Swift</b> to build it out. Touching a Chinese character brings up its definition and pinyin/jyutping pronunciations.</p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 text-center">
<div class="projects-item"><a href="https://github.com/factcondenser/intro-ai-hw3/blob/master/src/BayesNetPlayer_mpan5.java"><img class="projects-icon enlarge-on-hover" onmouseover="changeToGif(this, 'nannon')" onmouseout="changeToJpg(this, 'nannon')" src="./assets/img/proj/nannon.jpg"></a>
<h3>Nannon Bot<br><small>Fall '14</small></h3>
<p class="lead">I wrote this as part of the <b>Introduction to Artificial Intelligence</b> course that I took in college. I actually wrote several Nannon players implementing various algorithms, but the most successful one used a <b>Bayesian network</b> as its model. Our professor ran an intra-class tournament, and my Bayes net player placed 12 out of 37.</p>
</div>
</div>
<div class="col-md-6 text-center">
<div class="projects-item"><a href="https://github.com/factcondenser/calculate-concentrations/blob/master/calculate_concentrations.py"><img class="projects-icon enlarge-on-hover" onmouseover="changeToGif(this, 'dna')" onmouseout="changeToJpg(this, 'dna')" src="./assets/img/proj/dna.jpg"></a>
<h3>qPCR Concentrations Calculator<br> <small>Summer '14</small></h3>
<p class="lead">There's a reason I traded wet labs for <i><a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">DRY</a></i> computing. As a research assistant, I spent too much time punching numbers into Excel and running simple calculations on them. Enter this <a href="https://github.com/factcondenser/calculate-concentrations/blob/master/calculate_concentrations.py"><b>Python</b> script</a>. It takes a TSV file of measurements from a <a href="https://en.wikipedia.org/wiki/Qubit_fluorometer" target="-_blank">Qubit</a> device and spits out the volumes of substances that need to be mixed together in order to synthesize <a href="https://en.wikipedia.org/wiki/Complementary_DNA">cDNA</a>.</p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h2><i class="fa fa-ellipsis-h fa-3x"></i></h2>
</div>
</div>
<div class="row">
<div class="col-md-5 col-md-offset-1 text-center">
<h3>Other Coursework-based Projects</h3>
<p class="lead">I've also implemented <b>binary search</b>, <b>merge sort</b>, a <b>password cracking</b> algorithm, and <b>JPG resizing and recovery</b> algorithms in C.</p>
</div>
<div class="col-md-5 text-center">
<h3>Other Personal Projects</h3>
<p class="lead">I'm currently working on building a personal budgeting app as well as what I hope will become the "Common App" for renters.</p>
</div>
</div>
</div>
</div>
<div id="about-header" class="callout about">
<div class="vert-text">
<h1>A little more about me...</h1></div>
</div>
<div id="about" class="about">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2><i class="fa fa-tree fa-3x"></i></h2>
<br></div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<h3><i class="fa fa-gavel fa-2x"></i></h3>
<p class="lead">I like reflecting on my assumptions and discussing controversial ideas with people who hold different assumptions. Topics that really excite me are criminal justice, <a href="https://www.reuters.com/investigates/section/cheat-sheet/">education</a>, automation, China, and entropy.</p>
</div>
<div class="col-md-4 text-center">
<h3><i class="fa fa-thumbs-up fa-2x"></i></h3>
<p class="lead">I'm a huge <a href="https://www.rogerebert.com/interviews/hayao-miyazaki-interview" target="blank">Miyazaki</a> and Pixar fan, I love playing video games with great story (or <a href="https://kotaku.com/5975610/the-exceptional-beauty-of-doom-3s-source-code"
>beautiful code</a>), and I admit that I play the <a href="http://www.mit.edu/~jcb/jokes/viola.html">viola</a> and like it. I also enjoy hiking, ultimate frisbee, eating spicy things, and listening to <a href="https://www.thisamericanlife.org/recommended/new-to-this-american-life"
>podcasts</a>.</p>
</div>
<div class="col-md-4 text-center">
<h3><i class="fa fa-plane fa-2x"></i></h3>
<p class="lead">Most of my relatives live in Hong Kong, so I travel there now and again. The blend of British and Chinese influences makes it a <a href="http://www.andyyeungphotography.com/Portfolio/" target="blank">fascinating</a> city to visit. If you've
never been to East Asia, it's a <a href="http://www.cnn.com/travel/article/hong-kong-worlds-greatest-city/index.html">great place</a> to start.</p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-4 text-center">
<h3><i class="fa fa-pencil fa-2x"></i></h3>
<p class="lead">A short story I wrote for a biology class assignment was <a href="https://soundcloud.com/fabledo/forever-after-by-mark-pan-audio-story">published</a> in audiobook format. I <a href="https://markcuipan.com/blog/">write</a> whenever I'm struck by a thought or a feeling that I want to capture and explore.</p>
</div>
<div class="col-md-4 text-center">
<h3><i class="fa fa-handshake-o fa-2x"></i></h3>
<p class="lead">I live deliberately for the things that matter most to me. Nothing beats the mutual understanding that comes from a good conversation.</p>
</div>
<div class="col-md-4 text-center">
<h3><i class="fa fa-home fa-2x"></i></h3>
<p class="lead">Here's a shoutout to my dear friend, Anny, for having been instrumental in my development as a developer. I look forward to all the amazing things we're going to build together.</p>
</div>
</div>
</div>
</div>
<div id="resume-header" class="callout resume">
<div class="vert-text">
<h1>And here's my resumé...</h1>
<br>
<br><a href="./resume/markcuipan-resume.pdf" class="btn btn-lg btn-default btn-special"><i class="fa fa-eye fa-2x"></i></a></div>
</div>
<footer id="footer" class="footer">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1 text-center">
<hr>
<p class="lead">This page is modeled on the work of <b><a href="http://debarghyadas.com/">Debarghya Das</a></b>, used with his permission.
<p class="lead">Copyright © Mark Cui Pan 2023</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./assets/js/shared.min.js"></script>
<script src="./assets/js/main.min.js"></script>
</body>
</html>