-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
193 lines (154 loc) · 8.04 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Portfolio | Ye Jun Wu Front-End Developer</title>
<link rel="stylesheet" href="css/bulma.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
</head>
<body>
<main id="main">
<section class="hero is-fullheight is-bold">
<div class="logo animated slideInDown">
<img src="images/yw-logo-wit.png" alt="">
</div>
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title intro animated zoomIn">
Ye Jun Wu
</h1>
<h2 class="subtitle intro-sub animated fadeInUp">
Front-End & Wordpress Developer
</h2>
</div>
</div>
<div class="hero-foot has-text-centered"><i class="fa fa-angle-down animated fadeInUp" id="arrow" aria-hidden="true"></i>
</div>
</section>
<!-- Rederij Kees -->
<section class="hero project is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column img-0 hidden animated img-right">
<img src="images/rk.png" alt="">
</div>
<div class="column is-5 is-offset-1 text-0 animated hidden text-left">
<h1 class="title">
Rederij Kees
</h1>
<h2 class="subtitle">
Responsive Wordpress site made with Bootstrap
</h2>
<p>Rederij Kees is a logistics company in Amsterdam. For this website I created a custom Wordpress theme with Bootstrap. For it's icons I made use of Scalable Vector Graphics(SVG). By using SVG, the icons scale responsively and are less heavy on resources than .jpeg or .png files.</p>
<a class="button is-outlined rk" href="https://rederijkees.nl" target="_blank">Check it out</a>
</div>
</div>
</div>
</div>
</section>
<!-- Fonds voor Oost -->
<section class="hero project is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column is-7 img-1 animated hidden">
<img src="images/fvo_browser.png" alt="">
</div>
<div class="column text-1 animated hidden">
<h1 class="title">
Fonds voor Oost
</h1>
<h2 class="subtitle">
Responsive Wordpress site
</h2>
<p>Fonds voor Oost is an organization in Amsterdam that supports local initatives. For their site they wanted a complete redesign and highlight the people in the neighbourhood. The website uses big background images showcasing the people of Amsterdam Oost. </p>
<a class="button is-outlined fvo" href="http://fondsvooroost.nl" target="_blank">Check it out</a>
</div>
</div>
</div>
</div>
</section>
<!-- Merus -->
<section class="hero project is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column img-2 animated hidden img-right">
<img src="images/merus_browser.png" alt="Merus">
</div>
<div class="column is-5 is-offset-1 text-2 animated hidden text-left">
<h1 class="title">
Merus
</h1>
<h2 class="subtitle">
Responsive Wordpress site
</h2>
<P>A medical research company. With the use of CSS3 I implemented gradient colored borders that matches with the gradient in their logo.</P>
<a class="button is-outlined merus" href="http://merus.nl" target="_blank">Check it out</a>
</div>
</div>
</div>
</div>
</section>
<!-- De Fijne Tandartsen -->
<section class="hero project is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column img-3 animated hidden">
<img src="images/dft_browser.png" alt="De Fijne Tandartsen">
</div>
<div class="column is-5 is-offset-1 text-3 animated hidden dft">
<h1 class="title dft">
De Fijne Tandartsen
</h1>
<h2 class="subtitle dft">
Responsive Wordpress site
</h2>
<P>De Fijne Tandartsen is a dentistry in Barneveld. I implemented their design and made it fully responsive. The site uses the Facebook API to display a Facebook widget in the sidebar and the Google maps API to display the company location. </P>
<a class="button is-outlined" href="http://defijnetandartsen.nl" target="_blank">Check it out</a>
</div>
</div>
</div>
</div>
</section>
<!-- Hans Beers -->
<section class="hero project is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column img-4 animated hidden img-right">
<img src="images/hb.png" alt="Hans Beers">
</div>
<div class="column is-5 is-offset-1 text-4 animated hidden text-left">
<h1 class="title">
Hans Beers Kappers
</h1>
<h2 class="subtitle">
Responsive Wordpress site
</h2>
<P>A barber shop in Amsterdam. The goal for this site was to highlight the work of Hans Beers. The images on the homepage will realign when viewed on different screen sizes.</P>
<a class="button is-outlined" href="http://hansbeers.com" target="_blank">Check it out</a>
</div>
</div>
</div>
</div>
</section>
<div id="footer">
<div class="columns">
<div class="column is-half is-offset-one-quarter">
<h3 class="title footer-content animated hidden">Thanks <i class="fa fa-heart animated" aria-hidden="true"></i> for watching</h3>
</div>
</div>
</div>
</main>
<script src="js/scripts.js"></script>
</body>
</html>