-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
317 lines (307 loc) · 12.4 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
<!DOCTYPE html>
<!--
Big Picture by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html lang="en">
<head>
<title>Tsz's Portfolio!</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="keywords" content="portfolio, tsz, yin, yung, imperial, mechanical, engineering" />
<meta name="description" content="Hey! I'm Tsz, a final year Mechanical Engineering student at Imperial College London. Welcome to my portfolio!" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- Favicon Implement Favicons-->
<link rel="apple-touch-icon" sizes="180x180" href="icon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png" />
<link rel="manifest" href="icon/site.webmanifest" />
<style>
/*Styling for image zoom on hover*/
.fit:hover img {
transform: scale(1.1);
filter: contrast(100%);
}
/*Styling for icon animations on landing page*/
.icons > li {
display: none;
transition: 0.3s all ease-in-out;
}
.icons:hover > li {
opacity: 0.5;
}
.icons:hover > li:hover {
transform: scale(1.5);
opacity: 1;
}
/*Styling for text overlay + zoom on image hover */
/* Reference: https://codepen.io/chrisdothtml/pen/OVmgwK?editors=1100 */
.fit {
/*only margin and overflow for zoom on hover*/
display: inline-block;
margin: 10px;
text-align: left;
opacity: 0.99;
overflow: hidden;
position: relative;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
margin: 0 auto;
}
.fit:before {
content: "";
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
width: 100%;
height: 50%;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 2;
transition-property: top, opacity;
transition-duration: 0.3s;
}
.fit img {
display: block;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
/*below for image zoom on hover*/
width: 100%;
height: 100%;
transition: 0.5s all ease-in-out;
filter: contrast(85%);
}
.fit .details {
font-size: 16px;
padding: 20px;
color: #eee;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
}
.fit .details span {
display: block;
opacity: 0;
position: relative;
top: 100px;
transition-property: top, opacity;
transition-duration: 0.3s;
transition-delay: 0s;
}
.fit .details .title {
line-height: 1;
font-weight: 600;
font-size: 18px;
}
.fit .details .info {
line-height: 1.2;
margin-top: 5px;
font-size: 12px;
}
.fit:focus:before,
.fit:focus span,
.fit:hover:before,
.fit:hover span {
opacity: 1;
}
.fit:focus:before,
.fit:hover:before {
top: 50%;
}
.fit:focus span,
.fit:hover span {
top: 0;
}
.fit:focus .title,
.fit:hover .title {
transition-delay: 0.15s;
}
.fit:focus .info,
.fit:hover .info {
transition-delay: 0.25s;
}
</style>
</head>
<body class="is-preload">
<!-- Header -->
<header id="header">
<h1>Tsz Yin Yung</h1>
<nav>
<ul>
<li><a href="#intro">Hello</a></li>
<li><a href="#one">Who I Am</a></li>
<li><a href="#two">What I do</a></li>
<li><a href="#work">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Intro -->
<section id="intro" class="main style1 dark fullscreen">
<div class="content">
<header>
<h2>Hi, I'm Tsz.</h2>
</header>
<ul class="icons">
<li>
<a href="https://www.linkedin.com/in/tyyung/" class="icon brands fa-linkedin"><span class="label">LinkedIn</span></a>
</li>
<li>
<a href="" class="icon brands icon-sign-blank"><span class="label"></span></a>
</li>
<li>
<a href="https://github.com/tszdabee" class="icon brands fa-github"><span class="label">Github</span></a>
</li>
<li>
<a href="" class="icon brands icon-sign-blank"><span class="label"></span></a>
</li>
<li>
<a href="mailto:tszyyung@gmail.com"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</li>
</ul>
<p><b>I'm a <span class="typewriter thick"></span> based in London.</b></p>
<p>I love building stuff and bringing innovative ideas to life.</p>
<footer>
<a href="#one" class="button style2 down">More</a>
</footer>
</div>
</section>
<!-- One -->
<section id="one" class="main style2 right dark fullscreen">
<div class="content box style2">
<header>
<h2>Who I Am</h2>
</header>
<p>
I'm a <strong> Quantitative Developer</strong> at <strong>RBC Capital Markets</strong> with a
<strong>First Class <a href="https://www.imperial.ac.uk/study/courses/undergraduate/2024/mechanical-engineering/">MEng in Mechanical Engineering</a></strong>
from <strong>Imperial College London</strong>, passionate about technology and data-driven solutions in finance.
</p>
</div>
<a href="#two" class="button style2 down anchored">Next</a>
</section>
<!-- Two -->
<section id="two" class="main style2 left dark fullscreen">
<div class="content box style2">
<header>
<h2>What I do</h2>
</header>
<p>
From designing new apps to stunning websites, I use my programming skills to bring ideas to life. I love exploring new technologies, and am always on the lookout for exciting new projects to tackle.
</p>
<a href="images/resume.pdf" class="button style2 download-resume">Resume</a>
</div>
<a href="#work" class="button style2 down anchored">Next</a>
</section>
<!-- Work -->
<section id="work" class="main style3 primary dark">
<div class="content">
<header>
<h2>Projects</h2>
<p>Here's some of the projects I've done. Come take a look!</p>
</header>
<!-- Gallery -->
<div class="gallery">
<article class="from-left">
<a href="https://github.com/tszdabee/Charpy-Microstructure-Machine-Learning" data-poptrox="ignore" class="image fit"
><img src="images/thumbs/01.jpg" title="Charpy Prediction" alt="" />
<div class="details"><span class="title">Predicting Charpy impact test data with Machine Learning</span><span class="info">This Python project uses various machine learning algorithms to predict Charpy impact test data based on microstructure images, providing a more efficient and reliable method for characterizing material behavior.</span></div></a
>
</article>
<article class="from-right">
<a href="https://github.com/tszdabee/ukdrivingtestbooker" data-poptrox="ignore" class="image fit"
><img src="images/thumbs/02.jpg" title="Cancellation Booker" alt="" />
<div class="details"><span class="title">UK Driving Test Booker</span><span class="info">Using Selenium, this automation script helps UK drivers easily secure new testing dates by automatically rebooking cancellations on the DVSA website.</span></div></a
>
</article>
<article class="from-left">
<a href="https://github.com/tszdabee/Final-Project-in-Embedded-C" data-poptrox="ignore" class="image fit">
<img src="images/thumbs/03.jpg" title="Buggy" alt="" />
<div class="details"><span class="title">Mine navigation search and rescue buggy [PRIVATE]</span><span class="info">Written in Embedded C, this autonomous robot can navigate through a simulated mine with color-coded card instructions, and returns to its starting position. (Private repo, please contact for access)</span></div>
</a>
</article>
<article class="from-right">
<a href="https://github.com/tszdabee/Mini-Project-in-Embedded-C" data-poptrox="ignore" class="image fit"
><img src="images/thumbs/04.jpg" title="Streetlight" alt="" />
<div class="details"><span class="title">Energy-saving automatic streetlight</span><span class="info"> Written in Embedded C, this automatic streetlight system uses ambient light sensors to automatically adjust brightness all year round, saving energy and enhancing public safety.</span></div></a
>
</article>
<article class="from-left">
<a href="https://github.com/tszdabee/Panini-Heat-Diffusion-Modelling" data-poptrox="ignore" class="image fit"
><img src="images/thumbs/05.jpg" title="Delicious" alt="" />
<div class="details"><span class="title">Panini Heat Diffusion Modelling</span><span class="info">This Python project utilizes the finite difference method for PDEs to simulate Panini heat diffusion, providing a useful tool to understand heat transfer.</span></div></a
>
</article>
<article class="from-right">
<a href="art" data-poptrox="ignore" class="image fit"
><img src="images/thumbs/06.jpg" title="Works of Art" alt="" />
<div class="details"><span class="title">Design, Art and Creativity</span><span class="info">Some artworks that I've created.</span></div></a
>
</article>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="main style3 secondary dark">
<div class="content">
<header>
<h2>Let's connect.</h2>
<p>
I'd love to hear from you. Ask me about my projects, share your favorite song, or just simply connect.<br />
Shoot me an email at
<a href="mailto:tszyyung@gmail.com">tszyyung@gmail.com</a> or get in touch below :)
</p>
</header>
<div class="box">
<form method="post" action="mailto:tszyyung@gmail.com">
<div class="fields">
<div class="field half">
<input type="text" name="name" placeholder="Name" />
</div>
<div class="field half">
<input type="email" name="email" placeholder="Email" />
</div>
<div class="field">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</div>
</div>
<ul class="actions special">
<li><input type="submit" value="Send Message" /></li>
</ul>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<!-- Icons -->
<ul class="icons">
<li>
<a href="https://www.linkedin.com/in/tyyung/" class="icon brands fa-linkedin"><span class="label">LinkedIn</span></a>
</li>
<li>
<a href="https://github.com/tszdabee" class="icon brands fa-github"><span class="label">Github</span></a>
</li>
<li>
<a href="mailto:tszyyung@gmail.com"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</li>
</ul>
<!-- Menu -->
<ul class="menu">
<li>© 2023. All rights reserved</li>
<li>Design adapted from <a href="https://html5up.net">HTML5 UP</a></li>
</ul>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>