-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
525 lines (435 loc) · 19.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Jack Huang</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./custom.css">
<link rel="stylesheet" href="./dist/css/bootstrap-social.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="80" id="home">
<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">Jack</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#aboutMe">About</a>
</li>
<li>
<a href="#experience">Experience</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#skills">Skills</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Header -->
<div class="container-fluid bg-green text-center">
<img src="images/me.jpg" class="img-responsive img-circle margin rotate90 center" style="border-radius:50%;" alt="me" width="200"
height="200">
<h2>Oh, hello there!</h2>
</div>
<!-- About Me -->
<div class="container-fluid bg-blue" id="aboutMe">
<div class="container">
<p>
Thanks you for taking some time out of your busy day to visit my website. You will not be disapointed.</p>
<p>This page will go over all the cool projects I've done throughout my career so far. It
also showcases my previous work experiences as well as the skills I possess.
</p>
<p>If you somehow stumbled upon this page on the internet, please take a copy of my CV.</p>
<p>I hope you enjoy your time here.</p>
<p>Cheers.</p>
<a class="btn button-green" href="files/Jack_Huang_CV.pdf" target="_blank"><span class="glyphicon glyphicon-download"></span>  CV</a>
<a class="btn button-green" href="files/Jack_Huang_Transcript_2018.pdf" target="_blank"><span class="glyphicon glyphicon-download"></span>  Transcript</a>
</div>
</div>
<!--Xp -->
<div class="title bg-green text-center" id="experience">
<h3>Experience</h3>
</div>
<div class="container-fluid bg-white text-left">
<div class="col-sm-2"> </div>
<div class="col-sm-8">
<img src="images/logos/uoa.png" alt="uoa" style="float:left; width: 80px; margin-right: 9px;">
<h3>University of Auckland
<span style="float: right;">Teaching Assistant</span>
</h3>
<hr>
<h4>
<i>November 2018 – Present</i>
</h4>
<p>• Helped tutor students enrolled in the Postgraduate Certificate in IT programme.</br>
• Taught students about Java fundamentals, object-oriented programming principles and web development.
</p>
<br>
<img src="images/logos/iag.png" alt="iag" style="float:left; width: 70px;">
<h3>IAG
<span style="float: right;">Software Developer Intern</span>
</h3>
<hr>
<h4>
<i>December 2017 – March 2018</i>
</h4>
<h4>Accomplishments:</h4>
<p>• Designed and implemented a Blockchain for the processing of insurance claims.</br>
• Deployed the Blockchain network on the Azure cloud.</br>
• Implemented a Web API and Web App for interacting with the blockchain nodes.</br>
• Participated in a week-long Hackfest with leading Microsoft blockchain developers.
</p>
</div>
<div class="col-sm-2"></div>
</div>
<!-- =================================Projects =================================-->
<div class="title bg-green title text-center" id="projects">
<h3>Projects</h3>
</div>
<!-- MedBloc -->
<div class="container-fluid bg-white text-left">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-6">
<h3>MedBloc</h3>
<h4><i>Blockchain for the NZ healthcare system</i></h4>
<p>
MedBloc is a blockchain-based shared Electronic Health Record (EHR) system, which provides patients and
healthcare providers with easy access to secure health data.</p>
<p>The system captures a longitudinal view of the patient's healh story and enables patients to give or withdraw
consent over who may access their records. Health data are also secured on MedBloc by its unique encryption framework
and smart-contract-based access control mechanism. MedBloc not only demonstrates how the blockchain can establish NZ's first
shared EHR system but it shows how blockchain can potentially disrupt the entire medical technology domain.
</p>
<div class="rol">
<div class="col-sm-12">
<img src="images/logos/fabric.png" height="40">
<img src="images/logos/docker.png" height="40">
</div>
</div>
<br>
<a class="btn button-green" href="https://github.com/j-x-huang/Medical-Blockchain">View on GitHub</a>
<a class="btn button-green" href="files/MedBloc_poster.pdf" target="_blank"><span class="glyphicon glyphicon-download"></span>  Download Poster</a>
<a class="btn button-green" href="files/MedBloc_whitepaper.pdf" target="_blank"><span class="glyphicon glyphicon-download"></span>  Download Whitepaper</a>
</div>
<div class="col-sm-4">
<img src="images/MedBloc.png" alt="medbloc" width="100%">
</div>
<div class="col-sm-1"></div>
</div>
</div>
<!-- Award nomination -->
<div class="container-fluid bg-lgray text-left">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<img src="images/ignite.png" width="100%">
<img src="images/ignite2.png" width="100%">
</div>
<div class="col-sm-6">
<h3>Award Nominations App</h3>
<p>This is a web app which enables staff members to nominate their peers for a variety of end-of-year awards.
</p>
<p>This apps allows users to view all staff members who have been nominated, make nominations (for any staff) and provide justification,
filter nominations based on the award category or person's name, and like/comment on existing nominations.
</p>
<p>It also provides functionality for administrators to lockdown the website (after voting closes) and to quickly tally and export the results.</p>
<p>This was developed in a team of 8, following Agile practices (scrum). We employed practices such as
daily standups, sprint plannning, sprint reviews and sprint retrospectives.
</p>
<p>This app was made for MYOB.</p>
<div class="rol">
<div class="col-sm-12">
<img src="images/logos/react.png" height="40">
<img src="images/logos/firebase.png" height="40">
</div>
</div>
<br>
<a class="btn button-green" href="https://github.com/j-x-huang/AwardNominationApp">View on GitHub</a>
</div>
<div class="col-sm-1"></div>
</div>
<!-- Task Scheduler -->
<div class="container-fluid bg-white text-left">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-6">
<h3>Task Scheduler</h3>
<p>
This is an application which determines the optimal way to schedule a program on a multi-core CPU. </p>
<p>First it reads a directed-acyclic graph, which represents the series of tasks that are performed by the program.
Then it uses an A-Star branch and bound algorithm to order and map each task onto a processor in a way such that
the execution time is optimal. The search algorithm is parallelised, so that it uses multiple processors, to speed
up the search. The final output is the optimal schedule of the task series.
</p>
<p>The application also comes with a GUI which shows the best schedule it has currently found.</p>
<p>This project was completed in a team of 5.</p>
<div class="rol">
<div class="col-sm-12">
<img src="images/logos/java.png" height="40">
</div>
</div>
<br>
<a class="btn button-green" href="https://github.com/j-x-huang/Task_Scheduler">View on GitHub</a>
</div>
<div class="col-sm-4">
<img src="images/task_scheduler.png" alt="task_scheduler" width="100%">
</div>
<div class="col-sm-1"></div>
</div>
</div>
<!-- Voxspell -->
<div class="container-fluid bg-lgray text-left">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<img src="images/voxspell.PNG" alt="voxspell" width="100%">
</div>
<div class="col-sm-6">
<h3>Voxspell</h3>
<p>Voxspell is a spelling aid application that aims to improve users’ spelling. It's primarily targeted for primary school
students. The application is written in Java, using Java’s Swing API to provide the GUI. The spelling aid uses word
dictation to test the users spelling. Bash scripts were used to code the backend of the app and it uses a Linux-based
Text-to-Speech framework, Festival, for word dictation.</p>
<p>Users were to complete a series of increasingly difficult spelling quizzes to improve their spelling. Video and sound
rewards are played back to the users depending on how well they do on the quiz.</p>
<p>This project was done in my second year of university.</p>
<div class="rol">
<div class="col-sm-12">
<img src="images/logos/java.png" height="40">
<img src="images/logos/bash.png" height="40">
</div>
</div>
<br>
<a class="btn button-green" href="https://github.com/j-x-huang/VoxspellBeta">View on GitHub</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<!-- Space Crisis -->
<div class="container-fluid bg-white text-left">
<div class="col-sm-1"></div>
<div class="col-sm-6">
<h3>Space Crisis</h3>
<p>This is a 2D puzzle-platformer game made using Unity 3D. The player solves puzzles and riddles to improve their critical
thinking.
</p>
<p>In the game, you play as a team of astronauts who have crash landed on an undiscovered alien planet. The players must
find resources and communicate with the aliens on the planet in order to fix their space ship and escape from the
planet. </p>
<p>The aliens will sometimes give riddles and reward the players if they get the correct answer. In addition to this,
there are obstacles laid out throughout the map, which will require critical thinking on the player’s part to solve.
</p>
<p>This project was done in a team of 8 people.</p>
<div class="rol">
<div class="col-sm-12">
<img src="images/logos/unity.png" height="40">
<img src="images/logos/csharp.png" height="40">
</div>
</div>
<br>
<a class="btn button-green" href="https://github.com/j-x-huang/Space-Crisis">View on GitHub</a>
</div>
<div class="col-sm-4 text-left">
<img src="images/sc1.PNG" alt="space crysis.1" width="70%" style="margin-bottom: 10px;">
<br>
<img src="images/sc2.PNG" alt="space crysis.2" width="70%">
</div>
<div class="col-sm-1"></div>
</div>
</div>
<!-- Chat Bot -->
<div class="container-fluid bg-lgray text-left">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<img src="images/contoso.png" alt="contoso" width="45%" style="margin-right: 5px;">
<img src="images/contoso2.png" alot="contoso2" width="45%">
</div>
<div class="col-sm-6">
<h3>Contoso Bank Chatbot</h3>
<p>A banking chatbot made using the Microsoft Bot Framework, LUIS (a natural language processor) and Node JS. It is created
for a fictional bank called Contoso Bank.
</p>
<p>The chatbot helps users with everyday banking, such as: viewing balances, opening accounts, transferring money and
more.
</p>
<p>It is available to use on Contoso Bank's (fictional) website and on Skype.</p>
<div class="rol">
<div class="col-sm-12">
<img src="images/logos/nodejs.png" height="40">
<img src="images/logos/Microsoft_Azure.png" height="40">
<img src="images/logos/bot_framework.png" width="80">
<img src="images/logos/luis.jpg" height="40">
</div>
</div>
<br>
<a class="btn button-green" href="https://contosowebsite.azurewebsites.net/">Visit Website</a>
</div>
<div class="col-sm-1"></div>
</div>
<!-- Explore Your Neighbourhood -->
<div class="container-fluid bg-white text-left">
<div class="col-sm-1"></div>
<div class="col-sm-6">
<h3>Explore Your Neighbourhood</h3>
<p>An image-recognition mobile app created within Xamarin Forms. Users are given a list of objects that can be typically
found in a suburban area. When users take a photo, the app will identify, via the Microsoft's Custom Vision API,
whether the object in the photo is on the list</p>
<div class="rol">
<div class="col-sm-12">
<img src="images/logos/csharp.png" height="40">
<img src="images/logos/xamarin.png" height="40">
<img src="images/logos/Microsoft_Azure.png" height="40">
</div>
</div>
<br>
<a class="btn button-green" href="https://github.com/j-x-huang/ExploreYourNeighbourhood">View on GitHub</a>
</div>
<div class="col-sm-4 text-left">
<div class="col-sm-1"></div>
</div>
</div>
<!-- TDD -->
<div class="container-fluid bg-lgray text-left">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<img src="images/tdd.PNG" alt="tdd" width="100%">
</div>
<div class="col-sm-6">
<h3>Test Driven Development</h3>
<p>This is a project done for a real client. It was completed in a team of 4.</p>
<p>The product that our client wanted was an online search engine for start-up companies and small businesses to analyse
the market that they are interested in entering.</p>
<p>For this project we gathered requirements for the product by interviewing our client. We then formed user stories (to
represent the requirements) and created a user story map. Additionally, High-Fidelity (Hi-Fi) prototypes was made
for the product.</p>
<p>For the second part of the project, we applied Test-driven Design (TDD), Behaviour-driven Design (BDD) and Continuous
Integration (CI) in our implementation of the product. The main focus was on writing quality test cases, therefore,
no functional system was implemented for this project.</p>
<div class="rol">
<div class="col-sm-12">
<img src="images/logos/java.png" height="40">
<img src="images/logos/junit.png" height="40">
<img src="images/logos/TravisCI.png" height="40">
<img src="images/logos/balsamiq.png" alt="balsamiq" height="40">
</div>
</div>
</div>
<div class="col-sm-1"></div>
</div>
<!-- Skills -->
<div class="title bg-green text-center" id="skills">
<h3>Skills</h3>
</div>
<div class="container-fluid bg-white text-left">
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="panel panel-default">
<div class="panel-heading">Languages</div>
<div class="panel-body text-center">
<h3>Advanced - comfortable for coding tests</h3>
<div class="row">
<div class="col-sm-12 text-center">
<img src="images/logos/java.png" alt="java" width="120">
<img src="images/logos/kotlin.png" alt="kotlin" width="120">
</div>
</div>
<h3>Intermediate - Used for multiple projects. Not an expert at.</h3>
<div class="row">
<div class="col-sm-12 text-center">
<img src="images/logos/python.png" alt="python" width="120>">
<img src="images/logos/c.png" alt="c" width="120>">
<img src="images/logos/javascript.png" alt="javascript" width="120>">
<img src="images/logos/html_css.png" alt="html_css" width="280>">
<img src="images/logos/csharp.png" alt="csharp" width="120>">
</div>
</div>
<h3>Beginner - Used once or twice</h3>
<div class="row">
<div class="col-sm-12 text-center">
<img src="images/logos/r.png" alt="r" width="120>">
<img src="images/logos/sql.png" alt="sql" width="120>">
<img src="images/logos/typescript.png" alt="typescript" width="120>">
<img src="images/logos/go.png" alt="go" width="120">
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Frameworks</div>
<div class="panel-body text-center">
<img src="images/logos/angularjs.svg" alt="angularjs" width="120>">
<img src="images/logos/nodejs.png" alt="nodejs" width="120>">
<img src="images/logos/react.png" alt="react" width="120">
<img src="images/logos/bootstrap.png" alt="bootstrap" width="120">
<img src="images/logos/xamarin.png" alt="xamarin" width="120">
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Cloud</div>
<div class="panel-body text-center">
<img src="images/logos/Microsoft_Azure.png" alt="azure" width="120>">
<img src="images/logos/mysql.png" alt="mysql" width="120>">
<img src="images/logos/gcp.png" alt="gcp" width="120>">
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Other</div>
<div class="panel-body text-center">
<img src="images/logos/git.png" alt="git" width="120>">
<img src="images/logos/bash.png" alt="bash" width="120>">
<img src="images/logos/docker.png" alt="docker" width="120">
<img src="images/logos/fabric.png" alt="docker" width="120">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
<!-- Contact -->
<div class="title bg-green text-center" id="contact">
<h3>Contact</h3>
</div>
<div class="container-fluid bg-white text-center">
<p>The best way to contact me is through email: </br>
<a href="mailto:[email protected]">[email protected]</a>
<br>(+64) 027 894 7555
</p>
<p>Feel free to connect with me on
<a href="https://www.linkedin.com/in/jack-x-huang/">LinkedIn</a> as well.</p>
</div>
<!-- Footer -->
<footer class="container-fluid bg-gray text-left">
<a class="btn btn-social-icon btn-linkedin" href="https://www.linkedin.com/in/jack-x-huang/">
<span class="fa fa-linkedin"></span>
</a>
<a class="btn btn-social-icon btn-github" href="https://github.com/j-x-huang">
<span class="fa fa-github"></span>
</a>
<a class="btn btn-social-icon btn-twitter" href="https://twitter.com/jxh996">
<span class="fa fa-twitter"></span>
</a>
</footer>
<script type="text/javascript" src="scripts.js"></script>
</body>
</html>