-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.jade
629 lines (623 loc) · 34.3 KB
/
index.jade
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
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
!!! 5
html
head
title Olin.js
link(href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css', rel='stylesheet', type='text/css')
link(href='http://fonts.googleapis.com/css?family=Quattrocento+Sans', rel='stylesheet', type='text/css')
script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js')
script(src='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js')
meta(property='og:title', content='Olin.js: A class on programming and web development.')
meta(property='og:url', content='http://olinjs.github.com/')
meta(property='og:image', content='http://olinjs.github.com/logo-solid.png')
meta(property='og:type', content='article')
meta(property='og:description', content='Meets Tuesdays/Fridays 3:20–5:00 in the Crescent Room. Build legit web apps from the ground up. Apps which will make your resume burn bright with ethereal flame.')
style
html, body { margin: 0; padding: 0; }
body {
color: #e6e6e6; font-family: 'Quattrocento Sans', sans-serif; background: #3573d9;
font-size: 16px;
}
.container {
width:100%;
}
#panel1 {
padding-top: 100px;
padding-bottom: 100px;
}
#panel2 {
padding-top: 100px;
padding-bottom: 100px;
background-color: #099999;
}
#panel3 {
padding-top: 100px;
padding-bottom: 100px;
background-color: #3914AF;
}
#panel4 {
padding-top: 100px;
padding-bottom: 100px;
background-color: #008110;
}
#panel5 {
padding-top: 100px;
padding-bottom: 100px;
background-color: rgb(84, 9, 153);
}
#panel6 {
padding-top: 100px;
padding-bottom: 100px;
background-color: #099999;
}
.personImg {
float: left;
padding-right:10px;
}
.carouselImg {
width:100%;
height:500px;
}
.from {
font-size:15px;
font-family: helvetica;
font-weight: bold;
color: rgb(173, 173, 173);
float: right;
}
.quote {
line-height: 27px;
font-weight: bold;
font-family: helvetica;
font-size: 25px;
color: rgb(56, 56, 56);
padding-bottom:10px;
}
#logo { float: left; margin-left: -280px; }
.ProfileImg {
border: 5px solid #59f; display: block;
-webkit-transition: border-color linear 0.25s;
-moz-transition: border-color linear 0.25s;
-o-transition: border-color linear 0.25s;
-ms-transition: border-color linear 0.25s;
}
img:hover { border-color: #fff; }
h2 { font-weight: normal; font-size: 30px; margin-bottom: 30px; }
h2, h3, p, li {
-webkit-transition: color linear 0.1s;
-moz-transition: color linear 0.1s;
-ms-transition: color linear 0.1s;
-o-transition: color linear 0.1s;
}
li { margin-bottom: 5px; }
h3 { margin: 30px 0 0; }
.crew img { height: 200px; margin: 0 auto 10px; }
.crew p { float: left; text-align: center; margin-right: 10px; }
.crew p span { display: block; text-align: left; margin: 10px 0 0; font-size: 14px; }
a { color: #ddf; }
#students, #students li { display: block; list-style: none; padding: 0; margin: 0; }
#students { overflow: auto; margin: 15px 0 15px; }
#students li { line-height: 74px; width: 300px; margin: 8px 0; float: left; }
#students img { width: 64px; display: block; vertical-align: center; float: left; margin-right: 15px; }
.fb-like{
vertical-align: top;
margin-right:5px;
}
#banner{
margin-bottom:10px
}
script(type='text/javascript')
$(document).ready(function(){
$('#mashupCarousel').carousel({
interval: 5000 // in milliseconds
});
$('#echoNestCarousel').carousel({
interval: 5000 // in milliseconds
});
$('#blueFinCarousel').carousel({
interval: 5000 // in milliseconds
});
$('#revvCarousel').carousel({
interval: 5000 // in milliseconds
});
// add active to first list items
$($('#echoNestCarousel .item:first')[0]).addClass("active");
$($('#echoNestCarousel li:first')[0]).addClass("active");
$($('#blueFinCarousel .item:first')[0]).addClass("active");
$($('#blueFinCarousel li:first')[0]).addClass("active");
$($('#revvCarousel .item:first')[0]).addClass("active");
$($('#revvCarousel li:first')[0]).addClass("active");
});
body
.container
#panel1
.row-fluid
.span6.offset4
a(href='https://github.com/olinjs', style="display:block;")
img#logo.ProfileImg(src='logo-trans.png', width='250', style='margin-top: 15px; width:250px; height:250px;')
#fb-root
script
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=236983706410158";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
h2(id="banner")
| A class on programming and web development at Olin College, Spring 2013. (
a(href='https://github.com/olinjs') Github Repo
| )
.fb-like(data-href='http://olinjs.github.com/', data-send='false', data-layout='button_count', data-width='450', data-show-faces='true')
a(href="http://twitter.com/share", class="twitter-share-button", data-url="http://olinjs.github.com", data-count="horizontal") Tweet
script(src="http://platform.twitter.com/widgets.js")
p(style='margin: 0 0;')
| Meets Tuesdays/Fridays 3:20—5:00 in the Crescent Room. (
a(href='class.ics') Download an iCal
| )
br
.row-fluid(style='padding-top: 30px;')
.span10.offset1
.row-fluid
.span4
.quote "Love it"
.from - Mark Chang, Director of Product at edX
.span7.offset1
.quote "I wish this course was around when I was at Olin"
.from - Every Alumni Ever
.row-fluid(style='padding-top: 30px;')
.span8.offset2
p
| Olin.js is web development taught the Olin way. It starts with a 3 week crash course in
a(href='http://nodejs.org/') Node
| and Javascript. Then, in the fourth week we bring everything together and create a full fledged, ground up, web application. With this app under our belt we get down to business.
br
p
| Over the next 6 weeks we do three, two week application sprints. For each sprint students work on teams of 2-3 to develop a prototype application for a specific problem space. Each sprint and is kicked off and then judged by a relevant Boston area tech company. In the past we've had some pretty cool sprints, including finance with Intuit, music with Echonest, and government with the Boston Mayor's office. This semester we're looking to raise the bar. We're starting off with Echonest, an old standby, followed by Bluefin in the social media space, and ending with Revv, a brand new startup focusing on personal and professional development.
br
p
| The class concludes with a final 4 week project. The point of this project is to make a fully fleshed out web app, and then launch it. This is the final task for a class whose main goal is to give students the skills they need to make commercially viable, robust web applications, either for themselves or external companies. With the launch of their final project every student will doing just that. And of course there will a launch party with pizza, prizes, pitches, and tears.
br
p
| This is the course that we've always wanted to take. We hope you'll join us for this amazing journey.
.row-fluid(style='padding-top: 40px; padding-bottom: 10px;')
.span4.offset2
h2(style='margin-bottom: 0px;') Our Sponsors
span(style='font-size: 12px;')
| Want to be a sponsor?
a(href='mailto:jialiya.huang@students.olin.edu') Contact us
.row-fluid
.span2.offset2
a(href='http://the.echonest.com/')
img(src='imgs/sponsors/echonest.gif')
.span2
a(href='http://www.heroku.com/')
img(src='imgs/sponsors/heroku.png')
.span2(style="height:70px")
div
a(href='https://bluefinlabs.com/')
img(src='imgs/sponsors/bluefin.png')
.span2(style="height:70px")
div
a(href='http://www.revv.me/')
img(src='imgs/sponsors/revv.jpg')
#panel6.row-fluid
.span8.offset2
h2 Weeks 9 & 10 - Revv Sprint
div
p
| We brought in
a(href="http://www.revv.me/") Revv
| and with their help we ran a 2 week hackathon in the space of self-improvement. The projects for this sprint focused on both product viability and technical functionality.
br
#revvCarousel.carousel.slide
ol.carousel-indicators
each project, p in sprint3
li(data-target='#revvCarousel', data-slide-to='#{p}')
.carousel-inner
each project, p in sprint3
.item
a(href='#{project.link}')
img.carouselImg(src='imgs/sprint3/#{project.img}')
div.carousel-caption
- project.members.map(function (member) { return students[member]}).forEach(function (member) {
div.personImg
a(href='#{member.link}')
img(src='#{member.img}', width="80px")
- })
div.info
h4
| #{p.full}
a(href='#{project.link}') #{project.name}
p #{project.description}
a.carousel-control.left(href='#revvCarousel', data-slide='prev') <
a.carousel-control.right(href='#revvCarousel', data-slide='next') >
#panel5.row-fluid
.span8.offset2
h2 Weeks 7 & 8 - Bluefin/Twitter Sprint
div
p
| We brought in
a(href='https://bluefinlabs.com/') BlueFin labs
| and with their help we ran a 2 week hackathon in the social media space. The projects for this sprint focused on product viability.
br
#blueFinCarousel.carousel.slide
ol.carousel-indicators
each project, p in sprint2
li(data-target='#blueFinCarousel', data-slide-to='#{p}')
.carousel-inner
each project, p in sprint2
.item
a(href='#{project.link}')
img.carouselImg(src='imgs/sprint2/#{project.img}')
div.carousel-caption
- project.members.map(function (member) { return students[member]}).forEach(function (member) {
div.personImg
a(href='#{member.link}')
img(src='#{member.img}', width="80px")
- })
div.info
h4
| #{p.full}
a(href='#{project.link}') #{project.name}
p #{project.description}
a.carousel-control.left(href='#blueFinCarousel', data-slide='prev') <
a.carousel-control.right(href='#blueFinCarousel', data-slide='next') >
#panel4.row-fluid
.span8.offset2
h2 Weeks 5 & 6 - EchoNest Sprint
div
p
| We brought in
a(href='http://the.echonest.com/') EchoNest
| and with their help we ran a 2 week hackathon in the music space. This sprint focused on technical proficiency. Besides Echonest, we used a variety of external APIs including rdio, Grooveshark, and youtube.
br
#echoNestCarousel.carousel.slide
ol.carousel-indicators
each project, p in sprint1
li(data-target='#echoNestCarousel', data-slide-to='#{p}')
.carousel-inner
each project, p in sprint1
.item
a(href='#{project.link}')
img.carouselImg(src='imgs/sprint1/#{project.img}')
div.carousel-caption
- project.members.map(function (member) { return students[member]}).forEach(function (member) {
div.personImg
a(href='#{member.link}')
img(src='#{member.img}', width="80", alt='placeholder')
- })
div.info
h4
| #{p.full}
a(href='#{project.link}') #{project.name}
p #{project.description}
a.carousel-control.left(href='#echoNestCarousel', data-slide='prev') <
a.carousel-control.right(href='#echoNestCarousel', data-slide='next') >
#panel2.row-fluid
.span8.offset2
h2 Week 4 - Mashup
div
p
| After we learned the basics in weeks 1 to 3, we showcased our mad skills by making mashups between 2 different services. Our apps were the pitted against each other, with the winner getting eternal glory and the rest...candy thrown at them.
#mashupCarousel.carousel.slide
ol.carousel-indicators
li.active(data-target='#mashupCarousel', data-slide-to='0')
li(data-target='#mashupCarousel', data-slide-to='1')
.carousel-inner
.active.item
a(href='http://thedecisionroom.herokuapp.com/')
img.carouselImg(src='imgs/mashups/seger.png')
.carousel-caption
.personImg
a(href='http://github.com/mseger')
img(src='https://secure.gravatar.com/avatar/828ccde1a7f0c8b5e461bf5678c10d2f?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Margret-Ann Seger,
a(href='http://thedecisionroom.herokuapp.com/') The Decision Room
p
| Mashup between tt.fm + yelp. The Decision Room helps you make plans among your Facebook friends
.item
a(href='http://afternoon-wave-2684.herokuapp.com/')
img.carouselImg(src='imgs/mashups/crosby.png')
.carousel-caption
.personImg
a(href='http://github.com/reyner')
img(src='https://secure.gravatar.com/avatar/7ae4ee10ed19796b1bf0585ecc5af143?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Reyner Crosby,
a(href='http://afternoon-wave-2684.herokuapp.com/') Goats
p Mashup between tt.fm + youtube. Youtube video sharing with your friends.
.item
a(href='http://olinjs-mashup-aman.herokuapp.com/')
img.carouselImg(src='imgs/mashups/kapur.png')
.carousel-caption
.personImg
a(href='http://github.com/fireblade99')
img(src='https://secure.gravatar.com/avatar/83863cc427f37fe98268c4f64dc7d809?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Aman Kapur,
a(href='http://olinjs-mashup-aman.herokuapp.com/') Status Editor
p
| Mashup between typewithme + facebook. Letting multiple people edit your facebook status at once. Bringing trolling to a new level.
.item
a(href='http://salty-ridge-5175.herokuapp.com/')
img.carouselImg(src='imgs/mashups/shane.png')
.carousel-caption
.personImg
a(href='http://github.com/skinc')
img(width='80', src='https://secure.gravatar.com/avatar/ff81abef60121b5aee646f7721eac874?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Shane Skikne,
a(href='http://salty-ridge-5175.herokuapp.com/') Do Wrk
p
| Mashup between Google Doc + pandora. A notebook that withholds rewards in the form of music/gifs/etc until the writing is done.
.item
a(href='http://visual-lastfm.herokuapp.com/')
img.carouselImg(src='imgs/mashups/may.png')
.carousel-caption
.personImg
a(href='http://github.com/madisonmay13')
img(src='https://secure.gravatar.com/avatar/3e1a7d9ccfa13aed6bc6cb7ec6892518?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Madison May,
a(href='http://visual-lastfm.herokuapp.com/') Visual Last.fm
p
| Mashup between OneReceipt + Grooveshark. Visual Last.fm lets you see what are your top songs.
.item
a(href='http://listpop.herokuapp.com/')
img.carouselImg(src='imgs/mashups/redfern.png')
.carousel-caption
.personImg
a(href='http://github.com/redfern314')
img(src='https://secure.gravatar.com/avatar/ee04ed0af6cc6e2cc4fe8d67ce0f8a66?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Derek Redfern,
a(href='http://listpop.herokuapp.com/') ListPop
p
| Mashup between typewithme +musicmap.herokuapp.com. ListPop lets you make playlists of the songs you love with your friends - then get recommendations for more songs to add to each list based on the last.fm API!
.item
a(href='http://boiling-beyond-2611.herokuapp.com/')
img.carouselImg(src='imgs/mashups/kearney.png')
.carousel-caption
.personImg
a(href='http://github.com/dankearney')
img(width='80', src='https://secure.gravatar.com/avatar/cfdcb5890f87dc254bb99863ac7cdcdb?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Daniel Kearney,
a(href='http://boiling-beyond-2611.herokuapp.com/') Shekel Swap
p Mashup between Bitcoin + detexify. Currency exchange.
.item
a(href='http://fetchflix.herokuapp.com/')
img.carouselImg(src='imgs/mashups/chae.png')
.carousel-caption
.personImg
a(href='http://github.com/asjchae')
img(width='80', src='https://secure.gravatar.com/avatar/49a31551580bd684d58969bf04eaf1f1?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Ari Chae,
a(href='http://fetchflix.herokuapp.com/') Fetch Flix
p Mashup between fetchnotes + Netflix. Easier movie recommendations.
.item
a(href='http://gentle-waters-8936.herokuapp.com/')
img.carouselImg(src='imgs/mashups/mason.jpg')
.carousel-caption
.personImg
a(href='http://github.com/mdelrosa')
img(width='80', src='https://secure.gravatar.com/avatar/f97fc8d0b2bb88e646e6d868f44c721e?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Mason del Rosario,
a(href='http://gentle-waters-8936.herokuapp.com/') Square Tube
p Mashup between Square + YouTube. Add some video to your location.
.item
a(href='http://julianablog.herokuapp.com/')
img.carouselImg(src='imgs/mashups/nazare.png')
.carousel-caption
.personImg
a(href='http://github.com/JNazare')
img(src='https://secure.gravatar.com/avatar/d934e24c31a10a19dc238d6a75106a32?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Juliana Nazare,
a(href='http://julianablog.herokuapp.com/') Bloggit
p Mashup between The Useless Website + Netflix. Blogging platform.
.item
a(href='http://sheltered-crag-4327.herokuapp.com/cats/new')
img.carouselImg(src='imgs/mashups/dlee.png')
.carousel-caption
.personImg
a(href='http://github.com/doyunglee')
img(src='https://secure.gravatar.com/avatar/d4ad7f4022b9b86c2da92a718df3aeba?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Doyung Lee,
a(href='http://sheltered-crag-4327.herokuapp.com/cats/new') Cats, Germs, and Feels
p
| Mashup between webmd + attackofthecute.com. Ecards for when your friends are sick.
.item
a(href='http://guarded-retreat-7885.herokuapp.com/')
img.carouselImg(src='imgs/mashups/sarver.png')
.carousel-caption
.personImg
a(href='http://github.com/Velociraptor')
img(src='https://secure.gravatar.com/avatar/33f738a6212767e6ad2f4a6c121278f3?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Hannah Sarver,
a(href='http://guarded-retreat-7885.herokuapp.com/') Teux View
p Mashup between teuxdeux.com + VINE. Task list using gifs.
.item
a(href='http://hidden-coast-9360.herokuapp.com/')
img.carouselImg(src='imgs/mashups/langowitz.png')
.carousel-caption
.personImg
a(href='http://github.com/JLangowitz')
img(width='80', src='https://secure.gravatar.com/avatar/3b137c9085274ab651cad219797bd9f4?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Joshua Langowitz,
a(href='http://hidden-coast-9360.herokuapp.com/') DropTube
p Mashup between Dropbox + YouTube. Sharing videos.
.item
a(href='http://pnpnotes.herokuapp.com/')
img.carouselImg(src='imgs/mashups/chen.png')
.carousel-caption
.personImg
a(href='http://github.com/aeri')
img(src='https://secure.gravatar.com/avatar/a040779988495fd525bafc6737722f5c?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Thomas Chen,
a(href='http://pnpnotes.herokuapp.com/') PnP Notes
p Mashup between Chegg.com + Mobee. Text editor for writing stories.
.item
a(href='http://gentle-reaches-3926.herokuapp.com/')
img.carouselImg(src='imgs/mashups/alee.png')
.carousel-caption
.personImg
a(href='http://github.com/alee123')
img(width='80', src='https://secure.gravatar.com/avatar/b5cf199dd94652ee7b9da379f9612ce2?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Amanda Lee,
a(href='http://gentle-reaches-3926.herokuapp.com/') Clever Notes
p Mashup between Fetchnotes + Venmo. Notes for payment.
.item
a(href='http://morning-crag-3399.herokuapp.com/')
img.carouselImg(src='imgs/mashups/austin.png')
.carousel-caption
.personImg
a(href='http://github.com/KaminariNoKage')
img(src='https://secure.gravatar.com/avatar/5e2df34255108dbd22998c5729170d1f?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Kai Austin,
a(href='http://morning-crag-3399.herokuapp.com/') ViTube
p Mashup between Vine + youtube.com. Make some gifs, share some gifs.
.item
a(href='http://infinite-sierra-8493.herokuapp.com/')
img.carouselImg(src='imgs/mashups/bethune.png')
.carousel-caption
.personImg
a(href='https://github.com/jbthn')
img(src='https://secure.gravatar.com/avatar/1c6003483d8880a2763c19800bca3286?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png')
.info
h4
| Jessica Bethune,
a(href='http://infinite-sierra-8493.herokuapp.com/') Newsblr
p
| Mashup between Vine + Tumblr. Browse RSS feeds for interesting articles and share them on your profile.
a.carousel-control.left(href='#mashupCarousel', data-slide='prev') <
a.carousel-control.right(href='#mashupCarousel', data-slide='next') >
#panel3
.row-fluid
.span8.offset2
h2 Weeks 1-3
p
| We started with a 3 week crash course in
a(href='http://nodejs.org/') Node
| , Javascript, and MongoDB, using the Express framework. Along the way we also figured out templating with Jade and interacted with external APIs like Facebook's. We deployed everything we made to Heroku.
p
| For the client side we learned how to add spice to our sites with jQuery and plugins, then we dove into making the frontend look legit with Bootstrap.
p
| Here are just a few of the things we made while learning our core skills:
br
.row-fluid(style='text-align: center;')
.span4
img.ProfileImg(style='height: 200px; margin-left: auto; margin-right: auto;', src='imgs/week3/homework4.png')
h4 Homework 4
| Making a Twitter Clone
.span4
img.ProfileImg(style='height: 200px; margin-left: auto; margin-right: auto;', src='imgs/week3/homework5.png')
h4 Homework 5
| Making a Facebook/Myspace Mashup
.span4
img.ProfileImg(style='height: 200px; margin-left: auto; margin-right: auto;', src='imgs/week3/homework6.png')
h4 Homework 6
| Making a Facebook caption roulette
.row-fluid(style='padding-top: 100px;')
.span8.offset2
h2 Enrolled Students
ul#students
- Object.keys(students).forEach(function (key) {
li
a(href='#{students[key].link}')
b #{students[key].full}
img.ProfileImg(src='#{students[key].img}')
- })
.row-fluid(style='padding-top: 80px;')
.span8.offset2
h2 The Teaching Crew
.row-fluid.crew
.span3
p
img.ProfileImg(src='https://sphotos-a.xx.fbcdn.net/hphotos-prn1/p206x206/547858_10151166188985676_44503551_n.jpg')
b
a(href='mailto:david.gaynor@students.olin.edu') David Gaynor
br
a(href='http://github.com/runnedrun') github/runnedrun
br
span
| David Gaynor has never been on Reddit. He didn't know what Xkcd was until college. Until his senior year of highschool he thought that Youtube was a video blogging service. Or maybe that was senior year of college. Anyway, even though he's a bit old fashioned, David still gets his code on in some pretty cool ways. He's written test suites for tiny robots in C, rewrote the python facebook API, and has been working on the same side project for 6 months. Wow, that dedication. Or stupidity. One of the two. He's worked for Pivotal Labs and Twitter, and is going back to San Fran next fall, as a full time Tweeter. If I had to describe David in one word it would be: "strikingly similar to Tim Ryan in appearance, but only when he has long hair".
.span3
p
img.ProfileImg(src='http://static.tumblr.com/edy5jpt/y4fmay3to/vanity-conference')
b
a(href='mailto:timothy.ryan@students.olin.edu') Tim Ryan
br
a(href='http://github.com/tcr') github/tcr
br
span
| Tim was born, raised, and will one day die in the loving embrace of New England. He has been using the Internet since he was just four years old, sharpened his teeth on AOL webcomics and Invader Zim message boards, and made horrible abominations on Geocities using everyone's favorite language, JavaScript. Ten years later, this became the cool thing to do and Tim rocketed to Internet stardom. He's authored compilers, shims, and trendy Lisps, developed for Intuit, PMed Microsoft, and rocked the HTML5 boat at Game Closure. He's interested in making computing more accessible to everyone, and has a penchant for APIs and platforms. Tim loves acting, vintage video games, and typography, and one day you'll find him mad, fleeing to the coast of Ireland, writing fishing novels.
.span3
p
img.ProfileImg(src='https://sphotos-a.xx.fbcdn.net/hphotos-ash4/403695_10150584876607784_1021260198_n.jpg')
b
a(href='mailto:jialiya.huang@students.olin.edu') Jia Huang
br
a(href='http://github.com/jiahuang') github/jiahuang
br
span
| Jia is an excellent student, which is rather impressive considering she doesn't know a word of English. She was raised in China until her parents stuffed her into a small crate and shipped her to America. Unfortunately, the crate was lost from 1998-2003 before arriving, which severely stunted the poor girl's growth. Upon being freed, Jia was baffled and scared of the outdoor environment and has since then been stuck behind a computer. Jia has worked for multiple startups, as well as Amazon, Microsoft, and Twilio, and has recently developed a strange interest in hardware. In short, Jia is pretty small, but she could probably still beat you up.
.span3
p
img.ProfileImg(src='https://pbs.twimg.com/profile_images/378800000191611207/c3f19b78f164e741ffcf1c2a3cf7c8e0.jpeg')
b
a(href='mailto:wcdolphin@gmail.com') Cory Dolphin
br
a(href='http://github.com/wcdolphin') github/wcdolphin
br
span
| Cory is that guy. You know, that guy who makes the design decisions. The guy who makes things look pretty. The good news is that he actually has the coding chops to back up his "design thinking". He's been known to make some crazy stuff in Python (and Flask), has (supposedly) made a bartending robot, and spent the last 2 summers single handedly making Microsoft a cool company. In the end all you need to know about Cory is that he speaks softly, carries a big stick, and sometimes uses that stick to awkwardly type on his computer. And he still gets a lot done.
.row-fluid(style='padding-top: 20px; padding-bottom: 100px;')
.span8.offset2
h2 The NINJAs
.row-fluid.crew
.span3.offset3
p
img.ProfileImg(src='http://www.gravatar.com/avatar/5713f203f45038e6a26a01330ccc11da?s=400')
b
a(href='mailto:Aaron.Greenberg@students.olin.edu') Aaron Greenberg
br
a(href='https://github.com/aaronjgreenberg') github/aaronjgreenberg
br
span
| Aaron Greenberg. Champion. List-Maker. Name-Taker. Webmaster. Leaf-Raker. He is a California boy to the core, with his head stuck in the sandy beaches back west. A charmer by nature, Aaron woos women with his deep, rippling eyes and manages to mesmerize men with his crude wit. Be warned. The calm, soothing voice is just a front; Aaron is really a beast of the world, and takes names.
.span3
p
img.ProfileImg(src='http://sphotos-a.xx.fbcdn.net/hphotos-prn1/45534_3634723286771_309854048_n.jpg')
b
a(href='mailto:paul.booth@students.olin.edu') Paul Booth
br
a(href='https://github.com/paulbooth') github/paulbooth
br
span
| Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth Paul Booth