-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathhome.html
More file actions
487 lines (457 loc) · 25.5 KB
/
Copy pathhome.html
File metadata and controls
487 lines (457 loc) · 25.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jesse Xu</title>
<link rel=icon href="img/jx_16.png">
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css?family=Nunito:300i,400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- FULL PAGE JS (scrolling) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.css">
<!-- STYLING -->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<!-- FULL WIDTH BOOTSTRAP CONTAINER -->
<div class="container-fluid">
<ul class="menu col-sm-offset-1 col-sm-11 hide-me" id="projects-menu">
<li data-menuanchor="webmobile"><a href="#webmobile" class="active">Personal Projects</a></li>
<li data-menuanchor="system"><a href="#system">Work Portfolio</a></li>
<li data-menuanchor="gadgets"><a href="#gadgets">Gadgets</a></li>
<li data-menuanchor="design"><a href="#design">Graphic Design</a></li>
<li data-menuanchor="contact"><a href="#contact"><span style="color: #87d3ff;">contact me</span></a></li>
</ul>
<div id="fullpage">
<div class="row section" id="intro-row">
<div class="col-sm-8 col-sm-offset-2" id="intro-text">
<h1>Lorem Ipsum</h1>
<h2>Donec quis turpis imperdiet, pretium sem eget, blandit massa. Nullam eu nibh sed lectus condimentum. Proin ut odio eget ac.</h2>
<p id="intro2">Suspendisse id aliqet urna. Aenean tristique facilisis libero eget. Quisque ut egestas metus, sit leo.</p>
<div style="text-align: center;">
<a href="#webmobile" class="button">see my projects</a>
<a class="button-between"> or </a>
<a href="#contact" class="button">get in touch</a>
</div>
</div>
</div>
<!-- /// Personal Projects /// -->
<div class="row section" id="webmobile-row">
<div class="slide">
<div class="title">
<h3>PennBook</h3>
<h4>Music-themed social media site</h4>
</div>
<div class="content">
<div class="img">
<img id="pennbook" src="img/pennbook.PNG" /></div>
<div class="text">
<p>
As the final project for my Networks and Cloud Computing class, I designed and coded a Facebook clone in node.js with Amazon AWS's dynamoDB serving as a database. Its features include profile pages, status updates, friend requests, a live chat, and a friend recommendation algorithm, as well as a network visualizer run through Hadoop MapReduce.
</p>
<div class="buttons-block">
<a href="https://youtu.be/VFh9cOH0iRc?fbclid=IwAR2WKmclCcsvudXP-oEEc4sqenykTQkYurn36Uirp7OR3CK0DF7vfFWQ9eA" class="button">demo</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="title">
<h3>Echo</h3>
<h4>The best wake-up call is yourself</h4>
</div>
<div class="content">
<div class="img">
<img src="img/Echo.jpg">
</div>
<div class="text">
<p><i>(Work in progress)</i> Coded in React Native, Echo is an iOS lifestyle app that allows you to create less invasive alarms with an audio message. <br><br>After users record an audio clip that includes their desired time, the app uses voice-recognition software to set a corresponding ping at that time.</p>
<div class="buttons-block">
<a class="button">coming soon!</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="title">
<h3>SearchLt</h3>
<h4>Chrome extension for convenient page searching</h4>
</div>
<div class="content">
<div class="img">
<img id="searchpic" src="img/Searchlt.png" /></div>
<div class="text">
<p>
This extension provides users with an alternative to chrome's native page search. Based off of a feature of many popular programming IDEs, users can double-click or select a term to highlight references throughout the page, as well as show key search terms if navigating to a page from a search engine.
</p>
<div class="buttons-block">
<a href="https://github.com/jesse1xu/SearchLight" class="button">chrome store</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="title">
<h3>NoisYC</h3>
<h4>Find peace and quiet in the big apple</h4>
</div>
<div class="content">
<div class="img">
<img src="img/NoisYC.jpg" /></div>
<div class="text">
<p>
Inspired by my NYC apartment hunt, I made NoisYC to help travelers find the quietest (or rowdiest) Airbnbs in the big city. Built with the Google Maps API and data persisted in OracleDB and MongoDB.
</p>
<div class="buttons-block">
<a href="https://youtu.be/VGs5YpjZbMA" class="button">demo</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="title">
<h3>The International Affairs Association</h3>
<h4>Website redesign for one of Penn's largest organizations</h4>
</div>
<div class="content">
<div class="img">
<img id="upmunc" src="img/upmunc.png" /></div>
<div class="text">
<p>
<i>(May 2020: Temporarily private)</i> I rebuilt and currently maintain the website for the Penn International Affairs Association, the largest club at Penn by membership. I wanted to create a site that was intuitive and easier to navigate than the last, and could also be easily updated for each iteration of the conference. Hosted on Heroku with Python backend.
</p>
<div class="buttons-block">
<a target="_blank" href="http://www.upmunc.org/" class="button">live site</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="title">
<h3>SideWinder</h3>
<h4>Multiplayer twist on the classic game of snake</h4>
</div>
<div class="content">
<div class="img">
<img src="img/Screenshot%20(66).png">
</div>
<div class="text">
<p>
SideWinder was my first exposure to working with React Native. Two players each control a side of a single screen in this take on a classic. <br><br>
The objective of the game is to derail the other player's snake while collecting power-ups and avoiding collision with the walls, your tail, or the other snake.
</p>
<!-- <div class="buttons-block">
<a target="_blank" href="https://vimeo.com/232408077" class="button">demo</a>
</div> -->
</div>
</div>
</div>
</div>
<!-- /// Work Portfolio /// -->
<div class="row section" id="system-row">
<div class="slide">
<div class="title">
<h3>ThousandEyes Recorder</h3>
<h4>Automating browser transaction tests</h4>
</div>
<div class="content">
<div class="img">
<img src="img/recorder.gif">
</div>
<div class="text">
<p>
The ThousandEyes Recorder is a standalone application that allows users to record through a companion browser or script their own synthetic browser tests.<br><br>
As my project over the course of two internships, I implemented custom scripting capabilities, allowing users to code and modify their own tests — a major customer use case. Built in electron with Selenium Webdriver.
</p>
<div class="buttons-block">
<a href="https://www.thousandeyes.com/" class="button">give it a try</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="title">
<h3>DiskReader</h3>
<h4>DevOps application for simplifying I/O operations</h4>
</div>
<div class="content">
<div class="img">
<img id=diskreaderpic src="img/diskreader.PNG">
</div>
<div class="text">
<p>
DiskReader is a Windows application that allows engineers to easily read in the properties of a selected disk or system of disks.<br><br>
I designed and created the application as an alternative solution to classifying the various types of disks that the Unisys software ran on. Previously, the only way to identify a disk was to inspect it through a Hex editor. Built with Visual Studio's WPF framework and a C# backend.
</p>
<div class="buttons-block">
<a href="https://github.com/jesse1xu/DiskReader" class="button">code</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="title">
<h3>HexEd</h3>
<h4>redesigning a Hex editor for improved functionality</h4>
</div>
<div class="content">
<div class="img">
<img id="hexpic" src="img/HexEditor.png" height="500" width="550"/>
</div>
<div class="text">
<p>
As an intern for Unisys, I added the ability to open physical drives (such as C:\) to their existing Hex editor tool.<br><br>
After adding in an option for engineers to create handles to all physical drives on a system to view them, I made several improvements to the UI including line numbers, byte navigation, and optimized the scrollbar to handle large file sizes.
</p>
<div class="buttons-block">
<a href="" class="button">demo</a>
</div>
</div>
</div>
</div>
</div>
<!-- /// Gadgets /// -->
<div class="row section" id="gadgets-row">
<div class="slide">
<div class="title">
<h3>BreathaLocker</h3>
<h4>arduino-powered solution to drunk riding</h4>
</div>
<div class="content">
<div class="img">
<img id="breathpic" src="img/breathalocker.png" height="450" width="550"/>
</div>
<div class="text">
<p>
A classmate and I drew got the inspiration for our Intro to Bioengineering final project after hearing news that a fellow student was injured biking home from an off-campus party<br><br>
We created BreathaLocker, a bike lock powered by an Arduino Uno that uses a built-in breathalyzer to detect if the owner is able to ride, lifting a latch and exposing the keyhole accordingly.
</p>
<div class="buttons-block">
<a href="#" class="button">design process</a>
</div>
</div>
</div>
</div>
</div>
<div class="row section" id="design-row">
<div class="slide">
<div class="title">
<h3>FNAR 264: Art, Design, and Digital Culture</h3>
<h4>assorted works from a graphic design class at Penn</h4>
</div>
<div class="content">
<div class="img">
<img src="img/graphic1.png" height="550" width="550"/>
</div>
<div class="text">
<strong>Abstract Translation</strong>
<p>
In this project, we were tasked with creating a visualization of an audio recording in black and white through Adobe Illustrator. This is the final product for my visualization of a recording taken at the Hospital of University of Pennsylvania.
</p>
</div>
</div>
</div>
<div class="slide">
<div class="title">
<h3></h3>
<h4></h4>
</div>
<div class="content">
<div class="img">
<img id=fnarvid src="img/Screenshot%20(61).png" width="450"/>
</div>
<div class="text">
<strong>How are you feeling today?</strong>
<p>
As the capstone project for FNAR 264, I planned and carried out a public interaction project on University of Pennsylvania's campus as a commentary on mental health.
</p>
<div class="buttons-block">
<a href="https://youtu.be/1InLLvRZyvE" class="button">check out the video!</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="title">
<h3></h3>
<h4></h4>
</div>
<div class="content">
<div class="img">
<img id=portfolio-pic src="img/final%20portfolio.PNG" width="450"/>
</div>
<div class="text">
<strong>Design Portfolio</strong>
<p>
The compiled portfolio of all my work in FNAR 264.
</p>
<div class="buttons-block">
<a href=Xu_Jesse_Resume.pdf class="button">see it here!</a>
</div>
</div>
</div>
</div>
<!--<div class="slide">-->
<!--<div class="title">-->
<!--<h3>Botrama</h3>-->
<!--<h4>concept video for a personalized online shopping startup</h4>-->
<!--</div>-->
<!--<div class="content">-->
<!--<div class="img">-->
<!--<img src="img/projects/thumbs-v2/botrama.png">-->
<!--</div>-->
<!--<div class="text">-->
<!--<p style="margin-bottom: 0 !important;">I created this video to simulate how a shopper might use Botrama's personalized virtual mannequin to try sizing and combine outfits on Neiman Marcus' website. I used Sketch for graphics, Keynote for animations, and Final Cut Pro to stitch everything together.<br><br>The company is in stealth mode, so I cannot publicly post the video. <a href="mailto:16chuang@gmail.com?Subject=Botrama video" id="email2">Send me an email</a> if you'd like more information.</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="slide">-->
<!--<div class="title">-->
<!--<h3>Catalan Numbers</h3>-->
<!--<h4>a curious set of numbers explored with graphics</h4>-->
<!--</div>-->
<!--<div class="content">-->
<!--<div class="img">-->
<!--<img src="img/projects/thumbs-v2/catalan.png">-->
<!--</div>-->
<!--<div class="text">-->
<!--<p>For my discrete math class, I created a presentation to explore five counting problems whose solutions are the Catalan numbers. I relied on diagrams (made in Sketch) to draw connections between all of these apparently unrelated problems.</p>-->
<!--<div class="buttons-block">-->
<!--<a target="_blank" href="https://speakerdeck.com/16chuang/a-tour-of-the-catalan-numbers" class="button">view presentation</a>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>
<!--<div class="row section" id="breath-row">-->
<!--<div class="slide">-->
<!--<div class="title">-->
<!--<h3>DIY Bike Modifications</h3>-->
<!--<h4>teaching my old bike new tricks</h4>-->
<!--</div>-->
<!--<div class="content">-->
<!--<div class="img">-->
<!--<img src="img/projects/thumbs-v2/tbd.png">-->
<!--</div>-->
<!--<div class="text">-->
<!--<ol>-->
<!--<li><strong>phone mount:</strong> After many failed attempts to use Google Maps one-handed while biking, I CAD-ed, laser cut, and glued together this acrylic phone holder for my handlebars. There's even a convenient hole for a charging cable should I add a dynamo.</li>-->
<!--<li><strong>EL wire:</strong> I would like to add electroluminescent wire to the rims of my bike to improve side visibility. My biggest challenge will be weatherproofing the inverter.</li>-->
<!--</ol>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="slide">-->
<!--<div class="title">-->
<!--<h3>ENGR 40M Projects</h3>-->
<!--<h4>an assortment of projects built for an EE class</h4>-->
<!--</div>-->
<!--<div class="content">-->
<!--<div class="img">-->
<!--<img src="img/projects/thumbs-v2/tbd.png">-->
<!--</div>-->
<!--<div class="text">-->
<!--<ol>-->
<!--<li><strong>solar USB charger:</strong> diodes and boost converters</li>-->
<!--<li><strong>useless box:</strong> Arduino, servos, and switches</li>-->
<!--<li><strong>LED cube:</strong> transistors, multiplexing, and lots of soldering!</li>-->
<!--<li><strong>EKG circuit:</strong> opamp filters and oscilloscopes</li>-->
<!--</ol>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="slide">-->
<!--<div class="title">-->
<!--<h3>Rapid Prototyping</h3>-->
<!--<h4>experiments on the 3D printer and laser cutter</h4>-->
<!--</div>-->
<!--<div class="content">-->
<!--<div class="img">-->
<!--<img src="img/projects/thumbs-v2/tbd.png">-->
<!--</div>-->
<!--<div class="text">-->
<!--<ol>-->
<!--<li><strong>3D printed "floating" helmet hanger</strong> modeled in Tinkercad.</li>-->
<!--<li><strong>laser cut puzzle magnets</strong> cut out of good ol' plywood.</li>-->
<!--</ol>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="slide">-->
<!--<div class="title">-->
<!--<h3>Fun with Cardboard</h3>-->
<!--<h4>painted cardboard as (Halloween) fashion accessories</h4>-->
<!--</div>-->
<!--<div class="content">-->
<!--<div class="img" style="max-width: 100% !important;">-->
<!--<img src="img/projects/thumbs-v2/cardboard.png">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="slide">-->
<!--<div class="title">-->
<!--<h3>Kinetic Charger Concept</h3>-->
<!--<h4>power walking 2.0</h4>-->
<!--</div>-->
<!--<div class="content">-->
<!--<div class="img" style="max-width: 100% !important;">-->
<!--<img src="img/projects/thumbs-v2/ess.png">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="row section" id="contact-row">
<h3>Thanks for visiting!</h3>
<p>Want to learn more? Check out my code on <a target="_blank" class="underline" href="https://github.com/jesse1xu" data-hover="Github">Github</a>, download my <a target="_blank" class="underline" href="Xu_Jesse_Resume.pdf" data-hover="resume">resume,</a> hop over to <a target="_blank" class="underline" href="https://www.linkedin.com/in/jesse1xu/" data-hover="LinkedIn">LinkedIn</a>, or send me an <a class="underline" href="mailto:jesse1xu@gmail.com?subject=Hello!" id="email" data-hover="email">email</a>.</p>
<div style="text-align: center;">
<a href="#intro" class="button">back to the top!</a>
</div>
</div>
</div>
</div>
<!-- MODALS -->
<div class="modal fade" id="classes-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Relevant Coursework</h3>
</div>
<div class="modal-body">
<p>
Big Data Analytics (CIS 555)<br>
Database & Info Systems (CIS 550)<br>
Algorithms (CIS 320)<br>
Computer Systems (CIS 240)<br>
Scalable and Cloud Computing (NETS 212)<br>
<br>
Design and Digital Culture (DSGN 264)<br>
Functions and Materials (DSGN 328)<br>
Pixel to Print (DSGN 220)<br>
<br>
Engineering Entrepreneurship II (EAS 546)<br>
Engineering Entrepreneurship I (EAS 545)<br>
Product Design (IPD 515)<br>
Intellectual Property and Business Law (EAS 507)<br>
<br>
Negotiations (OIDD 291) <br>
Corporate Finance (FNCE 100) <br>
</p>
</div>
</div>
</div>
</div>
<!-- SCRIPTS BELOW -->
<!------------------->
<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- BOOSTRAP -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- FULL PAGE JS (scrolling) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.js"></script>
<!-- MY JAVASCRIPT -->
<script src="activescript.js"></script>
<script type="text/javascript" src="decrypt.js"></script>
</body>
</html>