jsonresume-theme-class-yaucp
Version:
Class Theme for JSON Resume
682 lines (639 loc) • 21.9 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Yau Chin Pang (Thomas)</title>
<meta name="description" content="Hello there👋🏻! &lt;br /&gt;&lt;br /&gt;I took a gap semester for a full-time internship in Finverse Technologies in the 2022 Autumn semester. &lt;br /&gt;&lt;br /&gt;Mostly familiar with JavaScript (Typescript/Node.js) and Python now. I also have experience using Java, C++/C, Go, and Haskell (Had a ton of fun using Haskell! Very Interested using it for my graduate job)&lt;br /&gt;Interested working in backend in the future...&lt;br /&gt;&lt;br /&gt;Learning GoLang, gRPC, Swift and PostgreSQL for my final year project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap">
<style>:root {
/* Colors */
--primaryColor: #212529;
--secondaryColor: #95a5a6;
--accentColor: #f1c40f;
--linkColor: #2ecc71;
--mutedColor: #f4f6f6;
/* Typography */
--ratio: 1.25;
--scale0: 1rem;
--scale1: calc(var(--scale0) * var(--ratio));
--scale2: calc(var(--scale1) * var(--ratio));
--scale3: calc(var(--scale2) * var(--ratio));
--scale4: calc(var(--scale3) * var(--ratio));
--scale5: calc(var(--scale4) * var(--ratio));
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 14px;
}
body {
color: var(--primaryColor);
display: grid;
font: 1em/1.5 Lato, sans-serif;
gap: 2em;
grid-template-columns:
[full-start]
1fr
[main-start side-start]
minmax(min-content, 12em)
[side-end content-start]
minmax(min-content, 36em)
[main-end content-end]
1fr
[full-end];
grid-template-rows: auto [content] 0;
margin-bottom: 4em;
}
body::before {
content: '';
grid-column: full;
grid-row: content;
}
ol,
ul {
padding-left: 1em;
}
li + li {
margin-top: 0.2em;
}
li::marker {
color: var(--mutedColor);
}
a {
color: var(--linkColor);
text-decoration: none;
transition: color 0.2s;
}
a:focus,
a:hover {
color: var(--accentColor);
}
h1,
h2,
h3,
h5 {
font-weight: normal;
}
h1,
h2,
h3 {
line-height: 1.2;
}
h1 {
font-size: var(--scale5);
}
h2 {
color: var(--secondaryColor);
font-size: var(--scale4);
}
h3 {
color: var(--accentColor);
font-size: var(--scale3);
grid-column: side;
margin-bottom: 1rem;
}
h4 {
font-size: var(--scale2);
}
h5 {
font-size: var(--scale1);
}
h6 {
font-size: var(--scale0);
}
blockquote {
border-left: 0.2em solid var(--mutedColor);
padding-left: 1em;
}
cite {
color: var(--secondaryColor);
font-style: inherit;
}
cite::before {
content: '— ';
}
.masthead {
background: var(--mutedColor);
display: inherit;
gap: inherit;
grid-column: full;
grid-template-columns: inherit;
padding: 4em 0;
row-gap: 0;
}
.masthead > *,
section {
grid-column: main;
}
article > * + *,
blockquote > * + * {
margin-top: 0.6em;
}
.stack {
display: grid;
gap: 1.5em;
}
.grid-list {
display: grid;
gap: 1em;
}
.spaced-list {
display: flex;
align-items: center;
justify-content: space-between;
}
.spaced-list:first-child::before {
border-bottom: 1px solid var(--mutedColor);
content: '';
flex-grow: 1;
margin: 0 1em;
order: 1;
}
.spaced-list > :nth-child(2) {
order: 2;
}
.tag-list {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
}
.tag-list > li {
background: var(--mutedColor);
margin: 0 0.2em 0.2em 0;
padding: 0.2em 0.6em;
}
@media print, (min-width: 48em) {
h3 {
text-align: right;
margin-bottom: inherit;
}
.masthead > *,
section {
grid-column: content;
}
section {
display: contents;
}
.grid-list {
grid-template-columns: 1fr 1fr;
}
}
</style>
</head>
<body>
<header class="masthead">
<h1>Yau Chin Pang (Thomas)</h1>
<h2>HKUCS@2024</h2>
</header>
<section id="contact">
<h3>Contact</h3>
<div class="grid-list">
<div>
<h4>Email</h4>
<a href="mailto:me@yaucp.dev">me@yaucp.dev</a>
</div>
<div>
<h4>Phone</h4>
+852 51136393
</div>
<div>
<h4>Website</h4>
<a href="https://yaucp.dev">yaucp.dev</a>
</div>
</div>
</section>
<section id="about">
<h3>About</h3>
<article>
<p>Hello there👋🏻! <br /><br />I took a gap semester for a full-time internship in Finverse Technologies in the 2022 Autumn semester. <br /><br />Mostly familiar with JavaScript (Typescript/Node.js) and Python now. I also have experience using Java, C++/C, Go, and Haskell (Had a ton of fun using Haskell! Very Interested using it for my graduate job)<br />Interested working in backend in the future...<br /><br />Learning GoLang, gRPC, Swift and PostgreSQL for my final year project</p>
</article>
</section>
<section id="profiles">
<h3>Profiles</h3>
<div class="grid-list">
<div>
<h4>LinkedIn</h4>
<a href="https://www.linkedin.com/in/yaucp/">yaucp</a>
</div>
<div>
<h4>GitHub</h4>
<a href="https://github.com/yaucp/">yaucp</a>
</div>
</div>
</section>
<section id="work">
<h3>Work</h3>
<div class="stack">
<article>
<header>
<div class="spaced-list">
<h4>Molekiu Limited</h4>
<span>
<time datetime="2023-10">Oct 2023</time> –
Present
</span>
</div>
<div class="spaced-list">
<strong>Software Developer (Part-time)</strong>
<a href=""></a>
</div>
</header>
</article>
<article>
<header>
<div class="spaced-list">
<h4>Metamory.io</h4>
<span>
<time datetime="2023-06">Jun 2023</time> –
<time datetime="2023-07">Jul 2023</time>
</span>
</div>
<div class="spaced-list">
<strong>Software Engineer Intern</strong>
<a href=""></a>
</div>
</header>
<h5>Highlights</h5>
<ul>
<li>Added OAuth-Based Authentication to Next.js website with Auth.js</li>
<li>Built a demo/POC with Stripe's Payment API with its Custom Payment Elements and Prebuilt Checkout Page</li>
</ul>
</article>
<article>
<header>
<div class="spaced-list">
<h4>Finverse Technologies</h4>
<span>
<time datetime="2023-01">Jan 2023</time> –
<time datetime="2023-01">Jan 2023</time>
</span>
</div>
<div class="spaced-list">
<strong>Software Engineer Intern (Part-time)</strong>
<a href="https://www.finverse.com">www.finverse.com</a>
</div>
</header>
</article>
<article>
<header>
<div class="spaced-list">
<h4></h4>
<span>
<time datetime="2022-07">Jul 2022</time> –
<time datetime="2022-12">Dec 2022</time>
</span>
</div>
<div class="spaced-list">
<strong>Software Engineer Intern (Full-time)</strong>
<a href="https://www.finverse.com">www.finverse.com</a>
</div>
</header>
<h5>Highlights</h5>
<ul>
<li>Successfully integrated major commercial banks into the internal open-banking system through reverse engineering and secure web scraping in TypeScript and Node.js.</li>
<li>Facilitated efficient micro-service communications using Go and gRPC.</li>
<li>Trained a machine learning model using Python for solving captchas, incorporating image pre-processing techniques, and successfully deployed to production via Google Cloud Platform’s bucket storage.</li>
<li>Developed a demo showcasing API functionality in React.js, leading to enhanced clarity for external clients regarding the platform's capabilities.</li>
<li>Enhanced code quality by implementing unit tests using Jest and Nock, resulting in a reduction in system bugs.</li>
</ul>
</article>
<article>
<header>
<div class="spaced-list">
<h4>Thales</h4>
<span>
<time datetime="2021-07">Jul 2021</time> –
<time datetime="2021-08">Aug 2021</time>
</span>
</div>
<div class="spaced-list">
<strong>Software Intern</strong>
<a href=""></a>
</div>
</header>
<h5>Highlights</h5>
<ul>
<li>Used Python to verify and search for missing files or lines according to specifications</li>
<li>Configured database that stores status and commands of equipment in the station in Unix system</li>
</ul>
</article>
<article>
<header>
<div class="spaced-list">
<h4>Esri China (Hong Kong)</h4>
<span>
<time datetime="2021-06">Jun 2021</time> –
<time datetime="2021-07">Jul 2021</time>
</span>
</div>
<div class="spaced-list">
<strong>Programmer Trainee Intern</strong>
<a href=""></a>
</div>
</header>
<h5>Highlights</h5>
<ul>
<li>Used Python to collect and group real-time open data to update local geodatabase in ArcGIS Pro</li>
</ul>
</article>
</div>
</section>
<section id="volunteer">
<h3>Volunteer</h3>
<div class="stack">
<article>
<header>
<div class="spaced-list">
<h4>Referalah</h4>
<span>
<time datetime="2023-10">Oct 2023</time> –
Present
</span>
</div>
<div class="spaced-list">
<strong>Next.js Web Developer/Maintainer</strong>
<a href="https://www.referalah.com">www.referalah.com</a>
</div>
</header>
<p>Referalah is an open-sourced platform for overseas HongKongers to network for job referrals, connect for job opportunities, and support each other.</p>
</article>
<article>
<header>
<div class="spaced-list">
<h4>Campus TV, HKUSU, Session 2020-2021</h4>
<span>
<time datetime="2020-03">Mar 2020</time> –
<time datetime="2021-02">Feb 2021</time>
</span>
</div>
<div class="spaced-list">
<strong>Chairperson & Student Press</strong>
<a href="https://www.facebook.com/hkucampustv/">www.facebook.com/hkucampustv</a>
</div>
</header>
<p>Campus TV is a student-run media organization in HKU. We produce videos and articles to report on campus news and events. We make a large variety of videos from memes, to interviews with HKU Council or student bodies candidates. We also have a Facebook page with over 100,000 followers.</p>
</article>
</div>
</section>
<section id="education">
<h3>Education</h3>
<div class="stack">
<article>
<header>
<div class="spaced-list">
<h4>The University of Hong Kong</h4>
<span>
<time datetime="2019-09">Sep 2019</time> –
<time datetime="2024-06">Jun 2024</time>
</span>
</div>
<div class="spaced-list">
<strong>Computer Science</strong>
</div>
</header>
<h5>Courses</h5>
<ul>
<li>COMP2119 - Introduction to data structures and algorithms</li>
<li>COMP2120 - Computer organization</li>
<li>COMP2396 - Object-oriented programming and Java</li>
<li>COMP3230 - Principles of operating systems</li>
<li>COMP3251 - Algorithm design</li>
<li>COMP3258 - Functional programming (Haskell)</li>
<li>COMP3259 - Principles of programming languages (Haskell) (A+)</li>
<li>COMP3278 - Introduction to database management systems</li>
<li>COMP3322 - Modern Technologies on World Wide Web</li>
<li>COMP3355 - Cyber Security</li>
</ul>
</article>
<article>
<header>
<div class="spaced-list">
<h4>Aalto University</h4>
<span>
<time datetime="2022-01">Jan 2022</time> –
<time datetime="2022-05">May 2022</time>
</span>
</div>
<div class="spaced-list">
<strong>Computer Science</strong>
</div>
</header>
<h5>Courses</h5>
<ul>
<li>Software Engineering</li>
<li>Machine Learning</li>
<li>Basic Principles in Networking</li>
<li>Introduction to AI</li>
<li>Digital Ethics</li>
</ul>
</article>
</div>
</section>
<section id="projects">
<h3>Projects</h3>
<div class="stack">
<article>
<header>
<div class="spaced-list">
<h4>An All-in-one HKU App for Students (Final Year Project/Final Research Project)</h4>
<span>
<time datetime="2023-09-01">Sep 2023</time> –
Present
</span>
</div>
<div class="spaced-list">
<span>
</span>
<a href="https://wp2023.cs.hku.hk/fyp23079/">wp2023.cs.hku.hk/fyp23079</a>
</div>
</header>
</article>
<article>
<header>
<div class="spaced-list">
<h4>Haskell-based JavaScript-like interpreter</h4>
<span>
<time datetime="2023-01-01">Jan 2023</time> –
<time datetime="2023-05-31">May 2023</time>
</span>
</div>
<div class="spaced-list">
<span>
</span>
<a href=""></a>
</div>
</header>
</article>
<article>
<header>
<div class="spaced-list">
<h4>Simple Messaging Client-to-host</h4>
<span>
<time datetime="2022-01-01">Jan 2022</time> –
<time datetime="2022-05-31">May 2022</time>
</span>
</div>
<div class="spaced-list">
<span>
</span>
<a href="https://github.com/yaucp/Messaging">github.com/yaucp/Messaging</a>
</div>
</header>
</article>
<article>
<header>
<div class="spaced-list">
<h4>Big Two</h4>
<span>
<time datetime="2020-09-30">Sep 2020</time> –
<time datetime="2020-12-31">Dec 2020</time>
</span>
</div>
<div class="spaced-list">
<span>
</span>
<a href=""></a>
</div>
</header>
</article>
</div>
</section>
<section id="certificates">
<h3>Certificates</h3>
<div class="stack">
<article>
<header>
<div class="spaced-list">
<h4>IELTS Academic Band 8.0</h4>
</div>
<div class="spaced-list">
<span>
Issued by <strong>IELTS Official</strong>
</span>
</div>
</header>
</article>
<article>
<header>
<div class="spaced-list">
<h4>Programming with Google Go Specialization</h4>
</div>
<div class="spaced-list">
<span>
Issued by <strong>Coursera</strong>
</span>
<a href="https://www.coursera.org/account/accomplishments/specialization/certificate/H4GWC9AQZXKN">www.coursera.org/account/accomplishments/specialization/certificate/H4GWC9AQZXKN</a>
</div>
</header>
</article>
<article>
<header>
<div class="spaced-list">
<h4>Engineering Virtual Program Participant</h4>
</div>
<div class="spaced-list">
<span>
Issued by <strong>Goldman Sachs</strong>
</span>
<a href="https://insidesherpa.s3.amazonaws.com/completion-certificates/Goldman%20Sachs/NPdeQ43o8P9HJmJzg_Goldman%20Sachs_9hP8S2DkX4MC7aPsg_completion_certificate.pdf">insidesherpa.s3.amazonaws.com/completion-certificates/Goldman%20Sachs/NPdeQ43o8P9HJmJzg_Goldman%20Sachs_9hP8S2DkX4MC7aPsg_completion_certificate.pdf</a>
</div>
</header>
</article>
<article>
<header>
<div class="spaced-list">
<h4>Participant of PwC’s HackaDay 2021 Capture the Flag Competition</h4>
</div>
<div class="spaced-list">
<span>
Issued by <strong>PwC</strong>
</span>
</div>
</header>
</article>
</div>
</section>
<section id="skills">
<h3>Skills</h3>
<div class="grid-list">
<div>
<h4>JavaScript Frameworks/Libraries</h4>
<ul class="tag-list">
<li>TypeScript</li>
<li>Node.js</li>
<li>React.js</li>
<li>Next.js</li>
<li>Jest</li>
</ul>
</div>
<div>
<h4>Programming Languages</h4>
<ul class="tag-list">
<li>Python</li>
<li>Java</li>
<li>Kotlin</li>
<li>Go</li>
<li>C++/C</li>
<li>Haskell</li>
</ul>
</div>
<div>
<h4>Others</h4>
<ul class="tag-list">
<li>Git</li>
<li>GitHub/GitLab</li>
<li>Unix/MacOS</li>
<li>Ubuntu</li>
<li>Google Cloud Platform (GCP)</li>
<li>Protocol Buffers</li>
<li>Cloudflare Registrar & Page</li>
<li>GitHub Actions</li>
</ul>
</div>
<div>
<h4>Creative Stuff</h4>
<ul class="tag-list">
<li>Adobe Premiere Pro</li>
<li>Adobe Photoshop</li>
</ul>
</div>
</div>
</section>
<section id="languages">
<h3>Languages</h3>
<div class="grid-list">
<div>
<h4>Cantonese</h4>
Native Speaker
</div>
<div>
<h4>English</h4>
Full Professional (IELTS Band 8)
</div>
<div>
<h4>Mandarin</h4>
Full Professional
</div>
</div>
</section>
<section id="interests">
<h3>Interests</h3>
<div class="grid-list">
<div>
<h4>Photography</h4>
</div>
<div>
<h4>Watching Movies</h4>
</div>
<div>
<h4>Solo travelling</h4>
</div>
</div>
</section>
</body>
</html>