-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·596 lines (564 loc) · 32.3 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
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
<!--
author: Boostraptheme
author URL: https://boostraptheme.com
License: Creative Commons Attribution 4.0 Unported
License URL: https://creativecommons.org/licenses/by/4.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="SHORTCUT ICON" href="img/favicon.ico" />
<title>Welcome to my personal site</title>
<!-- Global stylesheets -->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/devicons/css/devicons.min.css" rel="stylesheet">
<link href="css/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<!-- <span class="d-block d-lg-none mx-0 px-0"><img src="img/logo-white.png" alt="" class="img-fluid"></span>-->
<span class="d-none d-lg-block">
<img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/profile.png" alt="">
</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger"
href="./Jun_Hui_Teo_Full_Stack_Engineer_Fulltime_Internship_Aug_2020_Resume.pdf">Resume</a>
</li>
<!-- <li class="nav-item">-->
<!-- <a class="nav-link js-scroll-trigger" href="#awards">Awards</a>-->
<!-- </li>-->
<!-- <li class="nav-item">-->
<!-- <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>-->
<!-- </li>-->
</ul>
</div>
</nav>
<div class="container-fluid p-0">
<!--====================================================
ABOUT
======================================================-->
<section class="resume-section p-3 p-lg-5 d-flex d-column" id="about">
<div class="my-auto" >
<h1 class="mb-0">Jun Hui
<span class="text-primary">Teo</span>
</h1>
<div class="subheading mb-5">Full Stack Software Engineer
</div>
<p class="mb-5" id="about_content" style="max-width: 500px;" >
Hello, I am Jun Hui, a full-stack software engineer, currently working in San Francisco, as part of the penultimate year of my college studies, where I major in Computer Science - with a focus on networks, distributed systems, and artificial intelligence (AI).<br><br>
I have experience in developing end-to end features across the technical stack on both web, and mobile platforms, focusing on building
back-end services and analytics that drive and optimise the user experience.<br><br>
I am looking for a full-time internship from Aug 2020, that will allow me to gain further experience in software
development, software architecture, and devops. Do feel free to reach out to me anytime for a chat via the links below!
</p>
<ul class="list-inline list-social-icons mb-0">
<li class="list-inline-item">
<a href="mailto:junhui096@gmail.com">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="skype:junhui096?add">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-skype fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="http://linkedin.com/in/junhui096">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="http://github.com/junhui096">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="./Jun_Hui_Teo_Full_Stack_Engineer_Fulltime_Internship_Aug_2020_Resume.pdf">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-file-pdf-o fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</section>
<!--====================================================
EXPERIENCE
======================================================-->
<section class="resume-section p-3 p-lg-5 " id="experience">
<div class="row my-auto">
<div class="col-12">
<h2 class=" text-center">Experience</h2>
<div class="mb-5 heading-border"></div>
</div>
<div class="row display-flex">
<div class="resume-item col-md-4 col-sm-8 " >
<div class="card mx-0 p-4" style="border-color: #17a2b8; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.21);" id="vida">
<div class=" resume-content mr-auto">
<a href="https://www.vida.com/">
<h4 class="mb-3"><i class="fa fa-laptop mr-3 text-info"></i> Full Stack Engineer Intern <br> [Aug 2019 - Present]</h4>
</a>
<img src="img/vida-profile.png" class="img-fluid mb-3" alt="">
<p> I work on the Enterprise Infrastructure team in Vida Health, a digital health company. I focus on building out new
enterprise requirements, and security features.
<p> I primarily develop the pipelines, and incorporate the appropriate access control
to enable data to be exchanged seamlessly, and securely in the Django framework.
I further work across the stack to deliver end to end features, on both web (React) and mobile platforms (Android).<p>
<p>
<li> Enabled new customer onboarding, auditing of live calls, file transfers, and other enterprise requests.</li>
<li> Developed 2 factor authentication system for new logins, improving security.</li>
<li> Expedite onboarding of new users by implementing deep links</li>
</p>
</div>
<div class="resume-date text-md-right">
</div>
</div>
</div>
<div class="resume-item col-md-4 col-sm-8">
<div class="card mx-0 p-4 mb-5" style="border-color: #ffc107; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.21);">
<div class="resume-content mr-auto" id="salesforce">
<a href="https://www.salesforce.com/">
<h4 class="mb-3"><i class="fa fa-laptop mr-3 text-info"></i> Software Engineer Intern <br> [May - Aug 2019] </h4>
</a>
<img src="img/salesforce.png" class="img-fluid mb-3" alt="">
<p> I worked on the Site Switching Team in Salesforce, a cloud-based CRM company. I focused on
providing continuous near real-time monitoring of the status of their datacenters. </p>
<p> I worked on improving the responsiveness of their dashboards and the efficiency of their devops pipeline. </p>
<li> Integrated multiple data sources into their monitoring dashboards, expediting the diagnosis of the health of their datacenters.</li>
<li> Implemented a distributed task scheduler to stagger polling of new data. Maximised network throughput, and reduced throttling, ensuring
dashboard data is constantly refreshed.</li>
<li> Implemented a web interface to speed up testing, and wrote Docker scripts to enable deployments with a single command, saving developer hours. </li>
<!-- <p> I worked on improving the dev-ops experience, making it easier for testing through the implementation-->
<!-- of a new web interface, and the writing of Docker scripts, to allow for future deployments </p>-->
</div>
<div class="resume-date text-md-right">
</div>
</div>
</div>
<div class="resume-item col-md-4 col-sm-8">
<div class="card mx-0 p-4 mb-5" style="border-color: #28a745; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.21);">
<div class="resume-content mr-auto" id="iotamedtech">
<a href ="https://www.iotamedtech.com/">
<h4 class="mb-3"><i class="fa fa-laptop mr-3 text-info"></i> Developer & Product Manager Intern</br>[May - Aug 2018]</h4>
</a>
<img src="img/iota_medtech.png" class="img-fluid mb-3" alt="">
<p> I worked in iota medtech, an AI focused med-tech company. I focused on using machine learning to expedite the
diagnosis and improve the care of patients.</p>
<p> I collaborated with various stakeholders in the medical domain, to design and drive their product road-map. </p>
<li> Planned out the full architecture of their surgical platform, and designed the data flow between its components for patent filing.</li>
<li> Developed a back-end convolutional neural network (CNN) model in Keras that can be used to analyse and classify radiological images.</li>
<li> Gather user requirements and translate them into a prototype of the front end interface of their patient management system</li>
</div>
<div class="resume-date text-md-right">
<!-- <span class="text-primary">May 2018 - August 2018</span>-->
</div>
</div>
</div>
</div>
</div>
</section>
<!--====================================================
PORTFOLIO
======================================================-->
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="portfolio">
<div class="row my-auto">
<div class="col-md-12">
<h2 class=" text-center">Projects</h2>
<div class="mb-5 heading-border"></div>
</div>
</div>
<div class="row my-auto">
<div class="col-sm-6 portfolio-item filter finance">
<a class="portfolio-link" href="#portfolioModal4" data-toggle="modal">
<div class="caption-port">
<div class="caption-port-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/portfolio/Software%20eng.jpeg" alt="">
</a>
</div>
<div class="col-sm-6 portfolio-item filter marketing">
<a class="portfolio-link" href="#portfolioModal5" data-toggle="modal">
<div class="caption-port">
<div class="caption-port-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" id="android" src="img/portfolio/sl3.jpeg" alt="">
</a>
</div>
</div>
</section>
<!--====================================================
SKILLS
======================================================-->
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="skills">
<div class="row my-auto">
<div class="col-md-12">
<h2 class=" text-center">Skills</h2>
<div class="mb-5 heading-border"></div>
</div>
<div class="col-md-12">
<div class="port-head-cont">
<button class="btn btn-general btn-green filter-b" data-filter="all">All</button>
<button class="btn btn-general btn-green filter-b" data-filter="languages">Programming Languages</button>
<button class="btn btn-general btn-green filter-b" data-filter="software">Front-end Software</button>
<button class="btn btn-general btn-green filter-b" data-filter="back-end"> Back-end Databases/Software</button>
<button class="btn btn-general btn-green filter-b" data-filter="tools">Devops</button>
</div>
</div>
</div>
<div class="row my-auto">
<div class="col-sm-2 portfolio-item filter languages">
<img class="img-fluid" src="img/1.png" alt="python">
</div>
<div class="col-sm-2 portfolio-item filter languages">
<img class="img-fluid" src="img/2.png" alt="java">
</div>
<div class="col-sm-2 portfolio-item filter languages">
<img class="img-fluid" src="img/3.png" alt="javascript">
</div>
<div class="col-sm-2 portfolio-item filter languages">
<img class="img-fluid" src="img/4.png" alt="kotlin">
</div>
<div class="col-sm-2 portfolio-item filter languages">
<img class="img-fluid" src="img/5.png" alt="c">
</div>
<div class="col-sm-2 portfolio-item filter languages">
<img class="img-fluid" src="img/sql.png" alt="SQL">
</div>
<div class="col-sm-2 portfolio-item filter languages">
<img class="img-fluid" src="img/graphql.png" alt="GraphQL">
</div>
<div class="col-sm-2 portfolio-item filter software">
<img class="img-fluid" src="img/6.png" alt="react">
</div>
<div class="col-sm-2 portfolio-item filter software">
<img class="img-fluid" src="img/7.png" alt="android">
</div>
<div class="col-sm-2 portfolio-item filter software">
<img class="img-fluid" src="img/bootstrap.png" alt="bootstrap">
</div>
<div class="col-sm-2 portfolio-item filter back-end">
<img class="img-fluid" src="img/django.png" alt="Django">
</div>
<div class="col-sm-2 portfolio-item filter back-end">
<img class="img-fluid" src="img/flask.png" alt="Flask">
</div>
<div class="col-sm-2 portfolio-item filter back-end">
<img class="img-fluid" src="img/celery_rabbitmq.png" alt="Celery RabbitMQ">
</div>
<div class="col-sm-2 portfolio-item filter back-end">
<img class="img-fluid" src="img/data_analysis.png" alt="ScikitLearn">
</div>
<div class="col-sm-2 portfolio-item filter back-end">
<img class="img-fluid" src="img/keras.png" alt="Keras">
</div>
<div class="col-sm-2 portfolio-item filter back-end">
<img class="img-fluid" src="img/postgres.png" alt="Postgres">
</div>
<div class="col-sm-2 portfolio-item filter back-end">
<img class="img-fluid" src="img/firebase.png" alt="Firebase">
</div>
<div class="col-sm-2 portfolio-item filter back-end">
<img class="img-fluid" src="img/swagger.png" alt="Swagger">
</div>
<div class="col-sm-2 portfolio-item filter back-end">
<img class="img-fluid" src="img/postman.png" alt="Postman">
</div>
<div class="col-sm-2 portfolio-item filter tools">
<img class="img-fluid" src="img/gcp.png" alt="Google Cloud Platform">
</div>
<div class="col-sm-2 portfolio-item filter tools">
<img class="img-fluid" src="img/docker.png" alt="Docker">
</div>
<div class="col-sm-2 portfolio-item filter tools">
<img class="img-fluid" src="img/linux.png" alt="Unix(Linux)">
</div>
</div>
</section>
<!--====================================================
AWARDS
======================================================-->
<!-- <section class="resume-section p-3 p-lg-5 d-flex flex-column" id="awards">-->
<!-- <div class="row my-auto">-->
<!-- <div class="col-12">-->
<!-- <h2 class=" text-center">Awards</h2>-->
<!-- <div class="mb-5 heading-border"></div>-->
<!-- </div>-->
<!-- <div class="main-award" id="award-box">-->
<!-- <div class="award">-->
<!-- <div class="award-icon"></div>-->
<!-- <div class="award-content">-->
<!-- <span class="date">Apr 2017 - Mar 2018</span>-->
<!-- <h5 class="title">Google Analytics Certified Developer</h5>-->
<!-- <p class="description">-->
<!-- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="award">-->
<!-- <div class="award-icon"></div>-->
<!-- <div class="award-content">-->
<!-- <span class="date">Apr 2018 - Mar 2019</span>-->
<!-- <h5 class="title">Mobile Web Specialist - Google Certification</h5>-->
<!-- <p class="description">-->
<!-- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!--====================================================
CONTACT
======================================================-->
<!-- <section class="resume-section p-3 p-lg-5 d-flex flex-column">-->
<!-- <div class="row my-auto" id="contact">-->
<!-- <div class="col-md-8">-->
<!-- <div class="contact-cont">-->
<!-- <h3>CONTACT Us</h3>-->
<!-- <div class="heading-border-light"></div>-->
<!-- <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here.</p>-->
<!-- </div>-->
<!-- <div class="row con-form">-->
<!-- <div class="col-md-12">-->
<!-- <input type="text" name="full-name" placeholder="Full Name" class="form-control">-->
<!-- </div>-->
<!-- <div class="col-md-12">-->
<!-- <input type="text" name="email" placeholder="Email Id" class="form-control">-->
<!-- </div>-->
<!-- <div class="col-md-12">-->
<!-- <input type="text" name="subject" placeholder="Subject" class="form-control">-->
<!-- </div>-->
<!-- <div class="col-md-12"><textarea name="" id=""></textarea></div>-->
<!-- <div class="col-md-12 sub-but"><button class="btn btn-general btn-white" role="button">Send</button></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-md-4 col-sm-12 mt-5">-->
<!-- <div class="contact-cont2">-->
<!-- <div class="contact-add contact-box-desc">-->
<!-- <h3><i class="fa fa-map-marker cl-atlantis fa-2x"></i> Address</h3>-->
<!-- <p>25, Dist town Street, Logn <br>-->
<!-- California, US <br></p>-->
<!-- </div>-->
<!-- <div class="contact-phone contact-side-desc contact-box-desc">-->
<!-- <h3><i class="fa fa-phone cl-atlantis fa-2x"></i> Phone</h3>-->
<!-- <p>800 123 3456 <br>900 123 3457</p>-->
<!-- </div>-->
<!-- <div class="contact-mail contact-side-desc contact-box-desc">-->
<!-- <h3><i class="fa fa-envelope-o cl-atlantis fa-2x"></i> Email</h3>-->
<!-- <address class="address-details-f">-->
<!-- Fax: 800 123 3456 <br>-->
<!-- Email: <a href="mailto:info@themsbit.com" class="">info@themsbit.com</a>-->
<!-- </address>-->
<!-- <ul class="list-inline social-icon-f top-data">-->
<!-- <li><a href="#" target="_empty"><i class="fa top-social fa-facebook" style="color: #4267b2; border-color:#4267b2;"></i></a></li>-->
<!-- <li><a href="#" target="_empty"><i class="fa top-social fa-twitter" style="color: #4AB3F4; border-color:#4AB3F4;"></i></a></li>-->
<!-- <li><a href="#" target="_empty"><i class="fa top-social fa-google-plus" style="color: #e24343; border-color:#e24343;"></i></a></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!-- <section class=" d-flex flex-column" id="maps">-->
<!-- <div id="map">-->
<!-- <div class="map-responsive">-->
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d6030.418742494061!2d-111.34563870463673!3d26.01036670629853!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses-419!2smx!4v1471908546569" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
</div>
<!--====================================================
PORTFOLIO MODALS
======================================================-->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="modal-body">
<div class="title-bar">
<div class="col-md-12">
<h2 class="text-center">Our Project</h2>
<div class="heading-border"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-fluid img-centered" src="img/portfolio/sl3.jpeg" alt="">
</div>
<div class="col-md-6">
<p> Smart Meal planning app that allows users to either create their own recipes, or recommends them one,
by performing cosine similarity comparision with their search input. </p>
<p>Ingredients from the selected recipes are automatically synced to a global shareable list. Users can easily schedule indivdual
notifications to remind them to purchase. </p>
<ul class="list-inline item-details">
<li>
<strong>
<a href="https://orbital.comp.nus.edu.sg/">Freshmen Independent Software Development Project[Advanced: Apollo]</a>
</strong>
</li>
<li>Date:
<strong>
<a href="https://github.com/junhui096/SAVELAH">May - Aug 2018</a>
</strong>
</li>
<li>Tools:
<strong>
<a href="https://github.com/junhui096/SAVELAH">Android [Java] & Firebase database</a>
</strong>
</li>
</ul>
<button class="btn btn-general btn-white" type="button" data-dismiss="modal">
<i class="fa fa-times"></i> Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="modal-body">
<div class="title-bar">
<div class="col-md-12">
<h2 class="text-center">IMDB for Environmental Charities</h2>
<div class="heading-border"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-fluid img-centered" src="img/portfolio/Software%20eng.jpeg" alt="">
</div>
<div class="col-md-6">
<p> A progressive web application that functions as a repository of environmental charities worldwide and their work. </p>
<p> Designed a relational data model to hold all information scraped from multiple sources, such that for each environmental
problem, users are linked to the countries that are affected, and the charities working in that area, allowing them to conveniently find a charity in
an area of their interest to contribute to.</p>
<p> Users can conveniently toggle between, search for and filter charities all from the same page.</p>
<ul class="list-inline item-details">
<li>
<strong>
<a href="https://www.cs.utexas.edu/users/downing/cs373/">Software Engineering Project on Semester Abroad (Grade:A) </a>
</strong>
</li>
<li>Date:
<strong>
<a href="https://github.com/junhui096/IMDB-for-Climate-Charities"> Sept - Dec 2018</a>
</strong>
</li>
<li>Tools:
<strong>
<a href="https://github.com/junhui096/IMDB-for-Climate-Charities">
React [Javascript] for front-end; Flask [Python] for back-end API; PostgreSQL database;
AWS & Docker for deployment; Postman & Jest for testing </a>
</strong>
</li>
</ul>
<button class="btn btn-general btn-white" type="button" data-dismiss="modal">
<i class="fa fa-times"></i> Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Global javascript -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/bootstrap/bootstrap.bundle.min.js"></script>
<script src="js/jquery-easing/jquery.easing.min.js"></script>
<script src="js/counter/jquery.waypoints.min.js"></script>
<script src="js/counter/jquery.counterup.min.js"></script>
<script src="js/custom.js"></script>
<script>
$(document).ready(function(){
$(".filter-b").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
$('.filter').show('1000');
}
else
{
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
if ($(".filter-b").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
// SKILLS
$(function () {
$('.counter').counterUp({
delay: 10,
time: 2000
});
});
</script>
</body>
</html>