-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
495 lines (411 loc) · 23.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kablammo&family=Nova+Oval&family=Roboto&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bangers">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<title>Doc2Dev</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="logo">
<a href="index.html">
<img src="img/mylogo.PNG" alt="Paing Logo">
</a>
</div>
<div id="hamburger-menu" class="hamburger-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div id="nav-links" class="nav-links">
<a href="#about">About me</a>
<a href="#why">Why Web Dev?</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</div>
<div class="accessibility-options">
<button id="dark-mode-toggle" aria-label="Toggle dark mode" title="dark mode">🌃</button>
<button id="color-blind-toggle" aria-label="Toggle color blind mode" title="color blind">🎨</button>
<button id="font-size-toggle" aria-label="Toggle larger font size" title="larger font">A+</button>
</div>
</nav>
<section class="intro-section">
<div class="container">
<img src="img/pi-smile.JPG" alt="a picture of Paing smiling" class="intro_img">
<p id="hello">Hello 👋, I am</p>
<h1 id="myName"><strong>PAING PHYO KO</strong>
<span id="playAudioButton" role="button" aria-label="Play Greeting" style="cursor:pointer;">🔊</span>
</h1>
<audio id="greetingAudio" preload="none">
<source src="audio/hello.m4a" type="audio/mp4">
Your browser does not support the audio element.
</audio>
<p>a former medical doctor👨⚕️ from Myanmar(Burma) ↔️ a future developer👨💻 in making.......</p>
</div>
</section>
<section id="about">
<h2>Who Am I?</h2>
<div class="content-container">
<div class="text-container1">
<p class="ahtaung">Native of Myanmar (Burma)🇲🇲, born in a small town called
<b><em>Ahtaung(အထောင်).</em></b>
</p>
<p>
I grew up in a family that runs fashion & garments business.
At 14, I left my parents' house
to attend high school in Yangon (Rangoon).
Without even realizing what my passion is, I ended up joining med school. I never
enjoyed it, but
I graduated in 2012 and practiced medicine for five years until I joined my wife, who is in the UK
working for the NHS as a
Specialist Registrar.
</p>
<p>𝗙𝘂𝗻 𝗙𝗮𝗰𝘁𝘀:</p>
<ul class="fun">
<li>Love ☕, 🌲, sports, technology, movies (TBBT/Sheldon's Fan), attention to details, DIY &
numbers; obsessed with
car
registration plates.</li>
<li>🏃♂️ Running (half marathon x2, 10k x1, fun run 5k x1)</li>
<li>🥾 Hiking (I am a member of Universities Of Medicine Myanmar Hiking and Mountaineering Team,
have reached the summits of five 10,000+ft mountains 🏔️ in Myanmar)</li>
<li> 🚴 Cycling (in 2022, I taught my wife how to ride a bicycle at the age of 33)</li>
<li> 🧘♂️ Yoga (training 100+ hours), 🏸 badminton (intermediate), and 🏊♀️ swimming (I can swim,
yay 😁)
</li>
<li>⚽️Football/soccer, a (die-hard)Liverpool FC fan since 1998, YNWA!!! 🏆</li>
<li>***Last but not least, I built this website using my MacBook Air(2017), which I won as the
1<sup>st</sup> lucky draw prize from my local gym while I was in Myanmar.</li>
</ul>
</div>
<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12670256.752868298!2d86.76722891525309!3d17.347898164012083!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30c08d0356f0811b%3A0xf29a936f0958c296!2z4YChLuGAkS7hgIAg4YCh4YCR4YCx4YCs4YCE4YC6!5e0!3m2!1sen!2suk!4v1688058002045!5m2!1sen!2suk"
style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</iframe>
</div>
</div>
<div class="media-container">
<div class="carousel">
<div class="slides">
<img src="img/lucky.jpeg" alt="Paing receiving Macbook">
<img src="img/xgym.jpeg" alt="Paing receiving Macbook">
<img src="img/2011.PNG" alt="Dr.Paing Phyo Ko intern 2011">
<img src="img/maniquin.jpeg" alt="Paing Practising with maniquin">
<img src="img/volunteer.PNG" alt="Paing and wife volunteering">
<img src="img/sishouse.png" alt="Paing couple at hospital internship">
<img src="img/airedale.jpeg" alt="Paing NHS clinical attachment at Airedale Hospital">
<img src="img/rsh.jpeg" alt="Paing NHS clinical attachment at Shrewsbury Hosp">
<img src="img/kbz.png" alt="KBZ run">
<img src="img/run.png" alt="Running pose">
<img src="img/badminton.png" alt="Paing badminton">
<img src="img/airgun.png" alt="Paintball">
<img src="img/flag.png" alt="Paing with Myanmar flag at EDM">
<img src="img/ball.PNG" alt="Paing football">
<img src="img/help.png" alt="Paing helping / hiking">
<img src="img/hike.PNG" alt="Paing at summit">
<img src="img/yoga.PNG" alt="Paing yoga">
<img src="img/bike.PNG" alt="Paing on bike">
<img src="img/lfc.PNG" alt="LFC anfield">
<img src="img/lfcbike.PNG" alt="Paing lfc bike">
<img src="img/paddle.png" alt="with paddle board">
<img src="img/waterraft.jpeg" alt="Waterrafting">
<img src="img/zip.jpeg" alt="Zipline">
<img src="img/david.jpeg" alt="Prof. David Malan likes Paing post">
<img src="img/stickers.jpeg" alt="Stickers">
<img src="img/grinding.jpeg" alt="Grinding">
<img src="img/code.jpeg" alt="Coding">
<img src="img/workspace.jpeg" alt="Workspace">
<img src="img/house.PNG" alt="During intership A&E">
<img src="img/couple.PNG" alt="at wedding">
<img src="img/andy.PNG" alt="I took CS50">
<img src="img/dswc.PNG" alt="at DWSC millwall inner dock">
</div>
</div>
<iframe id="fbVideo"
src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2Fxgymlanmadaw%2Fvideos%2F1628651427207120%2F&show_text=false&width=267&t=768"
frameborder="0" allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</section>
<section id="why">
<!-- Explain why web dev -->
<h2>Why Web Dev?</h2>
<div class="content-wrapper">
<div class="text-container2">
<span class="pitch">
<p>
Growing up in Myanmar, I was always passionate about engineering and architecture, largely
inspired by my uncle(an architect engineer), who
was the only educated person I knew back then. Despite this passion, circumstances led me to
medical school, a journey I
didn't enjoy. I had serious doubts about my path, attempting to quit twice during my academic
years and once after
becoming a doctor. However, I met my wife during this time, which turned out to be the best &
highlight of this journey.
Consequently, I don’t regret joining medical school. After moving to the UK to join her via a
Spouse Visa, I
attempted to join the NHS, but unfortunately, it didn’t work out at the final stage. This
setback, coupled with unemployment, being a
stay-at-home husband, and the onset of the pandemic, had a significant impact on my mental
health; 2020 was the
toughest year of my life.
</p>
<p class="hide">
Determined to overcome these challenges, I took up jobs in retail in 2021 and grocery in 2022. I
decided to pursue a
career that genuinely excited me and resonated with my initial passion for problem-solving and
creation:
programming. I dedicated my free time to learning programming, self-studying using resources
like Harvard's CS50,
freeCodeCamp, Udemy, etc. However, with no one around to ask for help as I came from a different
background and being entirely new to the tech community, I found
myself stuck in “Tutorial Hells,” frequently experiencing Imposter Syndrome every now and then
but still learning alone with little progress. I then discovered Founders and Coders
(FAC) through the GOV.UK website and was inspired by the story of how it was founded by Dan. I
aspired to be one of those who have
succeeded through this programme.
</p>
<p class="hide">
Since May 2023, I’ve pushed myself out of my comfort zone by regularly and actively
participating in FAC meetups.
I’ve felt more alive and productive since joining these meetups, started to build real projects
not just tutorials, and my learning curve has increased exponentially
due to peer-to-peer learning. I even built my very first game, which was a challenging task for
me, especially as I
am more of an outdoors person. I find joy and a sense of belonging in the coding community,
something I didn't find
in medicine. I often find myself in a flow state while coding and sometimes lose track of time,
which I thoroughly
enjoy. To quote my senior, Manoela, from FAC25, who transitioned from being a primary
school teacher to
a developer, "I want to be <strong>HAPPY & TIRED"</strong> too by doing what I love. I still
remember one of the
PowerPoint slides from my first FAC meetup on 23rd May stating, "We're not looking for perfect
applications, we're
looking for effort, commitment, and a solid understanding of basic Javascript." So, I tried not
to miss any FAC
meetups on Tuesdays and LIFT meetups on Wednesdays. Now, I think I've become one of those
applicants. I'm not
perfect yet, but with my eagerness to learn new things, adaptability, flexibility, effort, and
commitment, I am
ready to turn this passion into a professional career.
</p>
</span>
<button id="toggleButton">Read More</button>
</div>
<div class="image-container">
<img src="img/google.jpeg" alt="Paing in front of Google UK" id="google">
</div>
</div>
</section>
<section id="portfolio">
<div class="container">
<h2>My Portfolio</h2>
<div class="projects">
<h3 class="proHeading">Projects</h3>
<div class="project-grid project-grid-3">
<!-- List projects here -->
<div class="project">
<h4>Virus Hunt</h4>
<img src="img/game-preview.png" alt="Virus Hunt Game">
<p>Game project for FAC application</p>
<a href="https://github.com/Paing-Ko/myGame" target="_blank">View on GitHub</a>
</div>
<div id="dadJokeContainer">
<h4><span class="white-bg">Dad Joke🤣Generator</span></h4>
<p id="joke"></p>
<div id="btnContainer">
<button id="getJoke">Get Joke</button>
</div>
</div>
<div class="weather-app">
<h4>Weather App</h4>
<input type="text" id="city" placeholder="Enter a city name">
<button id="getWeather">Get Weather</button>
<div id="weatherContainer"></div>
</div>
</div>
<div class="project-grid project-grid-4" id="second-row">
<div class="project">
<h4>Dilemma</h4>
<img src="img/dilemma.png" alt="CS50x Project">
<p>CS50x Final Project</p>
<a href="https://www.youtube.com/watch?v=geiXj-3h3Is&t=2s" target="_blank">View on Youtube</a>
</div>
<div class="project">
<h4>Sheldon's Game</h4>
<img src="img/sheldon.png" alt="CS50P Project">
<p>CS50P Final Project</p>
<a href="https://www.youtube.com/watch?v=OZLETC4oX8s&t=7s" target="_blank">View on Youtube</a>
</div>
<div class="project">
<h4>Google Search Clone</h4>
<img src="img/googleclone.png" alt="CS50W Search">
<p>CS50W Search Project</p>
<a href="https://www.youtube.com/watch?v=Ujdvlrt1Gj0&t=1s" target="_blank">View on Youtube</a>
</div>
<div class="project">
<h4>Wikipedia Clone</h4>
<img src="img/wikiclone.png" alt="project image">
<p>CS50W Wiki Project</p>
<a href="https://www.youtube.com/watch?v=NsVSIHE5eKs" target="_blank">View on Youtube</a>
</div>
</div>
<button id="toggle-button">See More</button>
</div>
</div>
<div class="learning">
<h3 class="learnHeading">Learning</h3>
<p class="learning-box">
<span class="first-letter">Embarking</span><strong> my coding journey</strong>, I initially cut my
teeth on Harvard's renowned CS50 course. It was this rigorous
foundation that set the stage for my subsequent exploration into the realm of programming. As I am a
fan of Prof.David J. Malan, I finished CS50x, CS50P, CS50T and started CS50W. Since I decided to
apply for FAC programme, I worked hard to compete the tasks the applicants need to finish; I learnt
basic HTML, CSS and Javascript on freeCodeCamp and MDN(including documents), and tried to reach 6
kyu rank on Codewars. Throughout this journey, I relied heavily on various online resources,
including YouTube, W3Schools and with the help of mentors & peers from FAC meetups, of course. I
also sought assistance from AI platforms such as ChatGPT, Bing & Bard to clarify my
doubts and
strengthen my understanding. I also learnt from the book written by Quincy Larson (the founder's of
freeCodeCamp) that it is important to build skill, reputation and network at the same time. I realized
that I was focusing on coding skill and lack the latter two. Therefore, I have been participating in
every FAC meetups and Code Reading Club Masterclass at Space4 regularly.
</p>
<div id="courses-table">
<table>
<tr>
<th>Course</th>
<th>Description</th>
<th>Certificate</th>
</tr>
<tr>
<td>CS50T</td>
<td>CS50’s introduction to technology for students who don’t (yet!) consider themselves computer
persons</td>
<td><a href="pdf/CS50T.pdf" target="_blank">See Certificate</a></td>
</tr>
<tr>
<td>CS50x</td>
<td>An introduction to the intellectual enterprises of computer science and the art of
programming</td>
<td><a href="pdf/CS50x.pdf" target="_blank">See Certificate</a></td>
</tr>
<tr>
<td>CS50P</td>
<td>An introduction to computer science with Python</td>
<td><a href="pdf/CS50P.pdf" target="_blank">See Certificate</a></td>
</tr>
<tr>
<td>Udemy</td>
<td>Web Development by Colt Steele</td>
<td><a href="pdf/colt.pdf" target="_blank">See Certificate</a></td>
</tr>
<tr>
<td>freeCodeCamp</td>
<td>Responsive Web Design(course recommended by FAC)</td>
<td><a href="https://www.freecodecamp.org/certification/Paing_Ko/responsive-web-design"
target="_blank">See Certificate</a></td>
</tr>
<tr>
<td>freeCodeCamp</td>
<td>JavaScript Algorithms and Data Structures(course recommended by FAC)</td>
<td><a href="https://www.freecodecamp.org/certification/Paing_Ko/javascript-algorithms-and-data-structures"
target="_blank">See Certificate</a></td>
</tr>
<tr>
<td>Code Reading Club</td>
<td>For anyone interested in getting better at reading code regardless of programming
experience</td>
<td><a href="https://www.eventbrite.co.uk/e/code-reading-club-a-deep-read-decisions-consequences-and-whys-tickets-607316258277?_gl=1*ah6pus*_up*MQ..&gclid=CjwKCAjwgqejBhBAEiwAuWHioIvzlQsKLQhSPMjSF1Y2H-qM9Zv_RDc8XV0gL3_EZsik4WZPdOZbQBoC420QAvD_BwE"
target="_blank">Eventbrite link</a></td>
</tr>
<tr>
<td>Quincy Larson's book</td>
<td>How to Learn to Code & Get a Developer Job [Full Book]</td>
<td><a href="https://www.freecodecamp.org/news/learn-to-code-book" target="_blank">FCC Book
link</a></td>
</tr>
</table>
</div>
<button id="table-toggle">Hide Courses</button>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="contact-content">
<div class="connect">
<h1>Let's <br> Connect</h1>
<ul class="social-list">
<li class="social-list__item">
<a class="social-list__link" target="_blank" href="https://www.freecodecamp.org/Paing_Ko">
<i class="fab fa-free-code-camp"></i>
</a>
</li>
<li class="social-list__item">
<a class="social-list__link" target="_blank"
href="https://www.codewars.com/users/Paing-Phyo-Ko">
<iconify-icon icon="simple-icons:codewars"></iconify-icon>
</a>
</li>
<li class="social-list__item">
<a class="social-list__link" target="_blank" href="https://github.com/Paing-Ko">
<i class="fab fa-github"></i>
</a>
</li>
<li class="social-list__item">
<a class="social-list__link" target="_blank" href="https://www.instagram.com/doc2dev/">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li class="social-list__item">
<a class="social-list__link" target="_blank" href="https://twitter.com/PaingPhyoKo">
<i class="fa-brands fa-twitter"></i>
</a>
</li>
<li class="social-list__item">
<a class="social-list__link" target="_blank" href="https://www.youtube.com/@paingpko">
<i class="fa-brands fa-youtube"></i>
</a>
</li>
</ul>
</div>
<div class="get-in-touch">
<h1>Get In Touch</h1>
<form id="contactForm" action="https://formspree.io/f/xleyrqna" method="POST">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Type Your Message</label>
<textarea class="message" id="message" name="message" placeholder="Hey, Paing..."
required></textarea>
<button id="submit" type="submit">Send</button>
</form>
</div>
</div>
</section>
<div class="line"></div>
<footer class="footer">
<div>
<p class="copy">©PPK_2023</p>
</div>
</footer>
<button id="back-to-top" title="Go to top">⬆️</button>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="script.js"></script>
</body>
</html>