-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
528 lines (459 loc) · 20.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
@import url('https://fonts.googleapis.com/css?family=Varela Round');
</style>
<title>Patrick Siah</title>
<script src="https://unpkg.com/scrollreveal"></script>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="bodyWrapper">
<aside class="leftSide">
<ul class="leftSideStyle">
<li>
<a href="https://github.com/patrickonesiah" target="_blank" class="iconStyleElement">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40" viewBox="0 0 48 48">
<path fill="#ff9823" stroke="#ff9823"
d="M 24 4 C 19.963209 4 16.192498 5.2011807 13.046875 7.2636719 A 1.50015 1.50015 0 1 0 14.691406 9.7714844 C 17.365783 8.0179755 20.556791 7 24 7 C 33.406292 7 41 14.593708 41 24 C 41 26.707746 40.36968 29.257322 39.248047 31.525391 A 1.5001887 1.5001887 0 0 0 41.9375 32.855469 C 43.257867 30.185538 44 27.174254 44 24 C 44 12.972292 35.027708 4 24 4 z M 15.800781 13.076172 C 14.472781 15.202172 15.273563 17.527813 15.726562 18.507812 C 14.637562 19.788813 14 21.334 14 23 C 14 26.78 17.280547 29.939391 21.685547 30.775391 C 20.376547 31.448391 19.399609 32.67225 19.099609 34.15625 L 17.783203 34.15625 C 16.486203 34.15625 15.98225 33.629234 15.28125 32.740234 C 14.58925 31.851234 13.845172 31.253859 12.951172 31.005859 C 12.469172 30.954859 12.144453 31.321484 12.564453 31.646484 C 13.983453 32.612484 14.081391 34.193516 14.650391 35.228516 C 15.168391 36.160516 16.229687 37 17.429688 37 L 19 37 L 19 40.251953 C 12.043156 38.12245 7 31.665102 7 24 C 7 21.314402 7.6195896 18.783427 8.7246094 16.529297 A 1.50015 1.50015 0 0 0 7.4492188 14.351562 A 1.50015 1.50015 0 0 0 6.03125 15.208984 C 4.7302698 17.862854 4 20.851598 4 24 C 4 35.027708 12.972292 44 24 44 C 28.472909 44 32.618147 42.525863 35.951172 40.039062 A 1.5009817 1.5009817 0 1 0 34.15625 37.632812 C 32.617628 38.780793 30.876119 39.662932 29 40.240234 L 29 35.136719 C 29 33.228719 27.902453 31.591391 26.314453 30.775391 C 30.719453 29.939391 34 26.78 34 23 C 34 21.426 33.423406 19.961609 32.441406 18.724609 C 32.883406 17.356609 33.371219 14.953172 32.199219 13.076172 C 29.948219 13.076172 28.469672 14.622797 27.763672 15.591797 C 26.601672 15.213797 25.333 15 24 15 C 22.667 15 21.398328 15.213797 20.236328 15.591797 C 19.530328 14.622797 18.052781 13.076172 15.800781 13.076172 z">
</path>
</svg>
</a>
</li>
<li>
<a href="#" target="_blank" class="iconStyleElement">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40" viewBox="0 0 48 48">
<path fill="none" stroke="#ff9823" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
stroke-width="3" d="M41.5,21.1v-4.6c0-5.5-4.5-10-10-10h-15c-5.5,0-10,4.5-10,10v3"></path>
<path fill="none" stroke="#ff9823" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
stroke-width="3" d="M6.5,25.6v5.9c0,5.5,4.5,10,10,10h15c5.5,0,10-4.5,10-10v-4.6"></path>
<path fill="none" stroke="#ff9823" stroke-miterlimit="10" stroke-width="3"
d="M24,15.5c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5s8.5-3.8,8.5-8.5S28.7,15.5,24,15.5z"></path>
<path fill="#ff9823" stroke="#ff9823" d="M34,12c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S35.1,12,34,12z">
</path>
</svg>
</a>
</li>
<li>
<a href="#" target="_blank" class="iconStyleElement">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40" viewBox="0 0 48 48">
<path fill="none" stroke="#ff9823" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
stroke-width="3" d="M40.5,31.7v4.8c0,2.2-1.8,4-4,4h-25c-2.2,0-4-1.8-4-4V24.9"></path>
<path fill="none" stroke="#ff9823" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
stroke-width="3" d="M7.5,19.2v-7.7c0-2.2,1.8-4,4-4h25c2.2,0,4,1.8,4,4v14"></path>
<circle cx="15.5" cy="15.5" r="2.5" fill="#ff9823" stroke="#ff9823"></circle>
<path fill="#ff9823" stroke="#ff9823"
d="M17,35h-3c-0.6,0-1-0.4-1-1V21c0-0.6,0.4-1,1-1h3c0.6,0,1,0.4,1,1v13C18,34.6,17.6,35,17,35z"></path>
<path fill="#ff9823" stroke="#ff9823"
d="M29,20c-1.5,0-2.9,0.6-4,1.5V21c0-0.6-0.4-1-1-1h-3c-0.6,0-1,0.4-1,1v13c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1v-7.5 c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5V34c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1v-8C35,22.7,32.3,20,29,20z">
</path>
</svg>
</a>
</li>
</ul>
</aside>
<!-- Middle column -->
<main>
<!-- Header/Hero Section -->
<header>
<div class="headerTop">
<h2 class="intro_font_above_my_name orangeColor">Hey there!</h2>
<h1 class="intro_name">I'm PATRICK SIAH</h1>
<h4 class="intro_tagLine">Software Engineer | Quality Engineer</h4>
<h2 class="intro_font_below_my_name">A <span class="orangeColor">design-oriented</span> mindset who is
dedicated
to crafting <span class="orangeColor">attractive interfaces</span>
and ensuring <span class="orangeColor">quality</span>.</h2>
<h3 class="intro_contact">
<span>Feel free to say </span>
<span class="emoji pointer"></span>
<span>
<a href="mailto:hey.patricksiah@gmail.com" target="_blank"
class="highlight-link">hey.patricksiah@gmail.com</a>
</span>
</h3>
</div>
<p class="paraStyle">We've got two website color themes here based on the time of the day.<br> Go ahead and
choose between the fully opaque or semi-opaque vertical line below to switch things up</p>
<div class="headerBottom">
<div class="lineWrapper">
<div class="hours">
<div class="hour">
<div class="line-holder">
<div class="line night"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line night"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line night"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line night"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line night"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line night"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line night"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line night"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line night"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line night"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line night"></div>
</div>
</div>
<div class="hour">
<div class="line-holder">
<div class="line night"></div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header/Hero Section End -->
<!-- About me/Skills and Experience Section -->
<!-- Need to structure it properly next time -->
<!-- <section class="section2_aboutMe">
<div >
<h5>ABOUT ME</h5>
</div>
<div class="aboutMeContent">
<div class="section_left">
<div class="round_portrait">
<img src="./img/profileImage.jpg" alt="Profile image">
</div>
</div>
<div class="section_right">
<p>Hey there!</p>
<br>
<p>I'm both a Software Engineer and a Quality Engineer, and I've got a solid two-year background in mobile app testing. But what makes me a bit different is my diverse experience in IT, web, and graphic design. I'm genuinely excited to use this unique blend of skills to make sure web/mobile applications not only work flawlessly but also look great.</p>
<br>
<p>Lately, I've been feeling a growing curiosity about web development and a hunger to expand my knowledge in software testing. Plus, my graphic design background gives me a broader perspective on how to approach testing and software development.</p>
<br>
<p>When I'm not in work mode, you'll find me exploring new places, drawing, binge-watching Sci-Fi/Superhero TV series, and enjoying quality time with my family.</p>
<br>
</div>
</div>
</section> -->
<section class="section2">
<div class="section_left">
<h5 class="aboutMe">ABOUT ME</h5>
<div class="round_portrait">
<img src="./img/profileImage.jpg" alt="Profile image">
</div>
</div>
<div class="section_right">
<p>Hey there!</p>
<br>
<p>I'm both a Software Engineer and a Quality Engineer, and I've got a solid two-year background in mobile app
testing. But what makes me a bit different is my diverse experience in IT, web, and graphic design. I'm
genuinely excited to use this unique blend of skills to make sure web/mobile applications not only work
flawlessly but also look great.</p>
<br>
<p>Lately, I've been feeling a growing curiosity about web development and a hunger to expand my knowledge in
software testing. Plus, my graphic design background gives me a broader perspective on how to approach
testing and software development.</p>
<br>
<p>When I'm not in work mode, you'll find me exploring new places, drawing, binge-watching Sci-Fi/Superhero TV
series, and enjoying quality time with my family.</p>
<br>
</div>
</section>
<section class="section2">
<div class="section_left">
<h5>SKILLS</h5>
</div>
<div class="section_right">
<div class="skills">
<div class="skillsColumn">
<h6>LANGUAGES</h6>
<p>
JavaScript<br>
HTML<br>
CSS<br>
YAML<br>
<!-- Python - in progress<br>
Java - in progress -->
</p>
</div>
<div class="skillsColumn">
<h6>TOOLS</h6>
<p>
Postman<br>
JIRA Xray<br>
JIRA Confluence<br>
Git & Github<br>
Charles Proxy<br>
Firebase<br>
<!-- DynamoDB - maybe<br>
Jenkins - maybe -->
</p>
</div>
<div class="skillsColumn">
<h6>FRAMEWORKS</h6>
<p>
React<br>
<br>
</p>
<h6>AUTOMATION</h6>
<p>
Cypress<br>
Maestro<br>
</p>
</div>
</div>
</div>
</section>
<section class="section2">
<div class="section_left">
<h5>EXPERIENCE</h5>
</div>
<div class="section_right">
<div class="experienceContainer">
<div class="experienceRow">
<h6 class="removeBlockEnd">TwoBulls | Dept - Service Victoria</h6>
<div class="jobTitle">Quality Engineer</div>
<div class="jobYears">OCT 2021 - AUG 2023</div>
</div>
<div class="experienceRow experienceRowShift">
<h6 class="removeBlockEnd">Freelance - Julie Misfud Design</h6>
<div class="jobTitle">2D/3D Visual Renderer</div>
<div class="jobYears">DEC 2019 - SEP 2021</div>
</div>
<div class="experienceRow experienceRowShift1">
<h6 class="removeBlockEnd">Joey Yap Research International</h6>
<div class="jobTitle">Web and Graphic Designer</div>
<div class="jobYears">NOV 2018 - NOV 2019</div>
</div>
<div class="experienceRow experienceRowShift2">
<h6 class="removeBlockEnd">TCK e-Solutions</h6>
<div class="jobTitle">Graphic Designer</div>
<div class="jobYears">MAY 2016 - OCT 2018</div>
</div>
</div>
</div>
</section>
<!-- <section class="section2">
<div class="section_skills_experience">
<div>
<h5>SKILLS</h5>
</div>
<div class="skills">
<div class="skillsColumn">
<h6>LANGUAGES</h6>
<p>
JavaScript<br>
HTML<br>
CSS<br>
YAML<br>
Python - in progress<br>
Java - in progress
</p>
</div>
<div class="skillsColumn">
<h6>TOOLS</h6>
<p>
Postman<br>
JIRA Xray<br>
JIRA Confluence<br>
Git & Github<br>
Charles Proxy<br>
Firebase<br>
</p>
</div>
<div class="skillsColumn">
<h6>FRAMEWORKS</h6>
<p>
React - in progress<br>
<br>
</p>
<h6>AUTOMATION</h6>
<p>
Cypress<br>
Maestro<br>
</p>
</div>
</div>
<div class="experience">
<h5>EXPERIENCE</h5>
<div class="experienceContainer">
<div class="experienceRow">
<h6 class="removeBlockEnd">TwoBulls | Dept - Service Victoria</h6>
<div class="jobTitle">Quality Engineer</div>
<div class="jobYears">OCT 2021 - AUG 2023</div>
</div>
<div class="experienceRow experienceRowShift">
<h6 class="removeBlockEnd">Freelance - Julie Misfud Design</h6>
<div class="jobTitle">2D/3D Visual Renderer</div>
<div class="jobYears">DEC 2019 - SEP 2021</div>
</div>
<div class="experienceRow experienceRowShift1">
<h6 class="removeBlockEnd">Joey Yap Research International</h6>
<div class="jobTitle">Web and Graphic Designer</div>
<div class="jobYears">NOV 2018 - NOV 2019</div>
</div>
<div class="experienceRow experienceRowShift2">
<h6 class="removeBlockEnd">TCK e-Solutions</h6>
<div class="jobTitle">Graphic Designer</div>
<div class="jobYears">MAY 2016 - OCT 2018</div>
</div>
</div>
</div>
</div>
</section> -->
<!-- About me/Skills and Experience Section End -->
<!-- Projects Section -->
<section class="section3_projects">
<div class="projectTitle">
<h5>PROJECTS</h5>
</div>
<div class="sectionContent">
<div class="projectRow">
<div class="projectImages">
<a href="https://narrativegrove.netlify.app/">
<img class="projectImageSize" src="./img/react_project.jpg" alt="React project image">
</a>
</div>
<div class="projectBlurb">
<h6 class="projectTitle">Narrative Grove</h6>
<p class="projectDescription">
Narrative Grove is a web application that was built with React, HTML, CSS and JavaScript for my web
development class. I wanted to build this web app for parents to record their child’s learning, progress
and development.
</p>
<div>
<a href="https://narrativegrove.netlify.app/" class="projectLink">Visit Site</a>
|
<a href="https://github.com/patrickonesiah/phase-2-project" class="projectLink">Source</a>
</div>
</div>
</div>
<div class="projectRow">
<div class="projectImages">
<a href="https://patrickonesiah.github.io/phase-1-project/">
<img class="projectImageSize"
src="https://miro.medium.com/v2/resize:fit:720/format:webp/1*6r-2dL02yufgE3fT2Y-Peg.png"
alt="Pokemon lookup image">
</a>
</div>
<div class="projectBlurb">
<h6 class="projectTitle">Pokemon Lookup</h6>
<p class="projectDescription">
Pokemon Lookup is done with HTML, CSS and JavaScript. It is a platform for Pokemon enthusiasts,
providing an interface to search and explore Pokemon. Users can conveniently browse through the
collection, discover evolutionary lines, and find specific Pokemon by typing their names.
</p>
<div>
<a href="https://patrickonesiah.github.io/phase-1-project/" class="projectLink">Visit Site</a>
|
<a href="https://github.com/patrickonesiah/phase-1-project" class="projectLink">Source</a>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section End -->
</main>
<aside class="rightSide">
<div class="rightSideStyleElements">
<a href="mailto:hey.patricksiah@gmail.com">hey.patricksiah@gmail.com</a>
</div>
</aside>
</div>
<script src="script.js"></script>
</body>
</html>