-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
335 lines (335 loc) · 13 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ka Hung's Web Developer Portfolio</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Ka Hung's Web Developer Portfolio | React.js | Next.js | JavaScript | TypeScript | HTML5 | CSS3 | SASS | Tailwind CSS | MongoDB | Netlify | GitHub Pages"
/>
<meta name="theme-color" content="#323737" />
<link rel="stylesheet" href="./styles.css" />
<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=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap"
rel="preload"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript
><link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap"
rel="stylesheet"
/></noscript>
</head>
<body>
<div class="layout-grid">
<header>
<nav class="nav-bar" id="nav-bar">
<div class="nav-bar__ctnr">
<div class="nav-bar__group" id="nav-bar__group">
<a href="#home" class="nav-bar__link">Home</a>
<a href="#about" class="nav-bar__link">About</a>
<a href="#projects" class="nav-bar__link">Projects</a>
</div>
</div>
<div class="nav-bar__ctnr">
<label class="nav-bar__toggler rounded grey-back">
<input
class="nav-bar__toggle"
id="nav-bar__toggle"
type="checkbox"
onclick="darkLightMode()"
/>
<div
class="nav-bar__slider rounded short-transition light-back"
></div>
</label>
</div>
</nav>
</header>
<main>
<section class="home hidden" id="home">
<div class="home__ctnr" id="home__ctnr">
<h1 class="home__header slide-down-header" id="home__header">
Hi, my name is Ka Hung!
</h1>
<p class="home__intro" id="home__intro">I am a web developer!</p>
</div>
</section>
<section class="about hidden" id="about">
<h1>About Me</h1>
<div class="boxes-ctnr"></div>
<div class="boxes-ctnr-2"></div>
<div class="boxes-ctnr-3"></div>
<div class="boxes-ctnr-4"></div>
<div class="about__ctnr">
<div class="about__img-ctnr">
<img
class="about__self-photo rounded"
src="./images/self_photo.webp"
alt="picture of Ka Hung"
/>
<a
class="about__link light-font rounded"
href="https://drive.google.com/file/d/1KXGZxqBQJV9LxTSg5G6pSGvnkH5t_Be_/view?usp=sharing"
target="_blank"
>View Resume</a
>
</div>
<article class="about__about-me">
Although I've been around word processers and spreadsheets for
most of my academic career, it wasn't until my time as a
researcher did I get my first taste of programming. In my area of
research, there were many tasks that could only be achieve through
a computer, so I had to "learn to code".
<br />
<br />
Over time, I've picked up several languages for my work in
research, namely Bash on the shell and Python on Jupyter
Notebooks. In late 2021, however, I've decided to picked up HTML,
CSS, and JavaScript as a hobby and built
<a
href="https://leekahung.github.io/programming-portfolio/"
target="_blank"
>my very first website from scratch</a
>.
<br />
<br />
It was a refreshing experience for me. Never had I can personally
build components that are both dynamic and interactive in
real-time. By mid-2022, I was fully engaged in building my current
developer portfolio and learning to build web applications from
scratch. It was during that time, I've learned to use libraries
like React.js, pre-processors like SASS, and TypeScript for
type-safety.
<br />
<br />
Currently, I'm active in open-sourced projects, testing what I've
learned to real-world applications. I'm an active contributor for
Code for PDX, namely with their
<a href="https://github.com/codeforpdx/PASS/" target="_blank"
>PASS Project</a
>, an application meant for the digital storage of documents using
Solid Pods. I'm also a contributor to
<a href="https://github.com/WarsWorld/WarsWorld" target="_blank"
>Wars World</a
>, a community-lead effort to create a modernized version of the
popular Advance Wars By Web.
</article>
</div>
<div class="about__skills rounded short-transition">
<div class="about__skill-type">
<h2>Developer</h2>
<div class="about__skill-type-content">
<p class="about__skill-topic">Languages/Frameworks I use:</p>
<p>
React.js, Next.js, JavaScript, TypeScript, HTML, CSS, SASS,
Tailwind CSS
</p>
</div>
<div class="about__skill-type-content">
<p class="about__skill-topic">Commonly used Dev Tools:</p>
<ul class="about__skills-list">
<li>GitHub</li>
<li>Netlify</li>
<li>MongoDB</li>
<li>Terminal</li>
<li>VSCode</li>
</ul>
</div>
</div>
</div>
</section>
<section class="projects hidden" id="projects">
<h1>Projects</h1>
<div class="proj-ctnr">
<div class="proj-ctnr__card rounded short-transition">
<a
class="proj-ctnr__link"
href="https://github.com/warsWorld/WarsWorld/"
target="_blank"
>
<div class="proj-ctnr__card-top">
<div class="proj-ctnr__img-placeholder"></div>
<div class="proj-ctnr__desc-ctnr">
<p class="proj-ctnr__desc">
(Under construction) A modern version of Advance Wars By
Web
</p>
</div>
</div>
<div class="proj-ctnr__card-bottom light-font">
<span class="slide-in-color">Wars World</span>
</div>
</a>
<a
class="proj-ctnr__repo-link rounded grey-back light-font"
href="https://github.com/warsWorld/WarsWorld/"
target="_blank"
>
<span class="proj-ctnr__repo-span rounded">
View Source Code
</span>
</a>
</div>
<div class="proj-ctnr__card rounded short-transition">
<a
class="proj-ctnr__link"
href="https://passsmartwallet-967e217a2652.herokuapp.com/"
target="_blank"
>
<div class="proj-ctnr__card-top">
<div class="proj-ctnr__img-placeholder"></div>
<div class="proj-ctnr__desc-ctnr">
<p class="proj-ctnr__desc">
(Under construction) A digital storage for files and
digitized documents using the Solid Pod model
</p>
</div>
</div>
<div class="proj-ctnr__card-bottom light-font">
<span class="slide-in-color">PASS</span>
</div>
</a>
<a
class="proj-ctnr__repo-link rounded grey-back light-font"
href="https://github.com/codeforpdx/PASS"
target="_blank"
>
<span class="proj-ctnr__repo-span rounded">
View Source Code
</span>
</a>
</div>
<div class="proj-ctnr__card rounded short-transition">
<a
class="proj-ctnr__link"
href="https://khl-event-calendar.netlify.app"
target="_blank"
>
<div class="proj-ctnr__card-top">
<img
class="proj-ctnr__img"
src="./images/event-calendar.webp"
alt="preview image of event calendar app"
/>
<div class="proj-ctnr__desc-ctnr">
<p class="proj-ctnr__desc">
An event calendar built using React.
</p>
</div>
</div>
<div class="proj-ctnr__card-bottom light-font">
<span class="slide-in-color">Event Calendar</span>
</div>
</a>
<a
class="proj-ctnr__repo-link rounded grey-back light-font"
href="https://github.com/leekahung/event-calendar-v2"
target="_blank"
>
<span class="proj-ctnr__repo-span rounded">
View Source Code
</span>
</a>
</div>
<div class="proj-ctnr__card rounded short-transition">
<a
class="proj-ctnr__link"
href="https://khl-bloglist-app.netlify.app/"
target="_blank"
>
<div class="proj-ctnr__card-top">
<img
class="proj-ctnr__img"
src="./images/bloglist-app.webp"
alt="preview image of documentation page"
/>
<div class="proj-ctnr__desc-ctnr">
<p class="proj-ctnr__desc light-font">
A CRUD app that can save and store information about
blogs.
</p>
</div>
</div>
<div class="proj-ctnr__card-bottom light-font">
<span class="slide-in-color">Blog List App</span>
</div>
</a>
<a
class="proj-ctnr__repo-link rounded grey-back light-font"
href="https://github.com/leekahung/fullstackopen-bloglist-app"
target="_blank"
>
<span class="proj-ctnr__repo-span rounded">
View Source Code
</span>
</a>
</div>
</div>
</section>
<div id="top-btn-ctnr" class="slide-out">
<a id="top-btn-link" href="#home">
<div class="top-btn small-box light-back">
<img
class="icon small-box"
src="./images/back_to_top_icon.webp"
alt="swipe up icon"
/>
</div>
</a>
</div>
</main>
<footer>
<h1>Contacts</h1>
<address>
<div class="contact-info">
<p>
Email:
<a id="email" href="mailto:[email protected]"
>
</p>
<p>Phone: (503)-914-7790</p>
<p>Location: Portland, OR, USA</p>
</div>
<br />
<div class="social-ctnr">
<i class="icon small-box" id="github-icon">
<a href="https://github.com/leekahung" target="_blank">
<img
class="icon-pic"
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg"
alt="github icon"
/>
</a>
</i>
<i class="icon small-box">
<a
href="https://www.linkedin.com/in/ka-hung-lee/"
target="_blank"
>
<img
class="icon-pic"
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg"
alt="linkedin icon"
/>
</a>
</i>
</div>
<br />
<a
id="created-by"
href="https://github.com/leekahung/web-dev"
target="_blank"
>© 2022 Ka Hung Lee</a
>
</address>
</footer>
</div>
<script src="./script.js"></script>
</body>
</html>