-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
168 lines (151 loc) · 7.18 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The width of Android devices is often not the actual screensize. If you want to have the width of the screen you need a viewport meta tag. -->
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="design.css" />
<!-- AOS CSS -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<title>Keoy Shon Tzu's Website</title>
<meta name="google-site-verification" content="DRh6CbCMaHwYAgIvISbg885c8j6EhYNxVPc9XIS2F_o" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TPWS124XZH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-TPWS124XZH');
</script>
<style>
button {
padding: 10px;
border: 1px solid darkred;
background-color: rgba(255, 192, 203, 0);
border-radius: 5px;
box-shadow: 1px 1px 1px rosybrown;
margin-bottom: 20px;
margin-top: 20px;
}
button:hover {
box-shadow: inset 1px 1px 1px rosybrown;
}
a {
color: brown;
text-decoration: none;
}
</style>
</head>
<body>
<header id="top">
<div class="navbar shadow">
<a href="index.html">About Me</a>
<a href="MultimediaProject.html">Multimedia projects</a>
<a href="WebProject.html">Web projects</a>
<!-- <a href="Backend projects.html">Backend Projects</a> -->
</div>
<br><br>
<div class="photo-collage">
<div>
<img src="resources/icon book.jpg" height="150px" data-aos="fade-right" data-aos-duration="1200">
<img src="resources/icon bullseye.jpg" height="150px" data-aos="fade-right" data-aos-duration="1500">
</div>
<div>
<img src="resources/me3.jpg" height="300px" data-aos="zoom-in" data-aos-duration="1200">
</div>
<div>
<img src="resources/icon iMac.jpg" height="150px" data-aos="fade-left" data-aos-duration="1500">
<img src="resources/icon planner.jpg" height="150px" data-aos="fade-left" data-aos-duration="1000">
</div>
</div>
<h1 data-aos="fade-down" data-aos-duration="1300">HI, I AM SHON TZU!</h1>
<P data-aos="fade-down" data-aos-duration="1600">
<b>Boredom is the seed of laziness.<br>I passionately live by the motto "one year from now, you will be glad
you started today"</b>
</P>
<button data-aos="fade-up" data-aos-duration="1200">
<a href="https://drive.google.com/file/d/1hsZxMOJsYJwY3NErwz2rH-cNAlpm52a1/view?usp=sharing"
download="resume">Download Resume</a>
</button>
<button data-aos="fade-up" data-aos-duration="1500">
<a href="https://drive.google.com/file/d/14qf-YB2-0YSu0pZ8XETUUiss_wx4WGIZ/view?usp=sharing"
download="portfolio">Download Portfolio</a>
</button>
</header>
<a href="#top" class="fa fa-arrow-up" data-aos="zoom-in" data-aos-duration="2500"><br>Back to Top</a>
<fieldset class="personality">
<legend>
<h2>WHAT AM I LIKE?</h2>
</legend>
<div class="row">
<div class="MyerBriggs shadow" data-aos="fade-up" data-aos-duration="1000">
<a href="https://www.16personalities.com/enfj-personality" target="blank">
<img src="resources/icon ENFJA.jpg" alt="ENFJ-A the Protagonist" title="ENFJ-A the Protagonist"
height="100px" data-aos="fade-left" data-aos-duration="1200"></a>
<b data-aos="fade-right" data-aos-duration="1200">I am ENFJ-A, the Protagonist!</b>
<!-- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore, corporis.</p> -->
</div>
<div class="UCMHP shadow" data-aos="fade-up" data-aos-duration="1200">
<a href="https://code.vienerglobal.com/Trial/?r=MY167338" target="blank"><img
src="resources/icon admin.jpg" alt="UC4 the Administrator" title="UC4 the Administratoro"
height="100px" data-aos="fade-right" data-aos-duration="1200"></a>
<b data-aos="fade-left" data-aos-duration="1200">I am UC4, the Administrator!</b>
<!-- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore, corporis.</p> -->
</div>
</div>
<div class="row">
<div class="Belbin shadow" data-aos="fade-up" data-aos-duration="1400">
<a href="https://www.belbin.com/about/team-role-spotlight-resource-investigator/#:~:text=Resource%20Investigators%20are%20natural%20communicators,exploring%20new%20ideas%20and%20opportunities."
target="blank"><img src="resources/icon RI.jpg" alt="Resource Investigator"
title="Resource Investigator" height="100px" data-aos="fade-left" data-aos-duration="1200"></a>
<b data-aos="fade-right" data-aos-duration="1200">I am a Resource Investigator!</b>
<!-- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore, corporis.</p> -->
</div>
<div class="DISC shadow" data-aos="fade-up" data-aos-duration="1800">
<a href="https://www.axiomsoftware.com/disc/interpretations/disc-interpretation-high-d-c.php"
target="blank"><img src="resources/icon DC.jpg" alt="Dominant-Compliant" title="Dominant-Compliant"
height="100px" data-aos="fade-right" data-aos-duration="1200"></a>
<b data-aos="fade-left" data-aos-duration="1200">I am DC-type, Dominant-Compliant!</b>
<!-- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore, corporis.</p> -->
</div>
</div>
</fieldset>
<fieldset style="text-align:justify;">
<legend>
<h2>SPECIAL APPRECIATION</h2>
</legend>
<div>
<p data-aos="flip-up" data-aos-duration="1500">
I owe my computer literacy to a number of people. I remember getting the first taste of computer
programming when I was 18. A college classmate taught me how to print "Hello World" using C-Free. I got hooked
straight away and decided to venture into the computer world. I was terrible and beyond incompetent back
then, but this classmate of mine remained super tolerant with my struggles and dedicated hours upon
hour each week to assist me with my programming questions.
</p>
<p>Shoutout to my buddy <a href="https://ngeojiajun.github.io/comments.html">Ngeo Jia Jun</a>! go check his site out too :D</p>
</div>
</fieldset>
<br>
<footer>
<div>
<a href="https://www.facebook.com/shontzu" target="blank" class="fa fa-facebook" data-aos="slide-up" data-aos-duration="400"/>
<a href="https://twitter.com/shontzu_" target="blank" class="fa fa-twitter" data-aos="slide-up" data-aos-duration="300"></a>
<a href="https://www.linkedin.com/in/shontzu/" target="blank" class="fa fa-linkedin" data-aos="slide-up" data-aos-duration="200"></a>
<a href="https://www.instagram.com/shontzu/" target="blank" class="fa fa-instagram" data-aos="slide-up" data-aos-duration="300"></a>
<a href="https://github.com/yuuchin" target="blank" class="fa fa-github" data-aos="slide-up" data-aos-duration="400"></a>
</div>
<div>
© Yuu Chin Keoy | shontzuforever@gmail.com
</div>
<div>
<img src="resources/flower.png" height="100px" class="fa-spin">
</div>
</footer>
<!-- AOS script -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>