1
- <!DOCTYPE html>
2
- < html lang ="en ">
3
- < head >
4
- < meta charset ="utf-8 ">
5
- < title > Digital Team HTML5 Layout - Tooplate</ title >
6
- < meta http-equiv ="X-UA-Compatible " content ="IE=Edge ">
7
- < meta name ="viewport " content ="width=device-width, initial-scale=1 ">
8
- < meta name ="keywords " content ="">
9
- < meta name ="description " content ="">
10
-
11
- <!--
12
-
13
- Template 2075 Digital Team
14
-
15
- http://www.tooplate.com/view/2075-digital-team
16
-
17
- -->
18
- < link rel ="stylesheet " href ="css/bootstrap.min.css ">
19
- < link rel ="stylesheet " href ="css/font-awesome.min.css ">
20
- < link rel ="stylesheet " href ="css/animate.min.css ">
21
- < link rel ="stylesheet " href ="css/et-line-font.css ">
22
- < link rel ="stylesheet " href ="css/nivo-lightbox.css ">
23
- < link rel ="stylesheet " href ="css/nivo_themes/default/default.css ">
24
- < link rel ="stylesheet " href ="css/style.css ">
25
- < link href ='https://fonts.googleapis.com/css?family=Roboto:400,300,500 ' rel ='stylesheet ' type ='text/css '>
26
- </ head >
27
- < body data-spy ="scroll " data-target =".navbar-collapse " data-offset ="50 ">
28
-
29
- <!-- preloader section -->
30
- < div class ="preloader ">
31
- < div class ="sk-spinner sk-spinner-circle ">
32
- < div class ="sk-circle1 sk-circle "> </ div >
33
- < div class ="sk-circle2 sk-circle "> </ div >
34
- < div class ="sk-circle3 sk-circle "> </ div >
35
- < div class ="sk-circle4 sk-circle "> </ div >
36
- < div class ="sk-circle5 sk-circle "> </ div >
37
- < div class ="sk-circle6 sk-circle "> </ div >
38
- < div class ="sk-circle7 sk-circle "> </ div >
39
- < div class ="sk-circle8 sk-circle "> </ div >
40
- < div class ="sk-circle9 sk-circle "> </ div >
41
- < div class ="sk-circle10 sk-circle "> </ div >
42
- < div class ="sk-circle11 sk-circle "> </ div >
43
- < div class ="sk-circle12 sk-circle "> </ div >
44
- </ div >
45
- </ div >
46
-
47
- <!-- navigation section -->
48
- < section class ="navbar navbar-fixed-top custom-navbar " role ="navigation ">
49
- < div class ="container ">
50
- < div class ="navbar-header ">
51
- < button class ="navbar-toggle " data-toggle ="collapse " data-target =".navbar-collapse ">
52
- < span class ="icon icon-bar "> </ span >
53
- < span class ="icon icon-bar "> </ span >
54
- < span class ="icon icon-bar "> </ span >
55
- </ button >
56
- < a href ="# " class ="navbar-brand "> CHING-HAO HSU</ a >
57
- </ div >
58
- < div class ="collapse navbar-collapse ">
59
- < ul class ="nav navbar-nav navbar-right ">
60
- < li > < a href ="#home " class ="smoothScroll "> HOME</ a > </ li >
61
- < li > < a href ="#work " class ="smoothScroll "> SKILL</ a > </ li >
62
- < li > < a href ="#about " class ="smoothScroll "> ABOUT</ a > </ li >
63
- < li > < a href ="#education " class ="smoothScroll "> EXPERIENCE</ a > </ li >
64
- < li > < a href ="#contact " class ="smoothScroll "> CONTACT</ a > </ li >
65
- </ ul >
66
- </ div >
67
- </ div >
68
- </ section >
69
1
70
2
71
3
< script type ="text/javascript ">
91
23
92
24
</ script >
93
25
94
- <!-- home section -->
95
- < section id ="home ">
96
- < div class ="container ">
97
- < div class ="row ">
98
- < div class ="col-md-12 col-sm-12 ">
99
- < h3 > FRONTEND-DEVELOPMENT </ h3 >
100
- < h1 > CHING-HAO HSU</ h1 >
101
- < hr >
102
- < a href ="#work " class ="smoothScroll btn btn-danger "> Skill</ a >
103
- < a location.href class ="smoothScroll btn btn-default "> Contact Me</ a >
104
- </ div >
105
- </ div >
106
- </ div >
107
- </ section >
108
- <!-- skill section(work) -->
109
- < section id ="skill ">
110
- < div class ="container ">
111
- < div class ="row ">
112
- < div class ="col-md-12 col-sm-12 ">
113
- < div class ="section-title ">
114
- < strong > 01</ strong >
115
- < h1 class ="heading bold "> SKILL</ h1 >
116
- < hr >
117
- </ div >
118
- </ div >
119
- < div class ="col-lg-4 col-md-4 col-sm-4 wow fadeInUp " data-wow-delay ="0.6s ">
120
- < i class ="icon-cloud medium-icon "> </ i >
121
- < h3 > PYTHON </ h3 >
122
- < hr >
123
- < p > This language is for face_recognition. Now, it is my major language.</ p >
124
- </ div >
125
- < div class ="col-lg-4 col-md-4 col-sm-4 wow fadeInUp " data-wow-delay ="0.9s ">
126
- < i class ="icon-mobile medium-icon "> </ i >
127
- < h3 > SWIFT</ h3 >
128
- <!-- & -->
129
- < hr >
130
- < p > This language is for coding IOS APP. The app "TripBike" designed at July 2017 can download at app store.</ p >
131
- </ div >
132
- < div class ="col-lg-4 col-md-4 col-sm-4 wow fadeInUp " data-wow-delay ="1s ">
133
- < i class ="icon-laptop medium-icon "> </ i >
134
- < h3 > ECOMMERCE</ h3 >
135
- < hr >
136
- < p > You can edit and use this template for your websites. Please tell your friends about Tooplate. Thank you for visiting our website.</ p >
137
- </ div >
138
- < div class ="col-lg-4 col-md-4 col-sm-4 wow fadeInUp " data-wow-delay ="1s ">
139
- < i class ="icon-compass medium-icon "> </ i >
140
- < h3 > MOBILE APP</ h3 >
141
- < hr >
142
- < p > Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteu sunt in culpa qui officia.</ p >
143
- </ div >
144
- < div class ="col-lg-4 col-md-4 col-sm-4 wow fadeInUp " data-wow-delay ="1s ">
145
- < i class ="icon-chat medium-icon "> </ i >
146
- < h3 > SOCIAL MEDIA</ h3 >
147
- < hr >
148
- < p > You can easily change icons by looking at < a href ="https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website " target ="_blank "> ET Line Icons</ a > . Excepteu sunt in culpa qui officia. Duis aute irure dolor in reprehenderit.</ p >
149
- </ div >
150
- < div class ="col-lg-4 col-md-4 col-sm-4 wow fadeInUp " data-wow-delay ="1s ">
151
- < i class ="icon-browser medium-icon "> </ i >
152
- < h3 > RESPONSIVE LAYOUT</ h3 >
153
- < hr >
154
- < p > Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteu sunt in culpa qui officia.</ p >
155
- </ div >
156
- </ div >
157
- </ div >
158
- </ section >
159
-
160
-
161
- <!-- about section -->
162
- < section id ="about ">
163
- < div class ="container ">
164
- < div class ="row ">
165
- < div class ="col-md-12 col-sm-12 text-center ">
166
- < div class ="section-title ">
167
- < strong > 02</ strong >
168
- < h1 class ="heading bold "> ABOUT</ h1 >
169
- < hr >
170
- </ div >
171
- </ div >
172
- < div class ="col-md-6 col-sm-12 ">
173
- < img src ="images/about-img.jpg " class ="img-responsive " alt ="about img ">
174
- </ div >
175
- < div class ="col-md-6 col-sm-12 ">
176
- < h3 class ="bold "> DIGITAL TEAM</ h3 >
177
- < h1 class ="heading bold "> Best Design Agency from California</ h1 >
178
- <!-- Nav tabs -->
179
- < ul class ="nav nav-tabs " role ="tablist ">
180
- < li class ="active "> < a href ="#design " aria-controls ="design " role ="tab " data-toggle ="tab "> DESIGN</ a > </ li >
181
- < li > < a href ="#mobile " aria-controls ="mobile " role ="tab " data-toggle ="tab "> MOBILE</ a > </ li >
182
- < li > < a href ="#social " aria-controls ="social " role ="tab " data-toggle ="tab "> SOCIAL</ a > </ li >
183
- </ ul >
184
- <!-- tab panes -->
185
- < div class ="tab-content ">
186
- < div role ="tabpanel " class ="tab-pane active " id ="design ">
187
- < p > Duis aute irure dolor in < a href ="# "> reprehenderit</ a > in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed id est tincidunt, iaculis nulla vel, sodales metus. Morbi interdum accumsan augue, in accumsan neque lacinia sed. Fusce cursus eu ligula ut gravida.</ p >
188
- < p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</ p >
189
- </ div >
190
- < div role ="tabpanel " class ="tab-pane " id ="mobile ">
191
- < p > Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</ p >
192
- < p > < a href ="# "> Duis aute irure dolor</ a > in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</ p >
193
- </ div >
194
- < div role ="tabpanel " class ="tab-pane " id ="social ">
195
- < p > Pellentesque elementum, lacus sit amet < a href ="# "> hendrerit</ a > posuere, quam quam tristique nisi, nec ornare ligula magna id nisl. Donec blandit enim ac semper facilisis. Curabitur eu laoreet mauris, eget fermentum velit.</ p >
196
- < p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</ p >
197
- </ div >
198
-
199
- </ div >
200
- </ div >
201
- </ div >
202
- </ div >
203
- </ section >
204
-
205
- < section id ="education ">
206
- < div class ="container ">
207
- < div class ="row ">
208
- < div class ="col-md-12 col-sm-12 text-center ">
209
- < div class ="section-title ">
210
- < strong > 03</ strong >
211
- < h1 class ="heading bold "> EXPERIENCE</ h1 >
212
- < hr >
213
- </ div >
214
- </ div >
215
- </ div >
216
- < div class ="row tm-section-mb ">
217
- < div class ="col-lg-12 ">
218
- < div class ="tm-timeline-item ">
219
- < div class ="tm-timeline-item-inner ">
220
- <!-- <img src="images/img-03.jpg" alt="Image" class="rounded-circle tm-img-timeline"> -->
221
- <!-- #009988 -->
222
-
223
- < div class ="tm-timeline-description-wrap ">
224
- < div class ="tm-bg-dark tm-timeline-description ">
225
- < h3 class ="tm-text-yellow tm-font-400 "> Education</ h3 >
226
- < br />
227
- < h5 >   National Taiwan Normal University, Taipei City      2/2018 – Present</ h5 >
228
- < h5 >      M.S in Computer Science and Information Engineering </ h5 >
229
- < h5 >   University of Taipei, Taipei City      9/2013 – 6/2017</ h5 >
230
- < h5 >      B.S. in Computer Science </ h5 >
231
- < br />
232
- < h3 class ="tm-text-yellow tm-font-400 "> Military Service</ h3 >
233
- < br />
234
- < h5 >   Discharged      7/2017 ~ 10/2017</ h5 >
235
- < br />
236
- < h3 class ="tm-text-yellow tm-font-400 "> Intern Experience </ h3 >
237
- < br />
238
- < h5 >   Friends of Education Co., Ltd.(友教有限公司), New Taipei City      6/2017 ~ 7/2017</ h5 >
239
- < h5 >      • Frontend Developer for IOS App</ h5 >
240
- < br />
241
-
242
- </ div >
243
- </ div >
244
- < div class ="tm-timeline-connector-vertical "> </ div >
245
- </ div >
246
-
247
-
248
-
249
- </ div >
250
- </ div >
251
- </ section >
252
-
253
-
254
- <!-- contact section -->
255
- < section id ="contact ">
256
- < div class ="container ">
257
- < div class ="row ">
258
- < div class ="col-md-12 col-sm-12 text-center ">
259
- < div class ="section-title ">
260
- < strong > 04</ strong >
261
- < h1 class ="heading bold "> CONTACT Me</ h1 >
262
- < hr >
263
- </ div >
264
- </ div >
265
- < div class ="col-md-6 col-sm-12 contact-info ">
266
- < h2 class ="heading bold "> CONTACT INFO</ h2 >
267
- < p > Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteu sunt in culpa qui officia deserunt mollit anim id.</ p >
268
- < div class ="col-md-6 col-sm-4 ">
269
- < h3 > < i class ="icon-envelope medium-icon wow bounceIn " data-wow-delay ="0.6s "> </ i > EMAIL</ h3 >
270
- < p > howard31622@gmail.com</ p >
271
- </ div >
272
-
273
- </ div >
274
-
275
- </ div >
276
- </ div >
277
- </ section >
278
-
279
- <!-- footer section -->
280
- < footer >
281
- < div class ="container ">
282
- < div class ="row ">
283
- < div class ="col-md-12 col-sm-12 ">
284
- < p > Copyright © Digital Team HTML5 Template | Design: < a href ="http://www.tooplate.com " target ="_parent "> Tooplate</ a > </ p >
285
- < hr >
286
- < ul class ="social-icon ">
287
- < li > < a href ="# " class ="fa fa-facebook wow fadeIn " data-wow-delay ="0.3s "> </ a > </ li >
288
- < li > < a href ="# " class ="fa fa-twitter wow fadeIn " data-wow-delay ="0.6s "> </ a > </ li >
289
- < li > < a href ="# " class ="fa fa-dribbble wow fadeIn " data-wow-delay ="0.9s "> </ a > </ li >
290
- < li > < a href ="# " class ="fa fa-behance wow fadeIn " data-wow-delay ="0.9s "> </ a > </ li >
291
- < li > < a href ="# " class ="fa fa-tumblr wow fadeIn " data-wow-delay ="0.9s "> </ a > </ li >
292
- </ ul >
293
- </ div >
294
- </ div >
295
- </ div >
296
- </ footer >
297
-
298
-
299
- < script src ="js/jquery.js "> </ script >
300
- < script src ="js/bootstrap.min.js "> </ script >
301
- < script src ="js/smoothscroll.js "> </ script >
302
- < script src ="js/isotope.js "> </ script >
303
- < script src ="js/imagesloaded.min.js "> </ script >
304
- < script src ="js/nivo-lightbox.min.js "> </ script >
305
- < script src ="js/jquery.backstretch.min.js "> </ script >
306
- < script src ="js/wow.min.js "> </ script >
307
- < script src ="js/custom.js "> </ script >
308
-
309
- </ body >
310
- </ html >
0 commit comments