-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
339 lines (308 loc) · 15.6 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
<!DOCTYPE html>
<html lang="en" data-scroll="30">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio of Mark Ng</title>
<!-- GLOBAL CSS & FONTS -->
<link rel="stylesheet" href="styles/global.css?version=19">
<link href="content/fonts/inter.css?version=1" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="content/icons/favicon.ico">
<!-- PAGE SPECIFIC CSS -->
<link rel="stylesheet" href="styles/home.css?version=13">
<!-- Essential META Tags -->
<meta property="og:title" content="Portfolio of Mark Ng">
<meta property="og:description" content="I code and tinker. Check out all my work over my life.">
<meta property="og:image" content="https://markng.com/content/thumb.png">
<meta property="og:url" content="https://markng.com/">
<meta name="twitter:card" content="summary_large_image">
<!-- Non-Essential, But Recommended -->
<meta property="og:site_name" content="Portfolio of Mark Ng">
<meta name="twitter:image:alt" content="Mark Ng Emblem">
</head>
<body>
<a class="skip-main" href="#cover">Skip to main content</a>
<!-- top navigation -->
<div class="navigation navigation-background noselect" id="navbar">
</div>
<div class="navigation noselect navigation-container">
<div class="noselect">
<div id="hamburger-wrapper">
<div class="hamburger-line hamburger-line-top" id="hamburger-line-top"></div>
<div class="hamburger-line hamburger-line-bottom" id="hamburger-line-bottom"></div>
</div>
<ul class="navigation-list noselect" id="navigation-list">
<li><a class="linkfix noselect" href="./#cover" target="_self" data-section-pair="cover">Home</a></li>
<li><a class="linkfix noselect" href="./#about" target="_self" data-section-pair="about">About</a></li>
<li><a class="linkfix noselect" href="./#projects" target="_self"
data-section-pair="projects">Projects</a></li>
<li><a class="linkfix noselect" href="./#contact" target="_self" data-section-pair="contact"
data-section-bottom="true">Contact</a>
</li>
</ul>
</div>
</div>
<!-- cover -->
<div class="section" id="cover">
<div id="cover-wrap" class="section-content">
<span id="name-wrap">
<div class="vertical-align" id="name-container">
<span class="name-item" id="name-first">Mark</span>
<div class="name-item" id="name-sep"></div>
<span class="name-item" id="name-second">Ng.</span>
</div>
</span>
<span id="emblem-wrap">
<div class="vertical-align" id="emblem-container">
<svg id="mn-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<path id="emblemM"
d="M32 463v-40-94-113-98-32-15-1l-19 8 66 69 106 109 24 25c7 7 19 2 19-8v-68V95 70l-19 8 67 69 105 109 24 25c10 10 26-6 16-16l-66-69L249 87l-24-25c-7-7-19-2-19 8v203l19-8-66-68L53 87 29 62c-7-7-19-2-19 8v393c0 15 22 15 22 0z" />
<path id="emblemMid"
d="M72 463V363 206v-36l-19 8 66 69 106 110 24 24c7 8 19 2 19-7v-69-110-25l-19 8 66 69 106 109 24 25c7 7 19 2 19-8V270 107 70c0-15-22-15-22 0v303l19-8-67-69-105-109-24-25c-7-7-19-2-19 8v204l19-8-67-69L93 187l-25-25c-6-7-19-2-19 8v293c0 15 23 15 23 0z" />
<path id="emblemN"
d="M307 463v-66-108-24l-19 8 67 69 105 109 24 25c7 7 19 2 19-8v-40-95-114-100-48-1c0-15-22-15-22 0v398l19-8-67-69-105-109-24-25c-7-7-19-2-19 8v198c0 15 22 15 22 0z" />
</svg>
</div>
</span>
</div>
</div>
<div class="section" id="about">
<div class="section-content" id="about-wrapper">
<div class="info-row-flex">
<div class="info-col">
<h1 class="red-color big">Hey, I'm Mark!</h1>
<p>
I'm a student from Hong Kong studying Computer Science and Mathematics.
I enjoy classical music and play the piano as a hobby.
</p>
<p>
Feel free to look around! You can find out more information about me by
clicking on the card in this section, or scroll down to find out about
some of my past projects.
</p>
</div>
<div class="info-col">
<div class="info-panel">
<h2>
Education
</h2>
<ul>
<li>IB Alumni</li>
<li>Studying at The Hong Kong University of Science and Technology</li>
<li>Graduating in 2025</li>
</ul>
<h2>
Interests
</h2>
<ul>
<li>Computer Science & Programming</li>
<li>Mathematics</li>
<li>Classical Music & Piano</li>
</ul>
</div>
<a class="info-panel info-panel-link" href="about.html" target="_self">
<span class="panel-link">
<span class="panel-link-text">More About Me</span>
<img class="panel-link-arrow" src="content/icons/arrow.svg">
</span>
</a>
</div>
</div>
</div>
</div>
<!-- past projects -->
<div class="section" id="projects">
<div class="section-content">
<div class="info-row-flex">
<div class="info-col">
<h1 class="red-color big">Projects.</h1>
<p>
I've handpicked a shortlist of past projects below.
You can also check out my full list of projects or my GitHub.
</p>
</div>
<div class="info-col">
<a class="info-panel info-panel-link" href="projects.html" target="_self">
<span class="panel-link">
<span class="panel-link-text">All Projects</span>
<img class="panel-link-arrow" src="content/icons/arrow.svg">
</span>
</a>
<a class="info-panel info-panel-link" href="https://github.com/CAG2Mark">
<span class="panel-link">
<span class="panel-link-text">My GitHub</span>
<img class="panel-link-arrow" src="content/icons/arrow.svg">
</span>
</a>
</div>
</div>
<div class="info-row-flex">
<h1>Personal Projects</h1>
</div>
<div class="info-row-grid">
<a class="info-panel info-panel-link" href="https://github.com/CAG2Mark/wasm-math-evaluator">
<h2>wasm-math-evaluator</h2>
<p>
A symbolic math evaluator library written in Rust for the web.
Includes a handwritten parser and custom implementations for
certain maths functions, and compiles to WebAssembly.
</p>
<span class="panel-link">
<span class="panel-link-text">GitHub Page</span>
<img class="panel-link-arrow" src="content/icons/arrow.svg">
</span>
</a>
<a class="info-panel info-panel-link" href="https://github.com/CAG2Mark/caglang">
<h2>caglang</h2>
<p>
An expression-oriented, statically typed programming language, with first-class support for
algebraic data types. This is more of a project for learning than anything else.
</p>
<span class="panel-link">
<span class="panel-link-text">GitHub Page</span>
<img class="panel-link-arrow" src="content/icons/arrow.svg">
</span>
</a>
<a class="info-panel info-panel-link" href="https://github.com/CAG2Mark/OpenSkillBot">
<h2>OpenSkillBot</h2>
<p>
A Discord bot for competitive game servers to manage players.
This was created as a way for me to learn the Discord API.
</p>
<span class="panel-link">
<span class="panel-link-text">GitHub Page</span>
<img class="panel-link-arrow" src="content/icons/arrow.svg">
</span>
</a>
<a class="info-panel info-panel-link" href="https://github.com/CAG2Mark/MathsTest2024">
<h2>Maths Test Framework (2024)</h2>
<p>
A framework for creating client-side maths assignments
with automatic answer checking. This was created for a
separate April Fools joke, but has genuine utility.
</p>
<span class="panel-link">
<span class="panel-link-text">GitHub Page</span>
<img class="panel-link-arrow" src="content/icons/arrow.svg">
</span>
</a>
</div>
<div class="info-row-flex">
<h1>Public Software</h1>
</div>
<div class="info-row-grid">
<a class="info-panel info-panel-link" href="flylivestudio.html?from=home" target="_self">
<h2>FlyLive Studio</h2>
<p>
A flight simulator streaming suite offering unparalleled
flexibility, and is used by some of the biggest
livestreamers.
</p>
<span class="panel-link">
<span class="panel-link-text">Find Out More</span>
<img class="panel-link-arrow" src="content/icons/arrow.svg">
</span>
</a>
<a class="info-panel info-panel-link" href="flychrono2.html?from=home" target="_self">
<h2>FlyChrono v2</h2>
<p>
FlyChrono v2 is an open source flight simulator time-syncing tool. It aims to
provide more and better features than existing paid solutions
for free, while improving on my FlyChrono application.
</p>
<span class="panel-link">
<span class="panel-link-text">Find Out More</span>
<img class="panel-link-arrow" src="content/icons/arrow.svg">
</span>
</a>
</div>
<div class="info-row-flex">
<h1>Research Work</h1>
</div>
<div class="info-row-grid">
<div class="info-panel">
<h2>MLscript</h2>
<p>
Under HKUST's UROP program, I implemented <a href="https://github.com/hkust-taco/mlscript/pull/218" target="_blank">tail-recursion modulo cons</a> in the
<a href="https://github.com/hkust-taco/mlscript" target="_blank">MLscript programming language</a>.
MLscript is a programming language designed with type inference and soundness in mind and compiles to many targets, including JavaScript. It is developed by
HKUST's <a href="https://cse.hkust.edu.hk/~parreaux/" target="_blank">TACO Lab</a>.
</p>
</div>
</div>
<div class="info-row-flex">
<h1>Work for Organisations</h1>
</div>
<div class="info-row-grid">
<div class="info-panel">
<h2>HSSC</h2>
<p>
I had created a blog system and a "Word of the Day" widget for a school organisation
known as the Humanities and Social Sciences Council.
</p>
</div>
<a class="info-panel info-panel-link" href="http://issiamagazine.com/">
<h2>ISSIA Magazine</h2>
<p>
The ISSIA is an international inter-school organisation aimed at cultivating
global citizenship. I created their magazine website with a custom static
site generator that acts as a blog system.
</p>
<span class="panel-link">
<span class="panel-link-text">Visit ISSIA Magazine</span>
<img class="panel-link-arrow" src="content/icons/arrow.svg">
</span>
</a>
</div>
</div>
</div>
<!-- get in touch -->
<div class="section" id="contact">
<div class="section-content">
<div class="info-row-flex">
<div class="info-col">
<h1 class="red-color big">Get in Touch.</h1>
<p>
Feel free to ask me anything about my
skills or potential project ideas!
</p>
<p>
If you would like my resume or CV,
please email me directly and let me know why you need it.
</p>
</div>
<div class="info-col" id="contact-container">
<div id="email-container">
<a id="email-text">JavaScript required</a>
</div>
<a style="margin-top: 12px" target="_blank" href="https://www.linkedin.com/in/mark-ng-b3958b135/"
class="fa fa-linkedin"></a>
<a style="margin-top: 12px" target="_blank" href="https://www.github.com/cag2mark"
class="fa fa-github"></a>
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="section" id="footer">
<p id="copyright">
© 2024 Mark Ng
<br>
<span style="font-size: 16px">
This portfolio and all of its systems are designed by Mark Ng
</span>
<br>
<br>
<span style="font-size: 16px">
Licensed under the GNU GPL-3.0 License
</span>
</p>
</div>
<!-- scripts -->
<script src="scripts/global.js?version=3"></script>
<script src="scripts/home.js?version=7"></script>
<script src="scripts/eggs.js"></script>
</body>
</html>