-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·459 lines (399 loc) · 27.5 KB
/
index.html
File metadata and controls
executable file
·459 lines (399 loc) · 27.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
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-116906207-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-116906207-1');
</script>
<title>Joshua Harsono</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Joshua Harsono Web Developer Portfolio">
<meta name="author" content="Joshua Harsono">
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,400italic,300italic,300,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- Global CSS -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Plugins CSS -->
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">
<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="assets/css/main.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.profile-image {
border-radius: 50%;
}
</style>
</head>
<body>
<header class="header">
<div class="top-bar container-fluid">
<div class="actions">
<a class="btn" href="mailto:jharsono@gmail.com"><i class="fa fa-paper-plane" aria-hidden="true"></i> Hire Me</a>
<a class="btn d-none d-md-inline-block" href="assets/Harsono_Resume_2018_Digital.pdf"><i class="fa fa-download" aria-hidden="true"></i> Download My Resume</a>
</div><!--//actions-->
<ul class="social list-inline">
<li class="list-inline-item"><a href="https://linkedin.com/in/jharsono"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="https://github.com/jharsono"><i class="fa fa-github-alt" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="https://facebook.com/jharsono"><i class="fa fa-facebook-f" aria-hidden="true"></i></a></li>
</ul><!--//social-->
</div><!--//top-bar-->
<div class="intro">
<div class="container text-center">
<img class="profile-image" src="assets/images/profile-pic.jpg" alt="Profile Image">
<h1 class="name">Joshua Harsono</h1>
<div class="title">Full Stack Developer, Josh of all Trades</div>
<div class="profile">
<p>I graduated with a Bachelor's of Applied Science in Sound Arts from Ex'pression College for Digital Arts in 2008.
After graduating, I began working in corporate events to support technologies such as video conferencing and recording, streaming, audio reinforcement, and lighting. This led me to Facebook in 2011 where I would eventually
grow into an Enterprise Product Management role. My passion for solving problems fueled my many attempts at learning how to code, and I eventually found the courage to leave Facebook in 2017 to pursue a career change in Web Development.
</p>
</div><!--//profile-->
</div><!--//container-->
</div><!--//intro-->
<div class="contact-info">
<div class="container text-center">
<ul class="list-inline">
<li class="email list-inline-item"><i class="fa fa-envelope"></i><a href="mailto:jharsono@gmail.com">jharsono@gmail.com</a></li>
<!-- <li class="list-inline-item"><i class="fa fa-phone"></i> <a href="tel: 0123456789">0123 456 7890</a></li>
<li class="website list-inline-item"><i class="fa fa-globe"></i><a href="#" target="_blank">portfoliosite.com</a></li> -->
</ul>
</div><!--//container-->
</div><!--//contact-info-->
<div class="page-nav-space-holder d-none d-md-block">
<div id="page-nav-wrapper" class="page-nav-wrapper text-center">
<div class="container">
<ul id="page-nav" class="nav page-nav list-inline">
<li class="nav-item"><a class="scrollto nav-link" href="#portfolio-section">Portfolio</a></li>
<li class="nav-item"><a class="scrollto nav-link" href="#skills-section">Skills</a></li>
<li class="nav-item"><a class="scrollto nav-link" href="#experiences-section">Experiences</a></li>
<li class="nav-item"><a class="scrollto nav-link" href="#education-section">Education</a></li>
<li class="nav-item"><a class="scrollto nav-link" href="#contact-section">Contact</a></li>
</ul><!--//page-nav-->
</div>
</div><!--//page-nav-wrapper-->
</div>
</header><!--//header-->
<div class="wrapper container">
<section id="portfolio-section" class="portfolio-section section">
<h2 class="section-title">Portfolio</h2>
<!-- <ul id="filters" class="filters clearfix">
<li class="type active" data-filter="*">All</li>
<li class="type" data-filter=".backend">Back-end</li>
<li class="type" data-filter=".frontend">Front-end</li>
</ul> -->
<!--//filters-->
<div class="items-wrapper isotope row">
<div class="item frontend col-lg-3 col-6">
<div class="item-inner">
<figure class="figure">
<img class="img-fluid" src="assets/images/portfolio/beatbuddies.jpg" alt="Beat Buddies screenshot" />
</figure>
<div class="content text-left">
<h3 class="sub-title"><a href="#">Beat Buddies</a></h3>
<div class="meta">Javascript</div>
<div class="action"><a href="https://github.com/JeffBaucom/beat_buddies_sockets">View on Github</a></div>
</div><!--//content-->
<a class="link-mask" href="https://github.com/JeffBaucom/beat_buddies_sockets"></a>
</div><!--//item-inner-->
</div><!--//item-->
<div class="item backend col-lg-3 col-6">
<div class="item-inner">
<figure class="figure">
<img class="img-fluid" src="assets/images/portfolio/photocollections.jpg" alt="Photo Collections Screenshot" />
</figure>
<div class="content text-left">
<h3 class="sub-title"><a href="https://github.com/jharsono/photo_collections">Photo Collections</a></h3>
<div class="meta">Django/Javascript</div>
<div class="action"><a href="#">View on Github</a></div>
</div><!--//content-->
<a class="link-mask" href="https://github.com/jharsono/photo_collections"></a>
</div><!--//item-inner-->
</div><!--//item-->
<div class="item backend frontend col-lg-3 col-6">
<div class="item-inner">
<figure class="figure">
<img class="img-fluid" src="assets/images/portfolio/foodranks.jpg" alt="Food Ranks screenshot" />
</figure>
<div class="content text-left">
<h3 class="sub-title"><a href="https://github.com/jharsono/food_ranks">Food Ranks</a></h3>
<div class="meta">MEAN</div>
<div class="action"><a href="https://github.com/jharsono/food_ranks">View on Github</a></div>
</div><!--//content-->
<a class="link-mask" href="https://github.com/jharsono/food_ranks"></a>
</div><!--//item-inner-->
</div><!--//item-->
<div class="item frontend col-lg-3 col-6">
<div class="item-inner">
<figure class="figure">
<img class="img-fluid" src="assets/images/portfolio/petshelter.jpg" alt="Pet Shelter Screenshot" />
</figure>
<div class="content text-left">
<h3 class="sub-title"><a href="https://github.com/jharsono/pet_shelter">Pet Shelter</a></h3>
<div class="meta">MEAN</div>
<div class="action"><a href="https://github.com/jharsono/pet_shelter">View on Github</a></div>
</div><!--//content-->
<a class="link-mask" href="https://github.com/jharsono/pet_shelter"></a>
</div><!--//item-inner-->
</div><!--//item-->
</div><!--//item-wrapper-->
</section><!--//section-->
<section id="skills-section" class="skills-section section text-center">
<h2 class="section-title">Tools of my Trade</h2>
<div class="other-skills">
<div class="misc-skills">
<h4 class="subtitle">Languages</h4>
<span class="skill-tag">HTML5</span>
<span class="skill-tag">CSS3</span>
<span class="skill-tag">Javascript ES5 / ES6</span>
<span class="skill-tag">Typescript</span>
<span class="skill-tag">Python</span>
<span class="skill-tag">Swift</span>
<span class="skill-tag">JSX</span>
<br>
<br>
<h4 class="subtitle">Front End</h4>
<span class="skill-tag">React</span>
<span class="skill-tag">AngularJS</span>
<span class="skill-tag">Jquery</span>
<span class="skill-tag">Bootstrap</span>
<span class="skill-tag">AJAX</span>
<span class="skill-tag">JSON</span>
<br>
<br>
<h4 class="subtitle">Back end</h4>
<span class="skill-tag">Django</span>
<span class="skill-tag">Express</span>
<span class="skill-tag">Node.js</span>
<span class="skill-tag">Socket.io</span>
<span class="skill-tag">Flask</span>
<span class="skill-tag">AWS EC2</span>
<span class="skill-tag">AWS S3</span>
<br>
<br>
<h4 class="subtitle">Databases</h4>
<span class="skill-tag">MySQL</span>
<span class="skill-tag">MongoDB</span>
<span class="skill-tag">Django ORM</span>
<span class="skill-tag">SQLite</span>
<span class="skill-tag">NoSQL</span>
<br>
<br>
<h4 class="subtitle">Developer Tools</h4>
<span class="skill-tag">GitHub</span>
<span class="skill-tag">Asana</span>
<span class="skill-tag">Trello</span>
<span class="skill-tag">GitKRaken</span>
<span class="skill-tag">Atom</span>
<span class="skill-tag">Terminal</span>
<span class="skill-tag">Postman</span>
<span class="skill-tag">MySQL Workbench</span>
<span class="skill-tag">Xcode</span>
<br>
<br>
<h4 class="subtitle">Methodologies / Architectures</h4>
<span class="skill-tag">Object Oriented Programming</span>
<span class="skill-tag">Model-View-Controller(MVC)</span>
<span class="skill-tag">Model-Template-View(MTV)</span>
<span class="skill-tag">RESTful Architecture</span>
<span class="skill-tag">CRUD Operations</span>
<span class="skill-tag">Responsive Web Design</span>
</div>
</div><!--//other-skills-->
</section><!--//skills-section-->
<section id="experiences-section" class="experiences-section section">
<h2 class="section-title">Work Experiences</h2>
<div class="timeline">
<div class="item">
<div class="work-place">
<h3 class="place">Oculus</h3>
<div class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>Menlo Park, CA</div>
</div>
<div class="job-meta">
<div class="title">Product Manager,<br>Event Operations</div>
<div class="time">2015 - 2017</div>
</div><!--//job-meta-->
<div class="job-desc">
<p>
Lead the creation of a new team to stabilize the technical environment of large scale events and tradeshows for delivering high quality Virtual Reality demos to consumers. Managed a staff of 10+ people and provided operational management across the verticals of logistics, IT, and event production: a $1.5 million operation.
</p>
<ul>
<li>Expanded the team from 2 to 10 people to meet company’s sales goals and marketing strategy. Increased support capabilities from 400 in March 2017 to 1,000 average daily demos at $2m tradeshow exhibitions by August 2017 with headcount and process improvements.</li>
<li>Designed a workflow ticketing system for data processing and cataloging support efforts, implemented an inventory management system to keep track of a multi- million-dollar warehouse, and built a post-event reporting system to keep track of event metrics and trending incidents</li>
<li>Bounded the team’s offerings with Service Level Agreements to maintain consistent results and expectations to the customer base</li>
<li>Designed custom-fit road cases to protect company assets and improve efficiency in deployment of PC’s, monitors, and Oculus Rift products</li>
<li>Implemented a third-party reusable hygiene solution across entire fleet of 400+ Oculus Rift units to improve hygienic safety between Virtual Reality demo guests with an annual cost savings of 80% and reduction in waste from previous single-use solution.</li>
</ul>
</div><!--//job-desc-->
</div><!--//item-->
<div class="item">
<div class="work-place">
<h3 class="place">Facebook</h3>
<div class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>Menlo Park, CA</div>
</div>
<div class="job-meta">
<div class="title">Product Manager,<br>Event Operations</div>
<div class="time">2013 - 2015</div>
</div><!--//job-meta-->
<div class="job-desc">
<p>Oversaw entire product offering among verticals of Onsite Events, Offsite Events, Studio Production, and Event Space Builds. Major accomplishments include:</p>
<ul>
<li>Development of new Video Conferencing recording service, scaling from being able to offer the product in only 5 locations to all Facebook offices globally (85 offices)</li>
<li>Advised on development of new ticketing system, engineered in-house to the team’s specifications</li>
<li>Implementing standardized interview process to grow the team from 15 members in 2013 to 50+ in 2015</li>
<li>Developed and facilitated onboarding process for new team members in new office locations</li>
<li>Developed education programs for customers on new technology and produce training materials, including text, video, and facilitating live training sessions</li>
</ul>
</div><!--//job-desc-->
</div><!--//item-->
<div class="item">
<div class="work-place">
<h3 class="place">AVT Productions <br>@ Facebook</h3>
<div class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>Menlo Park, CA</div>
</div>
<div class="job-meta">
<div class="title">Lead Technician, <br>Event Operations</div>
<div class="time">2011 - 2013</div>
</div><!--//job-meta-->
<div class="job-desc">
<p>Managed day-to-day operations of Audio/Visual Event Operations team.</p>
<ul>
<li>Coordinated large internal and external facing events, evaluated technology needs and provided the right technology solutions for collaboration and proper staffing</li>
<li>Focused on expanding the service offerings and personal growth amongst the team</li>
</ul>
</div><!--//job-desc-->
</div><!--//item-->
<div class="item">
<div class="work-place">
<h3 class="place">Cyber CSI <br>@ Genentech</h3>
<div class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>South San Francisco, CA</div>
</div>
<div class="job-meta">
<div class="title">Event Support Technician</div>
<div class="time">2009 - 2011</div>
</div><!--//job-meta-->
<div class="job-desc">
<ul>
<li>Video Conference support for Genentech campus in South San Francisco</li>
<li>Webcast event coordination, production, and post-production</li>
<li>Setup and operation of audio/visual equipment for special events</li>
</ul>
</div><!--//job-desc-->
</div><!--//item-->
<div class="item">
<div class="work-place">
<h3 class="place">PSAV</h3>
<div class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>San Francisco, CA</div>
</div>
<div class="job-meta">
<div class="title">Event Technology Specialist</div>
<div class="time">2008 - 2009</div>
</div><!--//job-meta-->
<div class="job-desc">
<ul>
<li>Basic setup and operation of large and small-scale audio/visual systems for live events</li>
<li>Troubleshooting and problem solving of hardware and software issues</li>
</ul>
</div><!--//job-desc-->
</div><!--//item-->
</div><!--//timeline-->
</section><!--//section-->
<section id="education-section" class="education-section section">
<h2 class="section-title">Education</h2>
<div class="row">
<div class="item col-12 col-md-6">
<div class="item-inner">
<h3 class="degree">BAS, Sound Arts</h3>
<div class="education-body">
Ex'pression College for Digital Arts
</div><!--//education-body-->
<div class="time">Emeryville, CA | 2005 - 2008</div>
<div class="desc">
Following my passion for music I pursued a degree in Sound Arts, focusing on analog and digital recording, post-production for film and televeision, live sound, game audio, and studio maintenance.
</div>
</div><!--//item-inner-->
</div><!--//item-->
<div class="item col-12 col-md-6">
<div class="item-inner">
<h3 class="degree">Triple Black Belt</h3>
<div class="education-body">
Coding Dojo
</div><!--//education-body-->
<div class="time">San Jose, CA | 2017 - 2018</div>
<div class="desc">
Coding Dojo is a coding bootcamp where I honed my skills in full stacks: Python/Django, MEAN, and iOS. I earned a "Black Belt" in each stack, which follows the same expectation as Coding Dojo instructors.
</div>
</div><!--//item-inner-->
</div><!--//item-->
</div><!--//row-->
</section><!--//section-->
<section id="contact-section" class="contact-section section">
<h2 class="section-title">Get in Touch</h2>
<div class="intro">
<img class="profile-image" src="assets/images/profile-pic.jpg" alt="">
<div class="dialog">
<p>Drop me a line at <a href="mailto:jharsono@gmail.com">jharsono@gmail.com</a> or connect with me on LinkedIn or GitHub!</p>
<ul class="social list-inline">
<li class="list-inline-item"><a href="https://linkedin.com/in/jharsono"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="https://github.com/jharsono"><i class="fa fa-github-alt" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="https://facebook.com/jharsono"><i class="fa fa-facebook-f" aria-hidden="true"></i></a></li>
</ul><!--//social-->
</div><!--//diaplog-->
</div><!--//intro-->
</section><!--//section-->
</div><!--//wrapper-->
<footer class="footer text-center">
<div class="container">
<small class="copyright">Template Copyright @ <a href="http://themes.3rdwavemedia.com/" target="_blank">3rd Wave Media</a></small>
</div><!--//container-->
</footer>
<!-- *****CONFIGURE STYLE (REMOVE ON YOUR PRODUCTION SITE)****** -->
<!-- <div id="config-panel" class="config-panel d-none d-lg-block">
<div class="panel-inner">
<a id="config-trigger" class="config-trigger config-panel-hide" href="#"><i class="fa fa-cog"></i></a>
<h5 class="panel-title">Choose Colour</h5>
<ul id="color-options" class="list-unstyled list-inline">
<li class="theme-1 active list-inline-item"><a data-style="assets/css/styles.css" data-chart="#00BCD4" href="#"></a></li>
<li class="theme-2 list-inline-item"><a data-style="assets/css/styles-2.css" data-chart="#03A9F4" href="#"></a></li>
<li class="theme-3 list-inline-item"><a data-style="assets/css/styles-3.css" data-chart="#009688" href="#"></a></li>
<li class="theme-4 list-inline-item"><a data-style="assets/css/styles-4.css" data-chart="#4CAF50" href="#"></a></li>
<li class="theme-5 list-inline-item"><a data-style="assets/css/styles-5.css" data-chart="#8BC34A" href="#"></a></li>
<li class="theme-6 list-inline-item"><a data-style="assets/css/styles-6.css" data-chart="#C0CA33" href="#"></a></li>
<li class="theme-7 list-inline-item"><a data-style="assets/css/styles-7.css" data-chart="#FFC107" href="#"></a></li>
<li class="theme-8 list-inline-item"><a data-style="assets/css/styles-8.css" data-chart="#FF9800" href="#"></a></li>
<li class="theme-9 list-inline-item"><a data-style="assets/css/styles-9.css" data-chart="#FF5722" href="#"></a></li>
<li class="theme-10 list-inline-item"><a data-style="assets/css/styles-10.css" data-chart="#795548" href="#"></a></li>
<li class="theme-11 list-inline-item"><a data-style="assets/css/styles-11.css" data-chart="#607D8B" href="#"></a></li>
<li class="theme-12 list-inline-item"><a data-style="assets/css/styles-12.css" data-chart="#673AB7" href="#"></a></li>
<li class="theme-13 list-inline-item"><a data-style="assets/css/styles-13.css" data-chart="#3F51B5" href="#"></a></li>
<li class="theme-14 list-inline-item"><a data-style="assets/css/styles-14.css" data-chart="#2196F3" href="#"></a></li>
<li class="theme-15 list-inline-item"><a data-style="assets/css/styles-15.css" data-chart="#9C27B0" href="#"></a></li>
<li class="theme-16 list-inline-item"><a data-style="assets/css/styles-16.css" data-chart="#E91E63" href="#"></a></li>
</ul>
<a id="config-close" class="close" href="#"><i class="fa fa-times-circle"></i></a> -->
</div><!--//panel-inner-->
</div><!--//configure-panel-->
<!-- Javascript -->
<script type="text/javascript" src="assets/plugins/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="assets/plugins/popper.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-scrollTo/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="assets/plugins/easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
<script type="text/javascript" src="assets/plugins/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="assets/plugins/isotope.pkgd.min.js"></script>
<!-- custom js -->
<script type="text/javascript" src="assets/js/main.js"></script>
<!-- Style Switcher (REMOVE ON YOUR PRODUCTION SITE) -->
<!-- <script src="assets/js/demo/style-switcher.js"></script> -->
</body>
</html>