-
Notifications
You must be signed in to change notification settings - Fork 0
/
index copy.html
414 lines (352 loc) · 15.7 KB
/
index copy.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Varela Round');
</style>
<title>My Personal Website</title>
</head>
<body>
<div class="bodyWrapper">
<aside class="leftSide">
<div class="leftSideStyleElements">
<ul>
<li>
<a href="#" 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="#" 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="#" 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>
</div>
</aside>
<!-- Middle column -->
<main>
<!-- Header/Hero Section -->
<header>
<div class="headerTop">
<h2 class="intro_font_above_my_name orangeColor">I'm</h2>
<h1 class="intro_name">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:[email protected]" target="_blank"
class="highlight-link">[email protected]</a>
</span>
</h3>
</div>
<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"></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"></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 -->
<section class="section2">
<div class="section_aboutMe">
<h5>ABOUT ME</h5>
<p>Hi, there! I am a software engineer and a quality engineer. With two years of mobile app testing experience
as a quality engineer, and a diverse background and experience in IT, web and graphic design, I am excited
to
bring my unique skill set and passion for quality assurance and web developement to crafting attractive
interfaces and ensuring quality.</p>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, ullam impedit reiciendis reprehenderit
sed facere et eaque non dolore enim praesentium pariatur, soluta qui doloribus quo aut deleniti fuga vero.
</p>
<br>
<p>During my time away from the screen, I like to travel, watch Sci-Fi TV-Series and spend time with my family
</p>
<br>
<div class="round_portrait">
<img src="./img/profileImage.jpg" alt="Profile image">
</div>
</div>
<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
</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">
<h5>PROJECTS</h5>
<div class="projectRow">
<div class="projectImages">
<img class="projectImageSize"
src="https://uploads-ssl.webflow.com/5e3de80322b300854230f11f/5ec704936d4b915eaf48b893_hero-invest-full.jpg"
alt="My first project">
</div>
<div class="projectBlurb">
<h6 class="projectTitle">PROJECT NAME</h6>
<p class="projectDescription">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa ut temporibus fugit, ipsam eveniet harum
saepe, laudantium sed id commodi officiis, tempora amet ab vel minus quia error. Adipisci, sed?
</p>
<a href="#" class="projectLink">Project link</a>
</div>
</div>
<div class="projectRow">
<div class="projectImages">
<img class="projectImageSize" src="./img/imageOne.jpg" alt="My first project">
</div>
<div class="projectBlurb">
<h6 class="projectTitle">PROJECT NAME</h6>
<p class="projectDescription">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa ut temporibus fugit, ipsam eveniet harum
saepe, laudantium sed id commodi officiis, tempora amet ab vel minus quia error. Adipisci, sed?
</p>
<a href="#" class="projectLink">Project link</a>
</div>
</div>
<div class="projectRow">
<div class="projectImages">
<img class="projectImageSize"
src="https://scenelab.io/static/f7993b1a90630c3367d23f9c8d8bd93c/078c0/app_promo_mockup.jpg"
alt="My first project">
</div>
<div class="projectBlurb">
<h6 class="projectTitle">PROJECT NAME</h6>
<p class="projectDescription">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa ut temporibus fugit, ipsam eveniet harum
saepe, laudantium sed id commodi officiis, tempora amet ab vel minus quia error. Adipisci, sed?
</p>
<a href="#" class="projectLink">Project link</a>
</div>
</div>
</section>
<!-- Projects Section End -->
</main>
<aside class="rightSide">
<div class="rightSideStyleElements">
<a href="#">[email protected]</a>
</div>
</aside>
</div>
<script src="script.js"></script>
</body>
</html>