-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
240 lines (239 loc) · 10.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/icons/hansenbw.ico" />
<title>Hansen Wang</title>
<meta name="keywords" content="hansen's personal website" />
<meta name="description" content="hansen's personal website" />
<meta name="author" content="Hansen Wang" />
<link rel="stylesheet" href="css/new.css">
<link rel="stylesheet" href="css/header_footer.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.min.js"></script>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script> -->
<script type="text/javascript" src="js/new.js"></script>
<script type="text/javascript" src="js/header_footer.js"></script>
</head>
<body>
<header></header>
<div id="fullpage">
<div class="section intro">
<div class="introduction">
<p id="name">HANSEN WANG</p>
<p id="quote">Success is one decision away</p>
</div>
</div>
<!-- ----------------------------------------------------------------------------------------------------------- -->
<div class="section skills">
<div class="container">
<div class="col-xs-12 col-sm-4">
<div class="skill_content skill_content_1">
<div style="background: white; border-radius: 250px; margin: 20px auto; width: 250px;">
<img src="img/myPhoto.png" width="80%" style="max-width: 277px" alt="my photo">
</div>
<h1>Computer Engineering</h1>
<h3>University of Waterloo</h3>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="skill_content skill_content_2">
<img src="img/icons/coding.png" alt="">
<h2>Skills</h2>
<ul style="list-style-type: none; color: #81D4FA">
<span style="color: white">Web Development(2+ years):</span>
<li>HTML/CSS/Sass</li>
<li>Javascript/JQuery/Ajax</li>
<li>PHP</li>
<li>MySQL</li>
<li>Ruby on Rails</li>
<span style="color: white">Software Development:</span>
<li>C/C++</li>
<li>Java</li>
<li>Linux</li>
<li>MATLab</li>
<li>VHDL</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="skill_content skill_content_3">
<img src="img/icons/tools.png" alt="">
<h2>Tools</h2>
<ul style="list-style-type: none; color: #81D4FA">
<span style="color: white">Softwares:</span>
<li>Notepad++/Sublime</li>
<li>Eclipse</li>
<li>Zend Studio</li>
<li>Android Studio</li>
<li>Dreamweaver</li>
<li>Photoshop</li>
<li>Ubuntu/Centos</li>
<span style="color: white">Frameworks:</span>
<li>React.js</li>
<li>Bootstrap</li>
<li>fullpage.js</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ----------------------------------------------------------------------------------------------------------- -->
<div class="section projects">
<div class="projectsMain">
<div class="slide projects1">
<div class="projs projs1">
<div class="col-xs-12 col-sm-5">
<h1>Personal Website</h1>
<h3>Project NO.1</h3>
<img src="img/projects/pw.png" alt="">
<p>Hansen's personal website 2.0</p>
</div>
<div class="col-xs-12 col-sm-7 projDes">
<h2>Skills:</h2>
<h4>HTML/CSS/Javascript/JQuery</h4>
<h2>Tools:</h2>
<h4>Sublime Text Editor, Adobe Dreamweaver, Adobe Photoshop, Bootstrap.js, Fullpage.js</h4>
<h2>Other:</h2>
<h4>UI/UX Design, Material Design</h4>
<h2>Comment:</h2>
<p>This is the second version of my personal website, <a href="#">click here</a> for the first one. Compared with the old one, the new one looks more beautiful, every background picture was selected with exterme caution and the web itself was designed to be simplier and more user-friendly. Also, one big change is that the new one used bootstrap framework which makes it more compatiable with the mobile device given the fact that more and more people are surfing the internet through their phones and tables</p>
</div>
</div>
</div>
<div class="slide projects2">
<div class="projs projs2">
<div class="col-xs-12 col-sm-5">
<h1>Risky Phone</h1>
<h3>Project NO.2</h3>
<img src="img/projects/rp.png" alt="">
</div>
<div class="col-xs-12 col-sm-7 projDes">
<h2>Skills:</h2>
<h4>Java/XML</h4>
<h2>Tools:</h2>
<h4>Android Studio, Adobe Photoshop, Version Control(Github)</h4>
<h2>Other:</h2>
<h4>UI/UX Design</h4>
<h2>Comment:</h2>
<p>This is an Android app that can detect touch event and track the distance between touch point and the edge of the screen and display this number in terms of centimeters. The number can be stored and uploaded to social network such as Facebook through one click to encourage competition through its social integration. The idea behind this Android application was generated from a popular trend I happened to notice on social network named " <a href="#">extreme phone piniching</a>". My friend and I worked 48 hours straight and made the app as part of hackerthan_Enghack. I designed the user interface and the functions of the app.</p>
</div>
</div>
</div>
<div class="slide projects3">
<div class="projs projs3">
<div class="col-xs-12 col-sm-5">
<h1>Stock Simulation</h1>
<h3>Project NO.3</h3>
<img src="img/projects/ss.JPG" alt="">
</div>
<div class="col-xs-12 col-sm-7 projDes">
<h2>Skills:</h2>
<h4>Java/UML</h4>
<h2>Tools:</h2>
<h4>Eclipse</h4>
<h2>Other:</h2>
<h4>UI/UX Design, UML</h4>
<h2>Comment:</h2>
<p>Stock simulation provides people with little or no background a easy tool to learn how stock trading works. Anyone can register for a new account coming with some amount of initial money. Stocks are predefined and so is the news which can influence the price of the stocks. Users are able to sell and buy any amount of predefined stocks at any point during the simulation they wish. All the databases are simulated by textfiles. This software was coded by Java and run on Windows system. I led a team of four people working on this software as part of school projects. I designed and coded the main functions, user interfaces and the algorithem that can store information of users' accounts into textfiles or pull them out. </p>
</div>
</div>
</div>
<div class="projectsAlt">
<h1>Projects</h1>
<div><img src="img/projects/pw.png" width="300px" style="margin: auto" alt=""></div>
<div style="margin-top: 40px;"><a href="projects.html">View my projects</a></div>
</div>
</div>
</div>
<!-- ----------------------------------------------------------------------------------------------------------- -->
<div class="section experience">
<div class="container">
<h1>Experience</h1>
<h3>The best way to grow</h3><br/><br/>
<div class="col-xs-12 col-sm-4 exp_content">
<h3>Work Experience</h3>
<ul>
<li>
<h4>Applyboard</h4>
<h5><i>Full-stack Web Developer</i></h5>
<p>2016.5-2016.8</p>
</li>
<br/>
</ul>
</div>
<div class="col-xs-12 col-sm-4 exp_content">
<h3>Education</h3>
<ul>
<li>
<a href="https://uwaterloo.ca/"><h4>University of Waterloo</h4></a>
<h5><i>Computer Engineering</i></h5>
<p>2015.9-now</p>
</li>
<br/>
<li>
<h4>A.Y.Jackson Secondary School</h4>
<p>2014.9-2015.6</p>
</li>
<br/>
<li>
<a href="http://www.gaoxinhighschool.com/"><h4>XIAN GAOXIN NO.1 HIGH SCHOOL</h4></a>
<p>2012.9-2014.6</p>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 exp_content">
<h3>Other Experience</h3>
<ul>
<li>
<h4>Robotic Team</h4>
<p>Acquired both hardware and software knowledge.</p>
</li>
<br/>
<li>
<h4>School Debate Team</h4>
<p>Trained brain for fast thinking and fast responding. Also, trained to think and see things from different angle.</p>
</li>
<br/>
<li>
<h4>Entrepreneurship Socitey/Velocity</h4>
<p>Learned to think like an entrepreneur and generate feasible solutions for real life problems.</p>
</li>
</ul>
</div>
</div>
</div>
<!-- ----------------------------------------------------------------------------------------------------------- -->
<div class="section blog">
<div class="container">
<h1>My Vision</h1>
<h3 style="color: #424242 !important">Thinking makes all the differences</h3>
<div class="blogs blog1 col-xs-12 col-sm-4">
<div>
<a href="blogs/iphonese.html"><img src="img/blogs/apple1.png" width="100%" alt=""></a>
<div>Is the announcement of IPhoneSE a sign of Apple going downhill?</div>
</div>
</div>
<div class="blogs blog2 col-xs-12 col-sm-4">
<div>
<a href="#"><img src="img/blogs/apple2.jpg" width="100%" alt=""></a>
<div>What I think about Apple's investment in Didi</div>
</div>
</div>
<div class="blogs blog3 col-xs-12 col-sm-4">
<!-- <div>
<a href="#"><img src="img/blogs/apple2.jpg" width="100%" alt=""></a>
<div>What I think about Apple's investment in Didi</div>
</div> -->
</div>
</div>
</div>
<!-- ----------------------------------------------------------------------------------------------------------- -->
<footer class="section section6 fp-auto-height"></footer>
</div>
</body>
</html>