-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
356 lines (345 loc) · 17.8 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
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html>
<html lang="en-gb" class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Olly Hodgson / Front-end developer / Designer / Mountain biker
</title>
<script>
document.documentElement.className = document.documentElement.className.replace(
/(\s|^)no-js(\s|$)/,
"$1js$2"
);
</script>
<link
rel="stylesheet"
type="text/css"
href="media/css/normalize.css?v=19"
/>
<link
rel="stylesheet"
type="text/css"
href="media/css/oliverhodgson.css?v=19"
/>
<meta
name="verify-v1"
content="KHoWflmV92lQ7PVYWFyrKvggFjytmezQ9ZSG3QEJYSE="
/>
<meta name="author" content="Oliver Hodgson" />
<meta
name="description"
content="Oliver Hodgson is a front end web developer, designer and mountain biker based on Vancouver Island, BC, Canada"
/>
<meta
name="keywords"
content="Oliver Hodgson, Olly Hodgson, Oliver, Olly, Hodgson, web design, web designer, front-end developer, client-side developer, mountain biker, think drastic, flickr, twitter, linkedin, cv, resume, résumé, curriculum vitae, html5, css, less, sass, bootstrap, javascript, es6, webpack"
/>
<link rel="canonical" href="https://oliverhodgson.com/" />
<script type="text/javascript">
WebFontConfig = {
google: { families: ["Oswald::latin"] },
};
(function () {
var wf = document.createElement("script");
wf.src =
"https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js";
wf.type = "text/javascript";
wf.async = "true";
wf.crossorigin = "anonymous";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<link
rel="apple-touch-icon"
sizes="180x180"
href="media/favicons/apple-touch-icon.png?v=2"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="media/favicons/favicon-32x32.png?v=2"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="media/favicons/favicon-16x16.png?v=2"
/>
<link rel="manifest" href="media/favicons/manifest.json?v=2" />
<link
rel="mask-icon"
href="media/favicons/safari-pinned-tab.svg?v=2"
color="#899b8b"
/>
<link rel="shortcut icon" href="media/favicons/favicon.ico?v=2" />
<meta name="apple-mobile-web-app-title" content="Olly Hodgson" />
<meta name="application-name" content="Olly Hodgson" />
<meta
name="msapplication-config"
content="media/favicons/browserconfig.xml?v=2"
/>
<meta name="theme-color" content="#899b8b" />
<link rel="prefetch" href="/portfolio.html" />
<link rel="prefetch" href="/media/documents/OliverHodgson.pdf" />
</head>
<body class="vcard">
<div class="header-container">
<header class="header olly-transition-group">
<img
class="profile-shot olly-transition olly-transition-hidden"
src="media/images/profile_250.jpg"
alt=""
/>
<h1 class="fn olly-transition olly-transition-hidden">
<span>Olly Hodgson</span>
</h1>
<h2 class="olly-transition olly-transition-hidden">
<span>Front-end developer / Designer / Mountain biker</span>
</h2>
</header>
</div>
<div role="main" class="content-container olly-transition-group">
<div
id="designer"
class="content olly-transition olly-transition-hidden content-designer"
>
<div class="part1">
<h4>A front-end web developer and designer.</h4>
</div>
<div class="part2">
<p>
I've got masses of experience building fast, responsive, easy to use
websites which work across a huge variety of devices, browsers,
screens and input devices. I build things which are easy — to
find, read, use, enjoy and remember. I build for the human beings
who use the site, including the people who have to look after it
when I'm done. I enjoy presenting my work and telling engaging
stories.
</p>
<p>
Experienced with <abbr>HTML5</abbr>, <abbr>CSS</abbr>,
<abbr>SASS</abbr> & <abbr>LESS</abbr>, Bootstrap, Javascript,
<abbr>ES6</abbr>, React, Redux, Node.js & <abbr>npm</abbr>, Webpack,
Babel, Gulp, Razor, Liquid, <abbr>XSLT</abbr>,
<abbr>WAI-ARIA</abbr>, <abbr>SVG</abbr>, Wordpress,
<abbr>DNN</abbr>, SharePoint, Git, <abbr title="">TFS</abbr>, Azure,
Cloudflare, Photoshop, Illustrator, Sketch and many other
technologies.
</p>
<p class="toolbar" role="navigation">
<a href="portfolio.html" class="cta"
>Look at some recent projects</a
>
<a
class="cta"
href="media/documents/OliverHodgson.pdf"
type="application/pdf"
>Read my résumé</a
>
</p>
</div>
</div>
<hr class="separator olly-transition olly-transition-hidden" />
<div
id="biker"
class="content olly-transition olly-transition-hidden content-biker"
>
<div class="part1">
<h4>A mountain biker.</h4>
</div>
<div class="part2">
<p>
The narrow ribbon of sinuous, beautiful singletrack, cutting through
the trees, ever changing with the weather. That epic ride which
takes you out to the middle of nowhere and back, just so you can see
what the middle of nowhere looks like. The epic, endless,
soul-destroying climb, followed by an epic, endless, soul-restoring
view from the summit. That challenging technical feature you've
never beaten before, defeated. That feeling of utter exhaustion,
elation and achievement. The excitement of finding somewhere new.
The high fives with your friends at the bottom of an amazing
descent. The feeling of flow and joy, even on a trail you've ridden
hundreds of times before.
</p>
</div>
</div>
<hr class="separator olly-transition olly-transition-hidden" />
<div
id="how"
class="content olly-transition olly-transition-hidden content-three"
>
<div class="part1">
<h4>All manner of other things.</h4>
</div>
<div class="part2">
<p class="adr">
I'm based on Vancouver Island in
<abbr class="region" title="British Columbia">BC</abbr>,
<span class="country-name">Canada</span>.
</p>
<p>
You can reach me on
<a
href="mailto:[email protected]?subject=oliverhodgson.com"
rel="me"
class="email"
>
or <span class="tel">+1 (250) 650-9612</span>.
</p>
<p>
Perhaps
<a href="media/documents/OliverHodgson.pdf" type="application/pdf"
>grab my <abbr title="Curriculum Vitae">résumé</abbr></a
>?
</p>
</div>
<div class="part3">
<!-- Image modified from , created by Derfel73; Canuckguy et al. ; NordNordWest -->
<svg
class="vi-map"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 536 416"
xmlns="http://www.w3.org/2000/svg"
width="536"
height="416"
version="1"
>
<g fill="none" fill-rule="evenodd">
<g fill="#FFF" stroke="#4C5249" stroke-linejoin="round">
<path
d="M247 239l5 9-1 4 1 6 1 1c2 1-1 4-3 4l-1-1-3-1v-2c-1-1-4-1-4 1h-1l-1-2-4-2v-1h2c0-3-3-5-1-9v-4-1h2c4 2 6-4 8-2zM186 161l3 5 4-2 2 3c-1 5 3 9 4 13l-1 12 3 6v3l-2 5-2 1-2 1c-3 1-4-3-6-4s-3 1-6-1l-1-1-3-5-4-2-3-6c-2-2-5-3-5-7v-2h1l3 4v-1c1-2 0-2 2-3l4-1 1-2-1-1-4 1-3-4-5-1 3-4c1 0 3 2 4 0l2-2 6-2 2-1 1-2h3zM385 214c2 0 3 3 4 3h2c1 1 0 2-1 2h-1l-1-1h-1c-1 1 1 3-2 4l-1-1c-2-2-4-3-3-5l1-1c0-1 2-2 3-1zM371 208l1 1c3 2 2 2 4 5l1 3 2 5 4 2v1h-2l-1-1-4-1-3-5-2-1c-2-2-3-6-3-9l1-1v-3h1c-1 3 1 3 1 4zM138 137l2 1c3 2 2 3 0 4l-1 3h-3l-1-4 2-4h1zM211 193l1 2c2 3-1 3-2 5l-1 4h-2c-1-2 0-3-2-4v-2l3-1c1-2-1-3 2-5v1h1zM258 268c0 1 0 1 0 0l3 1c1 0 3 3 2 4-2 1-1 4-1 6h-1l-2-1-1-2-2-5 1-2 1-1zM271 265v-1l4 2 3 3c-1 2 1 3 1 5l-1 2v3l-1 1-1 2-2-1h-2l-1-1 1-4-1-2c0-2 1-4-1-5-1 2 1 5-2 7h-1c1-2 0-3-1-3v-1l-1-5 1-1h3l1-2 1 1zM347 311c3 1 0 5-1 6l-5 3v-1l4-7 2-1zM12 11c2 1 3 0 4 2s-1 2-2 2c-1 1-2 2-3 1l-2-4h1l2-1zM3 8c2 0 4 3 3 5l-2 1-3-3 1-3h1zM492 316l3 4 1 2 2 1 4 5c-4 1-4-4-6-3l-1 1c0 2 5 6 6 7l2 2 2 1c2 2 4 5 0 7l-2-1-2-1-2-1c0 2 5 5 2 7l-4 2-2-1c-2-1-3-1-4-4l-1-1 1-4v-2l1-1v-1c-1-3-4-2-4-7v-1l2-2c0-1-3-3-3-5l-1-9c1 2 2 5 6 5zM512 320v4h-2c-1 0-2 2-4 1 0 0-1-4-3-5l-2-1-4-4-5-3-9-12-3-4v-2c-1-2-5-7-4-9h2l4 8 1 3 4 6 3 3 6 7 6 3 4 1 2 2c2 1 3 0 4 2zM535 336v2l-2 1v1c-1 1-11 2-11-4v-1l3-1h2l5 2h3zM515 333l2 2 1 4 1 1c1 2 5 2 5 4v1l-1 1-2-1h-2c-3 0-6-8-6-10v-1-1h2zM517 325c2 2 5 1 2 5v2h-1l-5-3h-1v-1l1-1h2l1-2v-1l1 1zM473 283l-5-2c-2-1-5-1-7-3l-1-3v-2l4-2 1 2h1l1 1 5 3 4 1v4l-3 1zM512 361l1 2c1 2 3 3 3 5l-1 1-3-5-1-3-1-1 2 1zM513 346c1 1 2 3 1 5-1-2-4-3-2-5h1zM478 302c2 1 1 3 3 5l1 7h-1c-2-2-2-5-3-7-1-1-3-2-3-4l1-2h2v1z"
/>
<path
d="M120 29h-1v-2l-1-3c-1-2 2-4-2-7l-3-1-12-6-4-1h-2l-3-2h-3l-4-3-2 1-2-3h-2c-3-1-4-1-5 1h-3l-3 2c-3-1-2-3-3-4-2 0-4 3-5 2h-1c0 2-2 4-3 4h-4l-3 1-2 2c-1 2-3 3-5 3h-5l-2 2v1l-4 1-1 1 1 2v3l2 1v3c1 1 2 3 1 5l2 1 1 2h3l2-2h2v1c0 3-5 3-6 4-1 2 2 4 2 6h3v1l2 2 1-1v1c2 1 1 3 1 5l1 2 1 3 4 2 4 6h3l5 5v-1h1c1-3-1-3-2-5v-1l3-1 1 1c0 1 0 3 2 3l5-1 2-1h4c1-1 1-4 3-4 2 1 1 3 1 4h1l8-5 3-1 4-1h3l1-1h2l1-1v-2l-4-4c-1-1-7-2-8-1h-5l-9-6h-1l1-1 6 3h13l4 1 3 1h1l1 2 1 2h3l1-2 5-1 4-1h1v3l-6 1c-2 0-4 2-4 5h-1v-1h-1l-1 4-2 1c2 5 4 5 6 9l3 5 1 3 2 6-6-7-1-3-3-4c-1-1-1-4-3-5h-5l-1 1c-2 0-4-3-6-1l-2 1-2-1-4 4h-4l-2-1v2l-3 1-2-2h-1l-1 5 1 2c-4 1-3 6-3 9-1 1-3 1-2 3l2 2c0 2 0 2 2 3 2 0 4-2 5-4h2l1 3c1 2 3 0 4 0h1c0 5-3 3-5 5v1l3 3 1 3h2l2-1h1l1 3-4 2-1 2-1 1-2 3-3 4-1 1-3 4v1c0 3 3 2 5 3l3 1 2 2h2l1-2c2-2 2-5 4-6l4-3 3-4 3-1 1 1c-1 2-4 5-3 8l3 2 5-2 3-2c2-4 4-7 9-6l-3 3c0 2-1 2-3 4v1h6l1 1-2 1c-3 0-4 1-3 4v0l2 4 1 1 1 3 3 2h5l4-3 2-1v-5l1-2-1-2c0-2-3-4-1-6l3 3 2 1c1 2 1 4 3 4l3 1 1-1 2-2 2-1 1-3v-2h1l1 3c1 2 0 5-3 6l-1 1-2 2-2 1v1c-2 2-1 6-1 8l-2 2-1 3-3 3h1v1l1 2 2 3 2 5 1 1 2 1 2 3 1 1 4-1 8 1 2-1h3v-1l1-9 1-3v-4l2 4c1 3-1 4 1 9l1 2 5-4 2-2c2-4-4-7-4-9h1l4 3 1 3 1 1 1 3c1 3 4 6 7 4l2-3h1l1 1v11l2 7 1 3 1 3 1 6v1l8-1 1-3c2-2 3-3 3-6l-1-4 2-1 4 3v1l-2 3-2 5c-2 1-4 3-3 5l2 1 3 3h5l2 1 2 1h1l4-1c3-1 7-4 11-3h2c1-1 3-2 4-1l2 4h-2l-4 1-3-1-4 2-4 1h-1-5l-2 1-4-1c-2-1-3 0-4 1h-1l-2-1h-1l-1 3-8 5v8l1 2v5l-1 5c0 1 3 3 1 5l-2 1c-1 2 2 4 2 4l1 3 2 1 4-1h2v-3c0-2-2-2-2-5 0-4 2-3 3-5l3-1c2 1 0 3 0 4l3 2c-1 1-2 1-1 3l3 1v1l3 3 2 2 1 1 1 1 1-1v-3l1-1 2-5-1-4h2c3 3-2 4 4 6l2 1c1-4 2-2 5-3l2-3h3l2-2v6l-2 4 1 2v4l3 3c3 1 2 3 5-2h1v-5-1l2-2c3-3 2-5 4-7v4l-1 3-1 5-2 3-1 5-1 1-1 2-4 1v2 2l2 2 1 3 1 1c3 0 4-5 6-7l4-1 2 3c2-1 4-14 5-16l2-2v1l-2 8v11c2 1 4-2 5-3l1 1-1 3-1 7v7l3-1 3-4 2-1 2-2 3-3c2 3-1 4-2 7v2l-4 3-1 2c-1 2-4 1-4 2l-1 2-4 1-2-2c-1-1-2 0-3 1h-1l-1-1v2l-2 2 2 2 3 3c1 0 5-1 8 1l10 10 2 4 4 1 2 2 3 3 2 1h4l1-2 3-3 2-3 3-3 2-8 2 2h5l1 1-2 1c-1 2-5 5-5 7v1l4-1 4 3c5 1 5-4 7-6l2-1h2c1 1 0 4 4 4l4-4c3 0 6 3 9 2l2-2 5-5 1-7 2-4c2-5 3-9 2-14 0-2-1-9 1-10 2 3 1 7 1 9l2 7-2 7-1 4-2 8c-1 3-3 3-4 4l-3 5-5 1c-1 0-5 5-5 7l1 3c0 1-1 3-3 3-2 1-3 0-5 3-2 1-2 5-3 6h-3l-1 2-2 2v1l2 2 2 1h1v5c1 1 1 3 3 3 1 2 5 2 6 3l5 2 6 2 4 4 2 1h3l1 2 5 5h2l2 4 3 1 4 1 3 2 5 1 6 2h1c2 0 2-3 4-4 2 2 3 0 4 0h1v1l-2 1-1 2-2 1v1l2 2h5c1 1 1 3 3 3h3c1 0 1 3 4 4l9 5 4 3h3l2 2 5 1 4 3 4 2 2 1c7-1 4 1 8 2l5-1h1l2 1 3 1 1 2 2 1 2 3c2 0 3-3 6-2v3c1 1 4 0 5-1l-1-3c1-1 1-2 3-2l1-5 2-2 4-9 1-1v1l1 2c1 2 4 2 5 2l1 1v2c2 0 6-1 7-3v-3c1-1 2-2 1-3-1-2-2-2-1-5l-4-2-2-4v-4l-1-6-2-3c-2-3 0-5 0-7l-1-2v-3c-1-1-5-2-6-1-3 2 0 4 1 5l1 1h-1l-3 2 1 4c-1 3-2 1-1 6 0 2-3 3-4 5l-1 2-1-4 2-2c2-2 1-7 0-9l-2-4c-1-2 2 0 1-7l-2-3-3-1-4-4h-1l-1-2 1-1c5 0 4 2 6 2h1v-2c0-2 1-4-1-6l-2 1h-1c-1-2 3-4 2-7l-4-4c-3-2-4-6-6-8l-3-3-2-2c-3-4-7-5-9-10l1-1c3-1 4 3 5 4l1 1c2-2 0-5-1-6 1-2 3-2 2-4 0-2-2-3-3-4-2-3-1-8-4-9l-2-1-3-1v1c-4 2-5-7-6-8l-2-4 2-1c1-2-2-4-3-4l-4-2c-3 0-3 1-6-1l-2-1c-2-1-3 0-5 1l-2-1v-1h1l1-1h4v-1c-1-6-5-3-5-6h-2v2h-1l-2-2h-3l-2-3h-1l-2 1c-2 0-3-4-5-5l-5-1h-4l-4-1h-2l-12-7c-2-2-1-5-4-5-2-1-3-4-5-3l-1 1-2-1h-2l-1-7h-3v-2l-3-4c-1-4-3-13-6-16l-3-2-1-1v-3h2l5 2c2 0 3-6 3-7l-4-4-4-4-3-4-1-1-1-2-3-3-2-2v1l-4-4-2-5-1-1-4-3-1-4-3-6-1-9-3-2v-3c0-2-2-2-2-3l-2-4-1-1c-2-1-6-1-6-3l2-2v-1l-2-5-2-6v-4l-3-6-1-5-1-2-7-4c-2 0-2-2-4-3-4-1-6 1-8 1h-4l-3 1c-3 0-4-3-7-4h-2l-1-1-3-1-7 1c-5-1-6-5-9-7l-8-3c-3-1-2-2-7-2l-2-1h-6l-2-1-3-2-8 1c-5 1-9-2-13-3h-1c-1 2-1 4-3 3l-5-5-3-1-3-2-1-1h-2l-2-2c-2-1-6-1-7 1l-1 2h-2v-1l2-3-1-1h-6l-7-1v-1l1-1h1l-2-2h-10v-3l-2-1h-8l-2-4-2-1-2-1c-2-1-3-3-5-3l-3-1c-3-1 0-4-4-3l-2-1v-2c-1-2 1-5 1-5l-2-1-1 3-2 2v2l-1 1z"
/>
</g>
<path
fill="#4C5349"
d="M343 209l-7 4 1-8-5-5 7-1 4-7 3 7 7 1-5 5 1 8z"
/>
</g>
</svg>
</div>
</div>
<hr class="separator olly-transition olly-transition-hidden" />
<div
id="where"
class="content olly-transition olly-transition-hidden content-where"
>
<div class="part1">
<h3>Olly is resident at these fine establishments:</h3>
</div>
<div class="part2">
<ul
class="olly-transition-group elsewhere"
data-timeout="0"
data-timeout-increment="200"
>
<li class="elsewhere-item olly-transition olly-transition-hidden">
<a href="http://thinkdrastic.net/" rel="external me"
>Think drastic</a
>
<span>It's one of those blog things</span>
</li>
<li class="elsewhere-item olly-transition olly-transition-hidden">
<a
href="https://stackoverflow.com/story/ollyhodgson"
rel="external me"
>Stack Overflow</a
>
<span>Massively multiplayer online technical support</span>
</li>
<li class="elsewhere-item olly-transition olly-transition-hidden">
<a href="https://github.com/OllyHodgson" rel="external me"
>Github</a
>
<span>Open sourcery and other magic</span>
</li>
<li class="elsewhere-item olly-transition olly-transition-hidden">
<a href="https://gist.github.com/OllyHodgson" rel="external me"
>Github Gist</a
>
<span>My collection of handy little code snippets</span>
</li>
<li class="elsewhere-item olly-transition olly-transition-hidden">
<a href="https://codepen.io/thinkdrastic/" rel="external me"
>Codepen</a
>
<span>Somewhere to put the experiments</span>
</li>
<li class="elsewhere-item olly-transition olly-transition-hidden">
<a href="https://www.instagram.com/ollyhodgson/" rel="external me"
>Instagram</a
>
<span>A tiny square view of my adventures</span>
</li>
<li class="elsewhere-item olly-transition olly-transition-hidden">
<a href="https://twitter.com/ollyhodgson/" rel="external me"
>Twitter</a
>
<span>Communication in 140 characters or less</span>
</li>
<li class="elsewhere-item olly-transition olly-transition-hidden">
<a href="https://flickr.com/photos/gnarly/" rel="external me"
>Flickr</a
>
<span>Multi-coloured pixel collections</span>
</li>
<li class="elsewhere-item olly-transition olly-transition-hidden">
<a
href="https://www.linkedin.com/in/ollyhodgson/"
rel="external me"
>LinkedIn</a
>
<span
>Putting the “work” into “social
networking”</span
>
</li>
<li class="elsewhere-item olly-transition olly-transition-hidden">
<a
href="https://dnncommunity.org/Activity-Feed/userId/51"
rel="external me"
><abbr>DNN</abbr> Community</a
>
<span
>It's nice to find a software community as nice as this
one</span
>
</li>
<li class="elsewhere-item olly-transition olly-transition-hidden">
<a rel="me" href="https://indieweb.social/@ollyhodgson"
>Mastodon</a
>
<span>@[email protected]</span>
</li>
<li class="elsewhere-item olly-transition olly-transition-hidden">
<a rel="me" href="https://cohost.org/ollyhodgson">Cohost!</a>
<span>Let's see if this sticks!</span>
</li>
</ul>
</div>
</div>
</div>
<footer>
<p class="credits">
<small>
Original
<a
href="https://commons.wikimedia.org/wiki/File:Vancouver_Island_colony.svg"
>Vancouver Island image</a
>
by Derfel73; Canuckguy et al.; NordNordWest.
</small>
</p>
</footer>
<div class="decorative" aria-hidden="true"></div>
<script type="text/javascript" src="media/script/jquery-1.12.0.js"></script>
<script type="text/javascript" src="media/script/library.js?v=19"></script>
</body>
</html>