-
Notifications
You must be signed in to change notification settings - Fork 1
/
project.html
272 lines (259 loc) · 14.4 KB
/
project.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
<!DOCTYPE html>
<html>
<head>
<title>Project | Liang-Hsuan Ma</title>
<meta charset="UTF-8">
<meta name="author" content="Liang-Hsuan Ma">
<meta name="description" content="Hello, my name is Liang-Hsuan Ma (Leon). I am Hacker, Tuner, Calisthenics and DJ. This is my Project page, which lists some of my awesome works.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="https://lhm-website.herokuapp.com/assets/image/lhm.png">
<link rel="stylesheet" type="text/css" href="css/project.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/png" sizes="96x96" href="assets/image/favicon-96x96.png">
</head>
<body translate="no" >
<div class="loader-wrapper">
<div class="loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="content">
<div class="row">
<a id="kicks4love" class="set" style="background:black"
onclick="Popup.clickHandler(true, 'Kicks4Love', [
'Collaborated with other sneaker enthusiasts to produce a latest sportswear information website.',
'Dedicated to front-end design and user experience to ensure page visits.'
], { website: {
link: 'https://kicks4love.com',
title: 'visit kicks4love.com',
faClass: 'fa fa-globe fa-3x white'
}});">
<span class="layer one" style="background:#c3c3c3"></span>
<span class="layer two" style="background:white"><img src="assets/image/kicks4love-nav.png"></span>
<span class="layer three" style="color:black">Kicks4Love</span>
</a>
<a class="set" style="background:#c3c3c3"
onclick="Popup.clickHandler(false, 'Beyond Block', [
'A healthcare blockchain system that stores insurance policies and medical information, including smart contracts to implement business logic.',
'Strong access control to allow the right party to access the right file and transaction history with assurance.'
], { git: {
link: 'https://github.com/ecefydp2019g54',
title: 'go to see Beyond Block on github',
faClass: 'fa fa-github fa-3x black'
}});">
<span class="layer one" style="background:white"></span>
<span class="layer two" style="background:black"><img src="assets/image/beyondblock.png"></span>
<span class="layer three">Beyond Block</span>
</a>
<a class="set" style="background:black"
onclick="Popup.clickHandler(true, 'Hand Detection', [
'A light weighted library to to track fingers and hands motion using image processing.',
'Emphasizing on thread-safe feature to allow real-time detection for end users.'
], { photo: {
link: 'https://github.com/Liang-Hsuan/Hand-Detection',
title: 'go to see Hand Detection on github',
faClass: 'fa fa-github fa-3x white'
}});">
<span class="layer one" style="background:#c3c3c3"></span>
<span class="layer two" style="background:white"><img src="assets/image/hand-detection.png"></span>
<span class="layer three" style="color:black">Hand Detection</span>
</a>
</div>
<div class="row alone">
<a class="set" style="background:#c3c3c3"
onclick="Popup.clickHandler(false, 'Order Manager', [
'A desktop application that can manage orders from various online shopping channels.',
'Remarkable object-oriented structure to provide multichannel handling.',
'Plenty of data manipulation, data processing and data exchange via XML, JSON and CSV files.'
], { git: {
link: 'https://github.com/Liang-Hsuan/Order-Manager',
title: 'go to see Order Manager on github',
faClass: 'fa fa-github fa-3x black'
}, video: {
link: 'https://youtu.be/E7fsC4W7EdU',
title: 'watch Order Manager demo video',
faClass: 'fa fa-video-camera fa-3x black'
}});">
<span class="layer one" style="background:white"></span>
<span class="layer two" style="background:black"><img src="assets/image/order-manager.png"></span>
<span class="layer three">Order Manager</span>
</a>
</div>
<div class="row">
<a class="set" style="background:black"
onclick="Popup.clickHandler(true, 'Lense', [
'A Chrome extension that filters out disturbing contents such as violent, horrifying, or NSFW images.',
'Learn from user feedback for machine learning on image classification.'
],{ git: {
link: 'https://github.com/TeamLense/lense',
title: 'go to see Lense Project on github',
faClass: 'fa fa-github fa-3x white'
}});">
<span class="layer one" style="background:#c3c3c3"></span>
<span class="layer two" style="background:white"><img src="assets/image/lense.png"></span>
<span class="layer three" style="color:black">Lense</span>
</a>
<a class="set" style="background:#c3c3c3"
onclick="Popup.clickHandler(false, 'Network CLI', [
'A simple network comand line tool for TCP and UDP connections.',
'Deliver quick and reliable method to manage local network.'
], { git: {
link: 'https://github.com/Liang-Hsuan/Network-CLI',
title: 'go to see Network CLI on github',
faClass: 'fa fa-github fa-3x black'
}});">
<span class="layer one" style="background:white"></span>
<span class="layer two" style="background:black"><img src="assets/image/network-cli.png"></span>
<span class="layer three">Network CLI</span>
</a>
<a class="set" style="background:black"
onclick="Popup.clickHandler(false, 'Beyond Block', [
'An online multiplayer game with score ranking mechanism for competition.',
'Developed while learning for my first game project at hackathon within 36 hours.'
], { website: {
link: 'http://www.survivalgameonline.com',
title: 'visit survivalgameonline.com',
faClass: 'fa fa-globe fa-3x black'
}, git: {
link: 'https://github.com/x65han/EngHack-2016',
title: 'go to see Survival Game on github',
faClass: 'fa fa-github fa-3x black'
}});">
<span class="layer one" style="background:#c3c3c3"></span>
<span class="layer two" style="background:white"><img src="assets/image/survival-game.png"></span>
<span class="layer three" style="color:black">The Survival Game</span>
</a>
</div>
<div class="row alone">
<a class="set" style="background:#c3c3c3"
onclick="Popup.clickHandler(false, 'Comming Soon', [
'More projects are going to coming up',
'I won\'t let you down.'
],{});">
<span class="layer one" style="background:white"></span>
<span class="layer two" style="background:black"><img src="assets/image/coming-soon.png"></span>
<span class="layer three" style="color:white">Comming Soon</span>
</a>
</div>
</div>
<a id="toggle"><span></span></a>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a>Project</a></li>
<li><a href="experience.html">Experience</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="popups-content">
<div class="popups-content-overlay"></div>
<div class="popup">
<div class="popup-pieces"></div>
<div class="popup-content">
<div class="popup-close"></div>
<h3 id="popup-title" class="popup-heading"></h3>
<div class="link"></div>
</div>
</div>
</div>
</body>
<script type ="text/javascript">
document.onreadystatechange = function() {
Menu.theToggle.onclick = function() {
Menu.toggleClass(this, "on");
return false;
}
for (var i = 1; i <= Popup.numOfPieces; i++) {
var piece = document.createElement("div");
piece.classList.add("popup-piece");
Popup.insertInnerPieces(piece, 3);
Popup.frag.appendChild(piece);
}
document.querySelector(".popup-pieces").appendChild(Popup.frag);
document.querySelector(".popup-close").addEventListener("click", Popup.closeHandler);
document.querySelector(".popups-content-overlay").addEventListener("click", Popup.closeHandler);
document.getElementsByTagName("body")[0].addEventListener("touchstart", function(){}, true);
window.onload = function() {
var loader = document.querySelector(".loader-wrapper");
var opacity = 1;
setTimeout(function() {
var timer = setInterval(function() {
opacity -= 0.05;
if(opacity <= 0) {
clearInterval(timer);
loader.remove();
} else {
loader.style.opacity = opacity;
loader.style.filter = "alpha(opacity=" + opacity * 100 + ")";
}
}, 50);
}, 2000);
}
}
/*
* Class for Popup
*/
var Popup = {
numOfPieces: 6 * 6,
frag: document.createDocumentFragment(),
popupsContent: document.querySelector(".popups-content"),
popupContent: document.querySelector(".popup-content"),
popupLinks: document.querySelector(".link"),
popup: document.querySelector(".popup"),
popupAT: 900,
insertInnerPieces: function(element, innerPieces) {
for (var i = 0; i < innerPieces; i++) {
var inner = document.createElement("div");
inner.classList.add("popup-piece-inner");
element.appendChild(inner);
}
},
clickHandler: function(isBlack, title, textList, linkDictionary) {
if (!isBlack) {
Popup.popupContent.style.background = "white";
Popup.popupContent.style.color = "black";
}
for (var link in linkDictionary) {
var popupLink = document.createElement('a');
popupLink.className = "project-link";
popupLink.href = linkDictionary[link].link;
popupLink.title = linkDictionary[link].title;
popupLink.target = "_blank";
var popupLinkFa = document.createElement("i");
popupLinkFa.setAttribute("aria-hidden", true);
popupLinkFa.className = linkDictionary[link].faClass;
popupLink.appendChild(popupLinkFa);
Popup.popupLinks.appendChild(popupLink);
}
document.getElementById("popup-title").innerHTML = title;
for (var text in textList) {
var popupText = document.createElement('p');
popupText.innerHTML = textList[text];
popupText.className = "popup-text";
Popup.popupContent.appendChild(popupText);
}
Popup.popupsContent.classList.add("s-popup-active");
Popup.popup.classList.add("s-active");
},
closeHandler: function() {
Popup.popupContent.style.background = "black";
Popup.popupContent.style.color = "white";
var linkList = document.querySelectorAll(".link a");
for (var i = 0; i < linkList.length; i++)
Popup.popupLinks.removeChild(linkList[i]);
var textList = document.querySelectorAll(".popup-content p");
for (var i = 0; i < textList.length; i++)
Popup.popupContent.removeChild(textList[i]);
Popup.popupsContent.classList.remove("s-popup-active");
Popup.popup.classList.remove("s-active");
Popup.popup.classList.add("s-closed");
setTimeout(function() {
Popup.popup.classList.remove("s-closed");
}, Popup.popupAT);
}
}
</script>
<script type ="text/javascript" src="js/menu.js"></script>
</html>