-
Notifications
You must be signed in to change notification settings - Fork 0
/
timeline.html
232 lines (193 loc) · 8.27 KB
/
timeline.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
<!DOCTYPE html>
<html>
<head>
<title>Hong Joon's personal webpage</title>
<!--<link rel="stylesheet" type="text/css" href="bootstrap.css">-->
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<!-- background image -->
<div class="image">
</div>
<div class="col-md-3"></div>
<div class="col-md-8">
<div class="transparent">
<div class="container">
<div class="col-md-6">
<div class="thumbnail">
<img src="images/hkust.jpg"></img>
</div>
</div>
<div class="col-md-6 text">
<h2> <span class="label label-info">2013~2019</span></h2>
<h1> Hong Kong University of Science and Technology<span class="label label-info"></span></h1>
<font size="4">I selected HKUST as a place for my further studies, as well as postgraduate studies.
</font>
</div>
<div class="col-md-8">
<div class="thumbnail">
<img src="images/graduate_ust.jpg"></img>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="images/withlong.jpg"></img>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3"></div>
<div class="col-md-8">
<div class="transparent">
<div class="container">
<div class="col-md-8 text">
<h2> <span class="label label-info">2008~2013</span></h2>
<h1> International School in Singapore<span class="label label-info"></span></h1>
<font size="4">
</br></br>
throughout my school life, I had an introverted personality and didn't have any real talent.</br></br>
However, Overseas Family School offered me a friendly environment where I didn't get defined by my bad grades, and where I could try different things and fail over and over.</br></br>
So I finally managed to learn how to learn, and made a lot of good friends. Eventually, I graduated with an IB diploma.
</font>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img width = 350 src="images/school_transcript.jpg"></img>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3"></div>
<div class="col-md-8">
<div class="container">
<div class="col-md-6">
<div class="thumbnail">
<img src="images/tokclass.jpg"></img>
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img src="images/graduate.jpg"></img>
</div>
</div>
</div>
</div>
<!--<div class="col-md-3"></div>
<div class="col-md-8">
<div class="transparent">
<div class="container">
<div class="col-md-6">
<div class="thumbnail">
<img src="images/texas.jpg"></img>
</div>
</div>
<div class="col-md-6 text">
<h2> <span class="label label-info">2004</span></h2>
<h1> Texas, United States<span class="label label-info"></span></h1>
<font size="4">
I went to my relatives' place in United States for 6 months.</br>
Altough I was really shy and didn't know how to English, I had a lot of fun.
</font>
</div>
</div>
</div>
</div>-->
<div class="col-md-3"></div>
<div class="col-md-8">
<div class="transparent">
<div class="container">
<div class="col-md-6 text">
<h2> <span class="label label-info">1995~2008</span></h2>
<h1> Born in Seoul, Korea<span class="label label-info"></span></h1>
<font size="4">I was born at 27.September.1995 in Seoul, in a 4 member family. <br>
I grew up and studied in Seoul until I was 12 years old
</font>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img src="images/korea.jpg"></img>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-8 text">
<font size="4">
<br><br><br>
Last updated: 27.Dec.2020<br>
</font>
</div>
<div class="col-md-4"></div>
<div class="col-md-8">
<div class="transparent">
<div class="container">
<div class="col-md-12 text">
<font size="6"><br><br>
</font>
</div>
</div>
</div>
</div>
<div id="sidebar" onmouseover="sidebarToggle()" onmouseout="sidebarToggleOut()" class="right-overlap">
<div class="container">
<div class="row">
<div id="sidebarHidden" vertical-align="center" class="right-overlap">
<ul class="list-unstyled" style="padding:10px;">
<h3><button type="button" onclick="pinSidebar()" class="btn btn-lg btn-default">⇩ My profile</button></h3>
<li><p><a href="index.html" id="b"><span class="glyphicon glyphicon-home gi-10x"></span></a></p></li>
<li><p><a href="timeline.html"><span class="glyphicon glyphicon-user gi-10x"></span></a></p></li>
<li><p><a href="experiences.html"><span class="glyphicon glyphicon-road gi-10x"></span></a></p></li>
<li><p><a href="projects.html"><span class="glyphicon glyphicon-file gi-10x"></span></a></p></li>
<!--<li><p><a href="contactMe.html"><span class="glyphicon glyphicon-envelope gi-10x"></span></a></p></li>-->
</ul>
</div>
<div id="sidebarBack" vertical-align="center" class="right-overlap-menu transparent-back">
</div>
<div id="sidebarShown" vertical-align="center" class="right-overlap">
<ul id="sidebarList" class="fade list-unstyled" style="padding:10px;">
<h3><button type="button" onclick="pinSidebar()" class="btn btn-lg btn-default">⇩ My profile</button></h3>
<li><p><a href="index.html"><span class="glyphicon glyphicon-home"><a href="index.html"style="font-family:Helvetica;"> Profile</a></span></a></p></li>
<li><p><a href="timeline.html"><span class="glyphicon glyphicon-user gi-10x"><a href="timeline.html"style="font-family:Helvetica;"> Timeline</a></span></a></p></li>
<li><p><a href="experiences.html"><span class="glyphicon glyphicon-road gi-10x"><a href="experiences.html"style="font-family:Helvetica;"> Experiences </a></span></a></p></li>
<li><p><a href="projects.html"><span class="glyphicon glyphicon-file gi-10x"><a href="projects.html"style="font-family:Helvetica;"> Software Projects</a></span></a></p></li>
<!--<li><p><a href="contactMe.html"><span class="glyphicon glyphicon-envelope gi-10x"><a href="contactMe.html"style="font-family:Helvetica;"> Contact</a></span></a></p></li>-->
</ul>
</div>
</div>
</div>
</div class="sidebar">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
var sidebarPinned=false;
function pinSidebar()
{
sidebarPinned=!sidebarPinned;
}
function sidebarToggle()
{
//document.getElementById("sidebarShown").style.visibility = "visible";
document.getElementById("sidebarHidden").style.visibility = "hidden";
document.getElementById("sidebarBack").style.width = "18%";
document.getElementById("sidebarList").style.opacity = "1";
}
function sidebarToggleOut()
{
//document.getElementById("sidebarShown").style.visibility = "hidden";
if (!sidebarPinned)
{
document.getElementById("sidebarHidden").style.visibility = "visible";
document.getElementById("sidebarBack").style.width = "0%";
document.getElementById("sidebarList").style.opacity = "0";
}
}
</script>
</body>
</html>