-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog-luge.html
332 lines (289 loc) · 12.1 KB
/
blog-luge.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Debbie Macrohon</title>
<meta name="description" content="">
<meta name="author" content="Debbie Macrohon">
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation
==========================================-->
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">DEBBIE MACROHON
<strong></strong>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="index.html" class="page-scroll">Home</a>
</li>
<li>
<a href="index.html#works-section" class="page-scroll">Portfolio</a>
</li>
<li>
<a href="index.html#about-section" class="page-scroll">About</a>
</li>
<li>
<a href="puns.html" class="page-scroll">Puns</a>
</li>
<!-- <li class="dropdown" style="visible:false"><a href="index.html" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="project-0.html">Project 0</a></li>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
</ul>
</li> -->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="col-xs-12 col-sm-12 col-md-12" style="background-color:#1e2330;">
<div class="section-title text-center center" style="padding-top:100px">
<div class="section-item">
<h2>
<span style="color:white">
<font size="7">Skyline Luge</font>
</span>
</h2>
</div>
<div class="section-item">
<h2>
<span style="color:#a9f8dd; font-weight:bold">
<font size="6">in Calgary (a DareDebbie blog)</font>
</span>
</h2>
</div>
<div class="center">
<img src="img/project1/girlscoutbadge.jpeg" alt="Picture" style="width:75%;min-width:300px" />
</div>
<br/>
<div class="section-item">
<font size="2">
<font color="#d5d5d5" style="">
I had so much fun at the SkyLine Luge in Calgary that I was inspired to make a blog for it. </font>
</font>
</div>
</div>
</div>
<div style="padding-top:30px"> </div>
<div class="container">
<!--article-->
<div>
<div class="section-title center class section-item">
<h2>
<font color="#508d24">SkyLine Luge</font>
</h2>
</div>
<div class="col-sm-12 col-md-2 left">
<h2>
<strong>
<font size="3">Description</font>
</strong>
</h2>
</div>
<div class="col-sm-12 col-md-10" style="padding-bottom:30px">
<p>When you think of summer activities in Calgary, the first things that come to my mind are hiking (in Banff), going to
parks, museums, etc. Sure there are other outdoor activities like canoeing, swimming, or soccer, but sometimes you just
want an activity that doesn't require that much effort or skill. In terms of fun, I would rate this a 10/10. Just the
sheer thrill of zooming past other carts</p>
</div>
</div>
<div>
<div>
<h3>Location</h3>
</div>
<div>
<p> The Skyline Luge is located 20 minutes away from Calgary's city center.
</p>
</div>
</div>
<p>
I chose the sash to refine because it seemed interesting and did not involve utility, and I also wanted to have some meaning
behind the accessory. I didn't want just a cool accessory that does things, I wanted to have a purpose with it as well.
Since I consider myself to be a very task/goal oriented person, I chose the sash idea because it fit well with my ideals.
</p>
</div>
<div>
<div class="section-title center">
<h3>Price</h3>
</div>
<p>In these sketches I tried to define the context of the sash so it will be directed towards more specific users. Will it
be for gamers? Or could it be used in a beauty pageant? One problem I ran into is the fact that, unless forced into it,
nobody would realistically wear a sash in their normal day to day life. It was here in the refinement sketches that I
decided to design a sash for girl scouts, since it is a part of their uniform anyways and it would be easier to use it.
I was also a Girl Scout once back in the Philippines (a long time ago), and I thought it would be cool give the sash a
makeover, and redefine what it does and what it looks like :)
</p>
<div class="row">
<div class="portfolio-items">
<div id="refsketches">
<sketch :props="s" v-for="s in refsketches"></sketch>
</div>
</div>
</div>
</div>
<div id="design-section">
<div class="center">
<h3>What to Expect There</h3>
</div>
<p> Wear comfortable clothes and shoes. If you want to go fast on the luge I suggest less baggy clothes
<br/>
<br/> Sasha will also let you know what she thinks about your badges. If you hold up a badge to her, she will encourage you
to go further with your goals if the goal is in progress. If you have finished a goal, she will say positive things like
"good job!", or "you're fantastic". If the badge is old, occasionally she will say comment on how old it is and ask what
you're up to now. Additionally, when you hold up the badge to the scanner you can see the progress bar, and the
Team Lead's special message to you upon completion of the badge.
</p>
<div class="row">
<div class="portfolio-items">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="portfolio-item">
<div class="hover-bg" style="height:230px">
<img style="width:100%;" src="img/project1/hiker.jpg" alt="Picture" />
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-6 col-lg-6">
<div class="portfolio-item">
<div class="hover-bg" style="height:230px">
<img style="width:100%;" src="img/project1/50_progress.png" alt="Picture" />
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 ">
<div class="portfolio-item">
<div class="hover-bg" style="height:230px">
<p>Hiker badge is at 50%. No issue date or Team Lead Message has been set yet, because badge is still in progress!</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-lg-3">
<div class="portfolio-item">
<div class="hover-bg" style="height:230px">
<img style="width:100%;" src="img/project1/bugs.jpg" alt="Picture" />
</div>
</div>
</div>
<div class="col-xs-6 col-md-6 col-lg-6">
<div class="portfolio-item">
<div class="hover-bg" style="height:230px">
<img style="width:100%;" src="img/project1/100progress.png" alt="Picture" />
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-lg-3">
<div class="portfolio-item">
<div class="hover-bg" style="height:230px">
<p>Bugs badge is at 100% completion. Issue date is 2013, which is 4 years ago from 2017. Occasionally Sasha will ask
notice that the badge is old and ask what you've been up to lately. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="section-title center">
<h3>Video</h3>
</div>
<div class="video">
<iframe src="https://www.youtube.com/embed/STdz4UsZpvQ?wmode=opaque" frameborder="0" gesture="media" allow="encrypted-media"
allowfullscreen></iframe>
</div>
</div>
<div id="reflection-section">
<h3>Final Thoughts</h3>
<p>Upon receiving feedback for this project, I realized I had to be more specific on what type of Girl Scout will use the
sash (experienced vs inexperienced) , and that the interaction space needs to be richer. Maybe for future iterations I
could have the sash be used for younger Girl Scouts who are inexperienced, and make the sash help the scout in different
situations. This project was challenging for me, not only because it was directed towards hardware which I have no experience
of, but because it was not directed towards a specific client, which made it hard to target a specific user. I learned
to think of different users first and try to design for them, rather than thinking of different generic problems and try
to solve them using wearables. I also in this project that I learned the value of sketching; continuously iterating through
your ideas until you have a solid plan of what you want to do.</p>
</div>
<div id="source-section">
<div class="center">
<h3>Acknowledgements</h3>
<p>Source Code and Physical Badges on the Sash:</p>
<ol class="custom-list-o">
<li>
<a href="https://www.downhillkarting.ca/" target="_blank">Skyline Luge Website</a>
</li>
</ol>
</div>
</div>
<!--/article-->
</div>
<div id="footer">
<div class="container">
<div class="fnav">
<p>Copyright © Debbie Macrohon. Designed by
<a href="http://www.templatewire.com" rel="nofollow">TemplateWire</a>
</p>
<div>Icons made by
<a href="http://www.freepik.com" title="Freepik">Freepik</a> from
<a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by
<a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0"
target="_blank">CC 3.0 BY</a>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.1.11.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/SmoothScroll.js"></script>
<script type="text/javascript" src="js/jquery.counterup.js"></script>
<script type="text/javascript" src="js/waypoints.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/jqBootstrapValidation.js"></script>
<script type="text/javascript" src="js/contact_me.js"></script>
<!-- Javascripts
================================================== -->
<script type="text/javascript" src="js/main.js"></script>
<script src="js/vue.js"></script>
</body>
</html>