-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
344 lines (299 loc) · 18.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- SEO Meta Tags -->
<meta name="description" content="Personal website">
<meta name="author" content="Max Stubbersfield">
<!-- Webpage Title -->
<title>Max Stubbersfield</title>
<!-- Styles -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap"
rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fontawesome-all.css" rel="stylesheet">
<link href="css/swiper.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/site.webmanifest">
</head>
<body data-spy="scroll" data-target=".fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<div class="container">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Max Stubbersfield</a> -->
<!-- Image Logo -->
<!-- <a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a> -->
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" href="#header">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#projects">Projects</a>
</li>
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Drop</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item page-scroll" href="article.html">Article Details</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="terms.html">Terms Conditions</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item page-scroll" href="privacy.html">Privacy Policy</a>
</div>
</li> -->
</ul>
</div> <!-- end of navbar-collapse -->
</div> <!-- end of container -->
</nav> <!-- end of navbar -->
<!-- end of navigation -->
<!-- Header -->
<header id="header" class="header">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="text-container">
<h1 class="h1-large">Hi, I’m Max.</h1>
<p class="p-large">I am a mobile developer mainly focused on iOS.<br>I enjoy solving
problems and creating a great user experience.<br>I like working with people that have a
passion for development and also enjoy a good laugh.</p>
</div> <!-- end of text-container -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</header> <!-- end of header -->
<!-- end of header -->
<!-- Projects -->
<div id="projects">
<!-- Topo Maps -->
<div id="nz-topo-maps" class="topo-maps slider-1">
<div class="container">
<div class="row align-items-start">
<div class="col-lg-6">
<div class="text-container">
<h2>NZ Topo Maps</h2>
<p>Topographic map of New Zealand with no limitations:</p>
<ul class="list-unstyled li-space-lg">
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">View topographic tiles and satellite imagery</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">Viewed tiles cached automatically (for offline availability)
</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">Add unlimited map markers</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">Show your location and distance to markers</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">Import / export GPS Exchange Format (GPX) waypoints from
iCloud Drive</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">Search for places of interest (supports decimal coordinates)
</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">Common map interactions supported (pinch zoom, scroll,
rotate, drop marker, drag marker etc)</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">Battery conscious (for those that can’t recharge every day)
</div>
</li>
</ul>
<p>New Zealand (NZ) Topo Map is intended for outdoor enthusiasts who want to mark locations
visited or create markers to visit. It does not provide track information, show track
routes, record while walking, show speed etc. It’s designed to be lightweight,
intuitive, responsive, battery conscious and free. Perfect for casual day trips to
serious bush excursions.</p>
</div> <!-- end of text-container -->
</div> <!-- end of col -->
<div class="col-lg-5">
<!-- Card Slider -->
<div class="slider-container">
<div class="swiper-container swiper-container-topo-maps">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="card">
<img class="card-image" src="images/topo-1.png"
alt="NZ Topo Maps Screenshot - Main">
</div>
</div> <!-- end of swiper-slide -->
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="card">
<img class="card-image" src="images/topo-2.png"
alt="NZ Topo Maps Screenshot - Search">
</div>
</div> <!-- end of swiper-slide -->
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="card">
<img class="card-image" src="images/topo-3.png"
alt="Waihaha River topographic tiles">
</div>
</div> <!-- end of swiper-slide -->
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="card">
<img class="card-image" src="images/topo-4.png"
alt="Waihaha River satellite tiles">
</div>
</div> <!-- end of swiper-slide -->
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="card">
<img class="card-image" src="images/topo-5.png"
alt="NZ Topo Maps Screenshot - Markers List">
</div>
</div> <!-- end of swiper-slide -->
<!-- end of slide -->
</div> <!-- end of swiper-wrapper -->
<!-- Show pagination dots -->
<div class="swiper-pagination swiper-pagination-topo-maps"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-next-topo-maps"></div>
<div class="swiper-button-prev swiper-button-prev-topo-maps"></div>
<!-- end of add arrows -->
</div> <!-- end of swiper-container -->
</div> <!-- end of slider-container -->
<!-- end of card slider -->
</div> <!-- end of image-container -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of Topo Maps -->
<!-- Bus Buddy -->
<div id="auckland-bus-buddy" class="bus-buddy slider-1">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="text-container">
<h2>Auckland Bus Buddy</h2>
<p>Real time bus tracking for Auckland buses.<br>View buses running on your selected routes
and track your bus through its journey.<br><br>View real time train and ferry timetables
as well!<br><br>Features include: </p>
<ul class="list-unstyled li-space-lg">
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">Track multiple buses at the same time</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">Search by bus number and / or route</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">Automatically follow a selected bus</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">Selected bus path shown</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">Current bus bearing indicator</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">Toggle on/off traffic hot-spots</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">View upcoming train departures (and delays)</div>
</li>
<li class="media">
<i class="fas fa-chevron-right"></i>
<div class="media-body">View upcoming ferry departures</div>
</li>
</ul>
<p><u>Disclaimer:</u><br>Auckland Transport does not provide locations for every bus, there
may be other buses not listed or shown on the map.<br><br>Bus locations provided by
Auckland Transport are updated within a maximum of 30 seconds.<br><br>Bus Buddy is not
affiliated with Auckland Transport.</p>
</div> <!-- end of text-container -->
</div> <!-- end of col -->
<div class="col-lg-5">
<!-- Card Slider -->
<div class="slider-container">
<div class="swiper-container swiper-container-bus-buddy">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="card">
<img class="card-image" src="images/bus-buddy-1.png" alt="alternative">
</div>
</div> <!-- end of swiper-slide -->
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="card">
<img class="card-image" src="images/bus-buddy-2.png" alt="alternative">
</div>
</div> <!-- end of swiper-slide -->
<!-- end of slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="card">
<img class="card-image" src="images/bus-buddy-3.png" alt="alternative">
</div>
</div> <!-- end of swiper-slide -->
<!-- end of slide -->
</div> <!-- end of swiper-wrapper -->
<!-- Show pagination dots -->
<div class="swiper-pagination swiper-pagination-bus-buddy"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-next-bus-buddy"></div>
<div class="swiper-button-prev swiper-button-prev-bus-buddy"></div>
<!-- end of add arrows -->
</div> <!-- end of swiper-container -->
</div> <!-- end of slider-container -->
<!-- end of card slider -->
</div> <!-- end of image-container -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of Bus Buddy -->
</div> <!-- end of Projects -->
<!-- Copyright -->
<div class="copyright">
<div class="container">
<div class="row justify-content-end">
<div class="col-lg-6">
<p class="p-small statement">Copyright © Max Stubbersfield</p>
</div> <!-- end of col -->
</div> <!-- enf of row -->
</div> <!-- end of container -->
</div> <!-- end of copyright -->
<!-- end of copyright -->
<!-- Scripts -->
<script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
<script src="js/scripts.js"></script> <!-- Custom scripts -->
</body>
</html>