cag2mark.github.io/about.html at master · CAG2Mark/cag2mark.github.io · GitHub

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
<!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>About | Mark Ng</title>

    <!-- GLOBAL CSS & FONTS -->
    <link rel="stylesheet" href="styles/global.css?version=20">
    <link href="content/fonts/fonts.css?version=1" rel="stylesheet">

    <link rel="stylesheet" href="styles/about.css?version=7">

    <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">

    <!--  Essential META Tags -->

    <meta property="og:title" content="About">
    <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/about.html">
    <meta name="twitter:card" content="summary_large_image">


    <!--  Non-Essential, But Recommended -->

    <meta property="og:site_name" content="About">
    <meta name="twitter:image:alt" content="Mark Ng Emblem">
</head>

<body>

    <a class="skip-main" href="#section-about">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="./index.html" target="_self" data-section-pair="cover">Home</a></li>
                <li><a class="linkfix noselect navigation-selected" href="./about.html" target="_self" data-section-pair="about">About</a></li>
                <li><a class="linkfix noselect" href="./projects.html" target="_self"
                        data-section-pair="projects">Projects</a></li>
                <li><a class="linkfix noselect" href="./index.html#contact" target="_self" data-section-pair="contact"
                        data-section-bottom="true">Contact</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="section" id="section-about">
        <div id="navbar-pad"></div>
        <div class="section-content">
            <a href="index.html" class="indented-link back-link" draggable="false" target="_self">← Back to Home</a>
            <div class="info-row-flex">
                <div class="info-col">
                    <h1 class="red-color">Hey, I'm Mark!</h1>
                    <p>
                        I'm a student from Hong Kong doing research in Computer Science.
                        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>PhD in Computer Science at HKUST (2029), funded by the <a class="fancy-link" target="_blank" href="https://cerg1.ugc.edu.hk/hkpfs/index.html">HKPFS</a></li>
                            <li>BSc in Computer Science and Mathematics, HKUST (2025)</li>
                        </ul>
                        <h2>
                            Interests
                        </h2>
                        <ul>
                            <li>Computer Science &amp; Programming</li>
                            <li>Mathematics</li>
                            <li>Classical Music & Piano</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section" id="section-edu">
        <div class="section-content">
            <div class="info-row-flex">
                <div class="info-col">
                    <h1>Education</h1>
                    <p>
                        I am a PhD student in computer science at the <b>Hong Kong University of Science and Technology</b>.
                        I also completed my undergradaute studies here, and obtained a BsC in Computer Science and Mathematics
                        with the <a href="https://registry.hkust.edu.hk/academic-achievement-medal" target="_blank" class="fancy-link">academic achievement medal</a>
                        and first class honors.
                    </p>
                </div>
                <div class="info-col">
                    <h2>Research Interests</h2>
                    <div class="fancy-tag-container">
                        <div class="fancy-tag-item">Compilers</div>
                        <div class="fancy-tag-item">Program Optimization</div>
                        <div class="fancy-tag-item">Algorithms</div>
                    </div>
                    <hr>
                    <a class="info-panel info-panel-link" href="education.html" target="_self">
                        <span class="panel-link">
                            <span class="panel-link-text">More About my Education</span>
                            <img class="panel-link-arrow" src="content/icons/arrow.svg">
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="section" id="section-music">
        <div class="section-content">
            <div class="info-row-flex">
                <div class="info-col">
                    <h1>Music</h1>
                    <p>
                        I enjoy classical music and play the piano. I have no teacher and play for leisure.
                        These days, I mostly focus on the intermediate to advanced romantic repertoire, mostly
                        from Chopin, but I sometimes dabble in works by other composers like Schubert, Bach or
                        Beethoven.
                    </p>
                    <p>
                        The pieces I have played (but cannot necessarily perform) include:
                        <ul>
                            <li>Chopin: Nocturne in B-flat minor, Op. 9 No. 1</li>
                            <li>Chopin: Andante Spianato from Op. 22</li>
                            <li>Chopin: Waltz in A-flat Major, Op. 69 No. 1</li>
                            <li>Chopin: Ballade in G minor, Op. 23 <a class="fancy-link" target="_blank" href="https://www.youtube.com/watch?v=774eTt7aQUc">Recording</a></li>
                            <li>Chopin: Ballade in F minor, Op. 52</li>
                            <li>Chopin: Polonaise-Fantasy in A-flat Major, Op. 61 <a class="fancy-link" target="_blank" href="https://www.youtube.com/watch?v=f9zChez6yb4">Recording</a></li>
                            <li>Chopin: Nocturne in B Major, Op. 62 No. 1</li>
                            <li>Chopin: Fantaisie-Impromptu in C-sharp minor, Op. 66</li>
                            <li>Chopin: Nocturne in C-sharp minor, WN 37</li>
                            <li>Debussy: Arabesque 1</li>
                            <li>Debussy: Clair de Lune</li>
                        </ul>
                        I am currently learning:
                        <ul>
                            <li>Chopin: Ballade 1 in G minor, Op. 23 (polishing)</li>
                            <li>Chopin: Barcarolle in F# Major, Op. 60</li>
                            <li>Chopin: Nocturne in E Major, Op. 62 No. 2</li>
                        </ul>
                    </p>
                </div>
                <div class="info-col" style="text-align: center;">
                    <img src="content/about/op61.jpg" class="about-img" alt="Thumbnail of Chopin Opus 61, Polonaise-Fantasy recording">
                    <a href="https://www.youtube.com/watch?v=f9zChez6yb4" class="fancy-link" target="_blank">Chopin Op. 61 Recording</a>
                </div>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="section" id="footer">

        <p id="copyright">
            © 2026 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>
</body>

</html>