-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
207 lines (197 loc) · 8.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/assets/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/assets/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<title>Brandon Lau</title>
<link rel="stylesheet" href="styles/colours.css">
<link rel="stylesheet" href="styles/fonts.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/parallax.css">
<link rel="stylesheet" href="styles/carousel.css">
</head>
<body>
<div id="app-wrapper">
<div id="navbar">
<p>Who am I?</p>
<p>Experience</p>
<p>Skills</p>
<p>Certifications</p>
<p>Contact Me</p>
</div>
<div id="parallax-container">
<div id="parallax-1" class="parallax"></div>
<div id="parallax-2" class="parallax"></div>
<div id="parallax-3" class="parallax"></div>
<div id="parallax-4" class="parallax"></div>
<div id="parallax-5" class="parallax"></div>
<div id="parallax-6" class="parallax"></div>
<div id="parallax-7" class="parallax"></div>
</div>
<div id="profile-asset-container">
<div class="profile-assets" id="computer-container">
<div id="computer-screen-shape"></div>
<img id="computer" src="assets/computer.png">
<img id="computer-screen-github" src="assets/computer_screen_github.png">
<img id="computer-screen-linkedin" src="assets/computer_screen_linkedin.png">
<img id="computer-screen-mail" src="assets/computer_screen_mail.png">
</div>
<div class="profile-assets" id="keyboard-container">
<div id="keyboard-shape"></div>
<div id="keyboard"></div>
<img id="clickme" src="assets/clickme.png">
<img id="clickmeagain" src="assets/clickmeagain.png">
</div>
</div>
<div id="computer-spacer"></div>
<div id="intro" class="card-container">
<div class="card-container-header">
<h1>Brandon Lau</h1>
<h2 class="gradient-text header-font">Software Engineer</h2>
<p>
I'm a Computer Science student at the National University of Singapore. With experience in full stack
development, I enjoy creating products that both look good and feel good to use. I also enjoy other facets of
technology and am passionate about continuously learning new things.
</p>
</div>
</div>
<div id="experience" class="card-container">
<h2 id="experience-header" class="card-container-header gradient-text header-font text-center">Experience</h2>
<div class="card">
<div class="card-mobile-spacer"></div>
<div class="card-content">
<h4>Backend Software Engineer Intern</h4>
<h3>foodpanda</h3>
<p> Worked at the Subscription Benefits team: developed API endpoints, gained exposure to a bunch of business
flows, worked on various microservices and scripts, enjoyed free food.</p>
</div>
<div class="card-parallax">
<div id="card-foodpanda-server" class="card-asset">
<img src="assets/server.png">
</div>
</div>
</div>
<div class="card">
<div class="card-mobile-spacer"></div>
<div class="card-content">
<h4>Software Engineer Intern</h4>
<h3>CVWO</h3>
<p>Pioneered the development of a system for the creation of customised dashboards, which provides CVWO
greater capabilities to quickly onboard new Social Service Agencies, while still tailoring to their
individual
business needs.</p>
</div>
<div class="card-parallax">
<div id="card-cvwo-monitor" class="card-asset">
<img src="assets/monitor.png">
</div>
</div>
</div>
<div class="card">
<div class="card-mobile-spacer"></div>
<div class="card-content">
<h4>Software Engineer Intern</h4>
<h3>WorkClass</h3>
<p>Developed full-stack features and optimised the frontend for on-page SEO. Also worked on CI/CD
pipelines, backend scripts to automate processes and rebuilt a Telegram bot that serves over 30,000 active
jobseekers.</p>
</div>
<div class="card-parallax">
<div id="card-workclass-tablet" class="card-asset">
<img src="assets/tablet.png">
</div>
</div>
</div>
</div>
<div id="skills" class="card-container">
<h2 id="skills-header" class="card-container-header gradient-text header-font text-center">Skills</h2>
<div id="languages-skills-card" class="skills-card">
<h3 class="gradient-text text-center">Langauges</h3>
<h4 class="text-center">Python, Golang, Java, Typescript/JavaScript, HTML/CSS, SQL (PostgreSQL, MySQL), NoSQL,
C,
Rust</h4>
</div>
<div id="frameworks-skills-card" class="skills-card">
<h3 class="gradient-text text-center">Frameworks and Libraries</h3>
<h4 class="text-center">React, Node.js, Next.js, Express.js, Django, Telegram Bot</h4>
</div>
<div id="tools-skills-card" class="skills-card">
<h3 class="gradient-text text-center">Tools</h3>
<h4 class="text-center">Git, Linux, Docker, AWS (EC2, S3, SQS, SNS, CodeDeploy, CodePipeline), Kubernetes, Jira
</h4>
</div>
</div>
<div id="certifications" class="card-container">
<h2 id="certifications-header" class="card-container-header gradient-text header-font text-center">Certifications
</h2>
<div class="carousel-container">
<div class="carousel-items">
<div class="carousel-item" id="carousel-active"
data-url="https://certs.ine.com/7a219d10-a555-4aa4-ad0a-4bbac45db2e6">
<div class="carousel-item-content">
<h4>INE</h4>
<h3>eJPT</h3>
<p>Junior Penetration Tester</p>
</div>
<img src="assets/logos/ine.png">
</div>
<div class="carousel-item" id="carousel-next"
data-url="https://credentials.nus.edu.sg/a40afec5-62ff-473c-8432-b84eb1c8f835">
<div class="carousel-item-content">
<h4>Top Students for</h4>
<h3>CS2105</h3>
<p>Introduction to Computer Networks</p>
</div>
<img src="assets/logos/nus.png">
</div>
<div class="carousel-item" data-url="https://credentials.nus.edu.sg/eb555253-f39f-4db1-88ea-56bb93996376">
<div class="carousel-item-content">
<h4>Top Students for</h4>
<h3>CS1101S</h3>
<p>Programming Methodology</p>
</div>
<img src="assets/logos/nus.png">
</div>
<div class="carousel-item" id="carousel-prev"
data-url="https://credentials.nus.edu.sg/2f985efa-5b7b-4580-85f5-d0b28fd17379">
<div class="carousel-item-content">
<h4>Top Students for</h4>
<h3>CS2030S</h3>
<p>Programming Methodology II</p>
</div>
<img src="assets/logos/nus.png">
</div>
</div>
</div>
</div>
<div id="contact" class="card-container-footer">
<h3>Contact</h3>
<div class="card-contact">
<a href="https://github.com/blaukc" target="_blank">
<img src="assets/logos/github.png">
</a>
<a href="https://www.linkedin.com/in/blaukc/" target="_blank">
<img src="assets/logos/linkedin.png">
</a>
<a href="mailto:[email protected]" target="_blank">
<img src="assets/logos/mail.png">
</a>
</div>
</div>
</div>
<script src="index.js"></script>
<script src="computer.js"></script>
<script src="navbar.js"></script>
<script src="carousel.js"></script>
</body>
</html>