-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
301 lines (261 loc) · 12 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Welcome ≽^•⩊•^≼</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/unicons.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- MAIN STYLE -->
<link rel="stylesheet" href="css/tooplate-style.css">
</head>
<body>
<!-- MENU -->
<nav class="navbar navbar-expand-sm navbar-light">
<div class="container">
<a class="navbar-brand" href="/"><i class='uil uil-user'></i>Lee Chang Zheng</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a href="#about" class="nav-link"><span data-hover="About">About</span></a>
</li>
<li class="nav-item">
<a href="#project" class="nav-link"><span data-hover="Projects">Projects</span></a>
</li>
<li class="nav-item">
<a href="#experiences" class="nav-link"><span data-hover="Experiences">Experiences</span></a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link"><span data-hover="Contact">Contact</span></a>
</li>
</ul>
<ul class="navbar-nav ml-lg-auto">
<div class="ml-lg-4">
<div class="color-mode d-lg-flex justify-content-center align-items-center">
<i class="color-mode-icon"></i>
Color mode
</div>
</div>
</ul>
</div>
</div>
</nav>
<!-- ABOUT -->
<section class="about full-screen d-lg-flex justify-content-center align-items-center" id="about">
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-12 col-12 d-flex align-items-center">
<div class="about-text">
<small class="small-text">Welcome to <span class="mobile-block">my portfolio website!</span></small>
<h1 class="animated animated-text">
<span>Hey there! I'm</span>
<div class="animated-info">
<span class="animated-item">Lee Chang Zheng</span>
<span class="animated-item">李昌政</span>
</div>
</h1>
<p>I love learning new tools and trying out new technologies! I have a wide array of interests, such as in
Software Development, AI, Cloud, and more!</p>
<div class="custom-btn-group mt-4">
<a href="docs/Resume.pdf" download="Lee-Chang-Zheng_Resume.pdf"
class="btn mr-lg-2 custom-btn custom-btn-bg">
<i class='uil uil-file-alt'></i>
Download Resume
</a>
</div>
</div>
</div>
<div class="col-lg-5 col-md-12 col-12">
<div class="about-image d-flex justify-content-center">
<img src="images/project/profile-picture.png" class="profile-icon" alt="profile icon">
</div>
</div>
</div>
</div>
</section>
<!-- PROJECTS -->
<section class="project py-5" id="project">
<div class="container">
<div class="row">
<div class="col-lg-11 text-center mx-auto col-12">
<div class="col-lg-8 mx-auto">
<h2>Projects Showcase</h2>
<p>A showcase of some of the projects I have done over the years!</p>
</div>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="project-info">
<iframe id="video1" src="https://www.youtube.com/embed/bpZROfS0XbA" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="item">
<div class="project-info">
<iframe id="video2" src="https://www.youtube.com/embed/lBUOvSejSss" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="item">
<div class="project-info">
<iframe id="video3" src="https://www.youtube.com/embed/DSHezeGo82c" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="experiences py-5 d-lg-flex justify-content-center align-items-center" id="experiences">
<div class="container">
<div class="row">
<div class="col-lg-6 col-12">
<h2 class="mb-4">Work Experiences</h2>
<div class="timeline">
<div class="timeline-wrapper">
<div class="timeline-yr">
<span>Now</span>
</div>
<div class="timeline-info">
<h3><span>Open to new opportunities!</span><small></small></h3>
<p>Looking to use the skills I have gained throughout my academic career to good use! 😁</p>
</div>
</div>
<div class="timeline-wrapper">
<div class="timeline-yr">
<span>2022</span>
</div>
<div class="timeline-info">
<h3><span>Software QA Tester</span><small>Internship</small></h3>
<p>I worked as a software tester in Keysight Technologies, testing their web-based big data analytics
solution, known as Pathwave Manufacturing Analytics, using their AI Driven test automation tool
Eggplant 🍆</p>
</div>
</div>
<div class="timeline-wrapper">
<div class="timeline-yr">
<span>2021</span>
</div>
<div class="timeline-info">
<h3><span>Swab Ops Admin<small>Contract</small></h3>
<p>I worked as an admin support in swab centres and played my part in the fight against COVID-19 🐣</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<h2 class="mb-4 mobile-mt-2">Education</h2>
<div class="timeline">
<div class="timeline-wrapper">
<div class="timeline-yr">
<span>2024</span>
</div>
<div class="timeline-info">
<h3><span>Singapore University of Technology and Design</span></h3>
<p>I attended university from 2020 to 2024, and graduated with a Bachelor of Engineering
(Honours, Distinction) and a minor in AI, achieving a GPA of 4.0/5.0! 👨🎓
</p>
</div>
</div>
<div class="timeline-wrapper">
<div class="timeline-yr">
<span>2017</span>
</div>
<div class="timeline-info">
<h3><span>Yishun Junior College</span></h3>
<p>My high school from 2016 to 2017, where I studied History, Economics, Literature, and Mathematics!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section class="contact py-5" id="contact">
<div class="container">
<div class="text-center">
<div class="contact-form">
<h2 class="mb-4">Contact Details and Socials</h2>
<div class="container">
<div class="row">
<div class="col">
<a href="mailto:[email protected]" class="btn custom-btn fake-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-envelope mr-1" viewBox="0 0 16 16">
<path
d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z" />
</svg>
</a>
</div>
<div class="col">
<a href="https://www.linkedin.com/in/lee-chang-zheng/" target="_blank"
class="btn custom-btn custom-btn-bg custom-btn-link bg-primary">
<div class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor"
class="bi bi-linkedin mr-2" viewBox="0 0 16 16">
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>
<i class="uil uil-linkedin"></i>
LinkedIn Profile
</div>
</a>
</div>
<div class="col">
<a href="https://github.com/Leecz888" target="_blank"
class="btn custom-btn custom-btn-bg custom-btn-link">
<div class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor"
class="bi bi-github mr-2" viewBox="0 0 16 16">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
</svg>
GitHub Profile
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer py-5">
<div class="container">
<div class="row">
<div class="col-lg-12 col-12">
<h3 class="text-center pb-5">Thanks for stopping by! <div>૮⍝• ᴥ •⍝ა</div></h3>
<a href="#about" class="nav-link text-center custom-btn custom-btn-bg">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="bi bi-arrow-up"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5" />
</svg>
Return to Top
</a>
</div>
</div>
</div>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/Headroom.js"></script>
<script src="js/jQuery.headroom.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/custom.js"></script>
</body>
</html>