-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
274 lines (236 loc) · 12.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Hello I'm Derek</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/c3.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/timeline.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<!-- GitHub button-->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<!--nav class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Navbar Link</a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li><a href="#">Navbar Link</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav-->
<div id="index-banner" class="parallax-container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<!--h1 class="header center teal-text text-lighten-2">Parallax Template</h1-->
<div class="profilePic"><image src="images/profile2.jpg"></image></div>
<div class="row center">
<h4 class="header col s12 light" id="name">LIN CHIH WEI</h4>
<h5 class="header col s12 light" id="job-position">Front-End Developer</h5>
<a class="waves-effect waves-light btn" target="_blank" id="connect-btn" href="https://www.linkedin.com/in/derek-lin-59036844/">Connect</a>
</div>
<!--div class="row center">
<a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light teal lighten-1">Get Started</a>
</div-->
<br><br>
</div>
</div>
<div class="parallax blurify"><img src="images/parallax-bg1.jpg" alt="Unsplashed background img 1"></div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
<h5 class="center">JAVA</h5>
<p class="light">Most of the projects I've worked on in the past 3 years used JAVA as the main tool to provide service to the front-end.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-JavaScrJAVAtext"><i class="material-icons">group</i></h2>
<h5 class="center">JAVASCRIPT</h5>
<p class="light">As the heart and soul of the front-end development, I utilized Angular as the foundation along with various library (eg. D3.js, C3.js and SpreadJS) to build interactive web applications.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">settings</i></h2>
<h5 class="center">HTML/CSS</h5>
<p class="light">Experienced in responsive web design using Bootstarp 3 and other component based on Bootstarp. Currently, I'm more intereted in materialized design and tend to learn more about it.</p>
</div>
</div>
</div>
<div class="row">
<div id="skillChart"></div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h3 class="header col s12 light">Experience</h3>
</div>
</div>
</div>
<div class="parallax blurify"><img src="images/parallax-bg1.jpg" alt="Unsplashed background img 2"></div>
</div>
<div class="main-container">
<section id="timeline" class="timeline-outer">
<div class="container" id="content">
<div class="col s12 m12 l12">
<ul class="timeline">
<li class="event" data-date="2014-Present">
<h3>Taiwan Semiconductor Manufacturing Company</h3>
<p>I started my career as a software engineer in TSMC, a leading company in semiconductor manufacturing. Most of the projects I've participated in are about demand analysis & forcasting which requires lots of chart and spreadsheet to interact with. I decided to bring Angular.js, D3.js, C3.js, SpreadJS and Bootstrap into the project as our main technology. During those projects, I saw the possibilities of what front-end technology can do and determind to pursuit the beauty of front-end development.
</p>
</li>
<li class="event" data-date="Aug-Oct/2013">
<h3>Ribose Inc. (Hong Kong)</h3>
<p>Ribose is a startup company in central Hong Kong who concentrate on building social collaboration platform. During the internship, I used Rudy on Rails along with Bootstrap to build a monitoring website that show the security status of every machine in the company. It is also the time I started to lean toward front-end development.
</p>
</li>
<li class="event" data-date="Aug-Sep/2012">
<h3>Sixnoloy Inc. (Hsinchu)</h3>
<p>Sixnoloy is a startup that focusing on building software/hardware that defines the future of digital home. As an intern, I involved in the development of several Andriod app that are actually available on Google Play.</p>
</li>
<li class="event" data-date="2011-2012">
<h3>Microsoft Corp. (Taipei)</h3>
<p>I spend a year as an technical intern in Microsoft Taiwan. During the internship period, I was responsible on Microsoft Could solution which involves doing POC to our clients and on-site support. Aside from POC, I also build a web-based monitoring application call "Hyper-V Mosaic" which can monitor the status of all the VM in the server room anywhere anytime.</p>
</li>
<li class="event" data-date="2011-2012">
<h3>Master degree in IM at NCTU (Hsinchu)</h3>
<p>I found myself fasinated by the impact the social media can have on the world. Therefore, my research is focusing on finding potential business oppertunities by analyzing Facebook data Data Mining technique.</p>
</li>
<li class="event" data-date="2007-2011">
<h3>Bachelor degree in MIS at NCCU(Taipei)</h3>
<p>This is where my interet in information technology begun, and also the time I started to build things for mobile app and the web with PHP and Java. Me and my teamates build a location-based app for andriod as our final project.</p>
</li>
</ul>
</div>
</div>
</section>
<br/>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h3 class="header col s12 light">Project</h3>
</div>
</div>
</div>
<div class="parallax blurify"><img src="images/parallax-bg1.jpg" alt="Unsplashed background img 3"></div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="col m6 s12">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/uni-world.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Uni World<i class="material-icons right">more_vert</i></span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Uni World<i class="material-icons right">close</i></span>
<p>Uni World is a website for a serious campainge for a leadership development program that held by Uni Stratigic Inc, a Singapore-based company. </p>
</div>
</div>
</div>
<div class="col m6 s12">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/ribose-gardian2.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Ribose Guardian<i class="material-icons right">more_vert</i></span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Ribose Guardian<i class="material-icons right">close</i></span>
<p>Ribse Guardian servers as a security supervisor for all the PCs at Ribose. It collects and calculate the health status of all PC (such as patch appliance, virus pattern update and anti-virus status) and display in the browser. It allows security manager apply the newest update or discover threats on everyone's PCs at the earliest time possible.</p>
</div>
</div>
</div>
<div class="col m6 s12">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/hyperv-mosaic.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">HyperV Mosaic<i class="material-icons right">more_vert</i></span>
<!-- <p><a href="#">This is a link</a></p> -->
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HyperV Mosaic<i class="material-icons right">close</i></span>
<p>HyperV Mosaic is a server monitoring application that I developed during my internship at Microsoft. It not only serves as a dashboard displaying live screenshots of all the virtual machines running in the server room, it also alows IT admin to initiate a remote desktop connection to selected machine directly throught the dashboard.</p>
</div>
</div>
</div>
<div class="col m6 s12">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/bhk-widget.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">HKS好康多 Widget<i class="material-icons right">more_vert</i></span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HKS好康多 Widget<i class="material-icons right">close</i></span>
<p>HKS is a location-based discount information platform. I was responsible for the widget part of the app in android during my time as an intern at Sixnology.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer teal">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Contact Info</h5>
<ul>
<li class="white-text">Tel: +886 970151515</li>
<li class="white-text">Mail: [email protected]</li>
<li class="white-text">Location: Taiwan</li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li>
<a class="github-button" href="https://github.com/tkforce" data-style="mega" data-count-href="/tkforce/followers" data-count-api="/users/tkforce#followers" data-count-aria-label="# followers on GitHub" aria-label="Follow @tkforce on GitHub">Follow @tkforce</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="brown-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script src="js/d3.js"></script>
<script src="js/c3.js"></script>
<script src="js/controller.js" ></script>
</body>
</html>