-
Notifications
You must be signed in to change notification settings - Fork 0
/
portfolio.html
141 lines (136 loc) · 5.82 KB
/
portfolio.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
<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>() Ze-Hao Wang's portfolio</title>
<meta name='author' content='Salmon' />
<meta name='account' content='grass0916' />
<meta name='viewport' content='width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no'>
<link rel='stylesheet' type='text/css' href='sources/css/normalize.css'>
<link rel='stylesheet' type='text/css' href='sources/css/font-awesome.min.css'>
<link rel='stylesheet' type='text/css' href='sources/css/portfolio.css'>
<script type='text/javascript' src='sources/js/react.min.js'></script>
<script type='text/javascript' src='sources/js/react-dom.min.js'></script>
<script type='text/javascript' src='sources/js/babel.min.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
const produtions = [
{
name: 'Bounty Workers',
description: 'Bounty Workers is a platform for researchers and requesters. It can help them to find the employees and give the coupons be the rewards, in order to reduce the their chores and let they focus on the task. And this is my first development of indenpent large ecommerce system.',
techniques: 'Techniques',
others: 'Others',
thumbnail: 'https://images.unsplash.com/photo-1479659929431-4342107adfc1',
},
{
name: 'MMORPG Maker',
description: 'Stardust Script is a HTML5 game engine for MMORPG. Game designers can use it to create 2.5D game quickyly by themselves. It consists of map editor, scripting and game server, so game designers can focus on the content of game.',
techniques: 'Techniques',
others: {
github: 'https://github.com/grass0916/Stardust-Script',
},
thumbnail: 'https://images.unsplash.com/photo-1479659929431-4342107adfc1',
},
{
name: 'Translation voting system',
description: 'This is build for MMORPG Tree of Savior, engage to Chinese version translation via crowdsourcing. This project uses the native file system read/write instead of any database. Relate Facebook OAuth Login to avoid anonymous posting.',
techniques: 'Techniques',
others: {
github: 'https://github.com/grass0916/Tree-of-Savior-Chinese-Translation-Voting',
},
thumbnail: 'https://images.unsplash.com/photo-1479621051492-5a6f9bd9e51a',
},
{
name: 'NTUST GAME Lab',
description: 'This is my lab website in NTUST. The landing page of the laboratory. I provide the basic user interface template and easy method to updating the information.',
techniques: [ 'HTML5', 'Pug (Jade)' ],
others: {
site: 'http://gamelab.csie.ntust.edu.tw/',
github: 'https://github.com/NTUST-GameLab/lab-website',
},
thumbnail: 'https://images.unsplash.com/photo-1479621051492-5a6f9bd9e51a',
},
{
name: 'LoL record LineBot',
description: 'This bot based on Line message API v2.0, and auto-response the player record of online game - League of Legends. The the game API that used fake access token to grab from the Garena official App.',
techniques: [ 'Node.js', 'AJAX', 'web crawler' ],
others: {
github: 'https://',
},
thumbnail: 'https://images.unsplash.com/photo-1479621051492-5a6f9bd9e51a',
},
{
name: 'DeChat',
description: 'DeChat is a simple web-based chat room. It\'s constructed by Node.js with koa. Using React and jQuery AJAX long polling.',
techniques: 'Techniques',
others: {
github: 'https://github.com/grass0916/dechat',
},
thumbnail: 'https://images.unsplash.com/photo-1479644025832-60dabb8be2a1',
},
{
name: 'RO rAthena scriptings',
description: 'These are the collection of my scripts in Ragnarok Online server emulator.',
techniques: 'C++',
others: {
youtube: 'https://www.youtube.com/playlist?list=PL0A23B105CA727AF5',
},
thumbnail: 'https://images.unsplash.com/photo-1479644025832-60dabb8be2a1',
},
];
class ProductionCard extends React.Component {
// Initial default data.
constructor(props) {
super(props);
this.state = {
content: 'content-2nd'
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(contentClassName) {
this.setState(prevState => ({
content: contentClassName
}));
}
render() {
return (
<div className='card'>
<div className='card-bg' style={{backgroundImage: 'url(' + this.props.prodution.thumbnail + ')'}} />
<div className='card-info'>
<div className='title'>{this.props.prodution.name}</div>
<div className={`content ${this.state.content}`}>
<div className='techniques'><p>{JSON.stringify(this.props.prodution.techniques)}</p></div>
<div className='description'><p>{this.props.prodution.description}</p></div>
<div className='others'><p>{JSON.stringify(this.props.prodution.others)}</p></div>
</div>
<div className='switchers'>
<div className={`techniques trigger ${this.state.content == 'content-1st' ? 'active' : ''}`}
onClick={() => this.handleClick('content-1st')}>
<i className='fa fa-code fa-2x' />
</div>
<div className={`techniques trigger ${this.state.content == 'content-2nd' ? 'active' : ''}`}
onClick={() => this.handleClick('content-2nd')}>
<i className='fa fa-file-text-o fa-2x' />
</div>
<div className={`techniques trigger ${this.state.content == 'content-3rd' ? 'active' : ''}`}
onClick={() => this.handleClick('content-3rd')}>
<i className='fa fa-link fa-2x' />
</div>
</div>
</div>
</div>
);
}
};
const productionCards = produtions.map((prodution) =>
<ProductionCard prodution={prodution} />
);
ReactDOM.render(
<div className='container'>{productionCards}</div>,
document.getElementById('root')
);
</script>
</body>
</html>