-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
588 lines (561 loc) · 40.7 KB
/
portfolio.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/Favicons/purple-favicon.ico" type="image/x-icon">
<title>Michael Knoedel</title>
<!-- Lato Font -->
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<!-- Stylesheet -->
<link href="css/gallery-materialize.css" rel="stylesheet">
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<!-- Navbar and Header -->
<nav class="nav-extended">
<div class="nav-background">
<div class="pattern active" style="background-image: url('./assets/argyle_pattern_cp.png');"></div>
</div>
<div class="nav-wrapper container">
<a href="#" class="brand-logo"><i class="material-icons">view_quilt</i>Portfolio</a>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li class="active"><a href="portfolio.html">Portfolio</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="index.html">About Me</a></li>
<li><a class='dropdown-button' href='#' data-activates='feature-dropdown' data-belowOrigin="true" data-constrainWidth="false">Contact Me<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a href="https://github.com/mknoedel" target="_blank"><img src="./assets/Logos/GitHub-Mark-Light-32px.png" height="18" width="18"></a></li>
<li><a href="https://www.linkedin.com/in/mknoedel" target="_blank"><img src="./assets/Logos/In-White-54px-R.png" height="18" width="18"></a></li>
</ul>
<!-- Dropdown Structure -->
<ul id='feature-dropdown' class='dropdown-content'>
<li><a onclick="window.location.href='mailto:[email protected]'"><i class="material-icons">email</i>[email protected]</a></li>
<li><a href="tel:6508227592"><i class="material-icons">phone</i>(650) 822-7592</a></li>
</ul>
<div class="nav-header center">
<h1>Portfolio</h1>
<div class="tagline">Michael Knoedel</div>
</div>
</div>
<!-- Fixed Masonry Filters -->
<div class="categories-wrapper purple lighten-1">
<div class="categories-container">
<ul class="categories container">
<li class="active"><a href="#all">All Projects</a></li>
<li><a href="#coding" class="green-text text-lighten-4">Coding</a></li>
<li><a href="#engineering" class="amber-text text-lighten-4">Product Design</a></li>
<li><a href="#design" class="blue-text text-lighten-4">Architecture Design</a></li>
</ul>
</div>
</div>
</nav>
<!-- Sidenav -->
<ul class="side-nav" id="nav-mobile">
<li class="active"><a href="portfolio.html"><i class="material-icons">view_quilt</i>Portfolio</a></li>
<li><a href="resume.html"><i class="material-icons">school</i>Resume</a></li>
<li><a href="index.html"><i class="material-icons">edit</i>About Me</a></li>
<li><a onclick="window.location.href='mailto:[email protected]'"><i class="material-icons">email</i>[email protected]</a></li>
<li><a href="tel:6508227592"><i class="material-icons">phone</i>(650) 822-7592</a></li>
<li><a href="https://github.com/mknoedel" target="_blank"> <img src="./assets/Logos/GitHub-Mark-32px.png" height="18" width="18"> GitHub</a></li>
<li><a href="https://www.linkedin.com/in/mknoedel" target="_blank"> <img src="./assets/Logos/In-Black-54px-R.png" height="18" width="18"> LinkedIn</a></li>
</ul>
<!-- Gallery -->
<div id="portfolio" class="section gray">
<div class="container">
<div class="gallery row">
<!-- Resume Site -->
<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter coding" style="border-color: #c8e6c9">
<div class="gallery-curve-wrapper">
<a class="gallery-cover gray">
<img src="./assets/12 Resume/Portfolio.png" alt="placeholder">
</a>
<div class="gallery-header">
<span>Resume Website</span>
</div>
<div class="gallery-body">
<div class="title-wrapper">
<h3>Resume Website</h3>
<span class="price">You're Lookin' at it!</span>
</div>
<p class="description">
Built and maintained by Michael Knoedel. Want to know how something works?
Check it out on <a href="https://github.com/mknoedel/resume" target="_blank">Github</a>!
</p>
<p class="description">
Important features include:
<ul>
<li class="description"> • Reactive card layout powered by <a href="http://masonry.desandro.com/" target="_blank">Masonry</a>, and <a href="http://imagesloaded.desandro.com/" target="_blank">imagesLoaded</a> </li>
<li class="description"> • Design language and components powered by <a href="http://materializecss.com/" target="_blank">Materialize</a></li>
<li class="description"> • Sass configuration and task runner powered by <a href="https://gruntjs.com/" target="_blank">Grunt.js</a></li>
<li class="description"> • Reactive css using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" target="_blank">Flexbox</a></li>
</ul>
</p>
<div style="margin-bottom: 90px;"></div>
</div>
<div class="gallery-action">
<a class="btn-floating btn-large waves-effect waves-light" onclick="Materialize.toast('Thanks!', 1000)"><i class="material-icons">thumb_up</i></a>
</div>
</div>
</div>
<!-- SOFI -->
<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter engineering" style="border-color: #ffecb3">
<div class="gallery-curve-wrapper">
<a class="gallery-cover gray">
<img class="responsive-img" src="./assets/1 SOFI/SF002 sCMOS Fluoroscope Assembly Explosion-min.jpeg" alt="placeholder">
</a>
<div class="gallery-header">
<span>SOFI</span>
</div>
<div class="gallery-body">
<div class="title-wrapper">
<h3>SOFI</h3>
<span class="price">sCMOS - Optical - Fluorecence - Imager</span>
</div>
<p class="description">
I designed, machined, constructed and developed code for a new microscope along with my partner
<a href="https://www.linkedin.com/in/rfblumenstein/" target="_blank">Ryan Blumenstein</a>
while working at the Washington University Medical School as a research assistant for
<a href="https://biochem.wustl.edu/elelab/" target="_blank">the Elson Lab</a>. The goal of
the project was to understand how scar tissue affected the propagation of heartbeats.
</p>
<p class="description">
My experiment called for imaging two inches of heart tissue at once, which was a far larger
viewing area than any microscope in the lab could provide. This meant that I needed to make
one! I created CAD drawings using AutoCad Inventor and machined custom parts using Wash U’s
machine shop. I also purchased the precision tools necessary for the experiment. After I
constructed the microscope, later named SOFI, I developed MATLAB code to isolate fluorescence
values to create videos that showed the path heartbeats took.
</p>
<p class="description">
Ultimately, the microscope cost less than 1% of the budgeted cost and successfully captured
heartbeats with high sensitivity while maintaining a sterile environment. SOFI supported
research efforts for years after my project was complete.
</p>
<div class="carousel-wrapper">
<div class="carousel">
<a class="carousel-item" href="./assets/1 SOFI/SF001 sCMOS Optical Fluorescence Imager-min.jpeg" target="_blank"><img src="./assets/1 SOFI/SF001 sCMOS Optical Fluorescence Imager-min.jpeg" href="#modal1"></a>
<a class="carousel-item" href="./assets/1 SOFI/SF002 sCMOS Fluoroscope Assembly Explosion-min.jpeg" target="_blank"><img src="./assets/1 SOFI/SF002 sCMOS Fluoroscope Assembly Explosion-min.jpeg"></a>
<a class="carousel-item" href="./assets/1 SOFI/SF303 Stage Clip-min.jpg" target="_blank"><img src="./assets/1 SOFI/SF303 Stage Clip-min.jpg"></a>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<div class="right transparent blue-grey-text text-lighten-1" style="margin-bottom: 90px;">swipe to scroll and click to expand</div>
</div>
</div>
<div class="gallery-action">
<a class="btn-floating btn-large waves-effect waves-light" onclick="Materialize.toast('Thanks!', 1000)"><i class="material-icons">thumb_up</i></a>
</div>
</div>
</div>
<!-- Thurtene -->
<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter design" style="border-color: #bbdefb">
<div class="gallery-curve-wrapper">
<a class="gallery-cover gray">
<img src="./assets/4 Thurtene/Thurtene2013/Thurtene-Boat-min.jpg" alt="placeholder">
</a>
<div class="gallery-header">
<span>Thurtene</span>
</div>
<div class="gallery-body">
<div class="title-wrapper">
<h3>Thurtene</h3>
<span class="price">Build Overall and Lead Designer</span>
</div>
<p class="description">
I created playhouses for the yearly <a href="http://www.thurtene.org/" target="_blank">Thurtene Carnival</a>
with a large group of friends and colleagues. In 2014, I took on the role of Overall for our team which had
me directly managing over 50 people in the design and construction of a 12 foot tall, 1000+ square foot building.
</p>
<p class="description">
Extra esponsibilities I took on as Overall include:
<ul>
<li class="description"> • Facilitating supply deliveries</li>
<li class="description"> • Setting up and running equipment training</li>
<li class="description"> • Ensuring safety training of the team on the lot</li>
<li class="description"> • Working with a certified architect for structural integrity assurance</li>
<li class="description"> • Setting up supply drops</li>
<li class="description"> • Maintaining relations with the other groups involved in the carnival</li>
<li class="description"> • Ensuring deconstruction takes place within the timeframe</li>
</ul>
</p>
<p class="description">
Themes for the years I was involved:
<ul>
<li class="description"> • 2013 - Riverboat</li>
<li class="description"> • 2014 - Space Lab</li>
<li class="description"> • 2015 - World O' West</li>
</ul>
</p>
<div class="carousel-wrapper">
<div class="carousel">
<a class="carousel-item" href="./assets/4 Thurtene/Thurtene2013/Thurtene-Boat-Inside-min.jpg" target="_blank"><img src="./assets/4 Thurtene/Thurtene2013/Thurtene-Boat-Inside-min.jpg"></a>
<a class="carousel-item" href="./assets/4 Thurtene/Thurtene2014/Thurtene2-min.jpg" target="_blank"><img src="./assets/4 Thurtene/Thurtene2014/Thurtene2-min.jpg"></a>
<a class="carousel-item" href="./assets/4 Thurtene/Thurtene2014/Thurtene3-min.jpg" target="_blank"><img src="./assets/4 Thurtene/Thurtene2014/Thurtene3-min.jpg"></a>
<a class="carousel-item" href="./assets/4 Thurtene/Thurtene2015/Thurtene1-min.jpg" target="_blank"><img src="./assets/4 Thurtene/Thurtene2015/Thurtene1-min.jpg"></a>
<a class="carousel-item" href="./assets/4 Thurtene/Thurtene2015/Thurtene2-min.jpg" target="_blank"><img src="./assets/4 Thurtene/Thurtene2015/Thurtene2-min.jpg"></a>
<a class="carousel-item" href="./assets/4 Thurtene/Thurtene2015/Thurtene3-min.jpg" target="_blank"><img src="./assets/4 Thurtene/Thurtene2015/Thurtene3-min.jpg"></a>
</div>
<div class="right transparent blue-grey-text text-lighten-1" style="margin-bottom: 90px;">swipe to scroll and click to expand</div>
</div>
</div>
<div class="gallery-action">
<a class="btn-floating btn-large waves-effect waves-light" onclick="Materialize.toast('Thanks!', 1000)"><i class="material-icons">thumb_up</i></a>
</div>
</div>
</div>
<!-- EWB -->
<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter engineering" style="border-color: #ffecb3">
<div class="gallery-curve-wrapper">
<a class="gallery-cover gray">
<img class="responsive-img" src="./assets/10 EWB/Water Distribution Map for MSB/Water Distribution Map for MSB-1-min.jpg" alt="placeholder">
</a>
<div class="gallery-header">
<span>Engineers Without Borders</span>
</div>
<div class="gallery-body">
<div class="title-wrapper">
<h3>Engineers w/o Borders</h3>
<span class="price">Mekelle School for the Blind</span>
</div>
<p class="description">
For two years, I worked with the Washington University's Engineers Without Borders chapter,
who had recently begun a project with the Mekelle School for the Blind in Ethiopia that aimed at
building a sustainable infrastructure to improve conditions for their students. I joined for their
January 2013, and January 2014 projects which addressed problems with the school's electrical and
water storage/distribution systems.
</p>
<p class="description">
As a member and eventually as treasurer, the vast majority of my responsibilities focused on fundraising, establishing team objectives, and planning project details,
including completing an engineering analysis and work schedule. The actual implementations accounted for very little of my total time on the projects.
</p>
<p class="description">
Thanks to our interventions, erosion and inconvenience due to the flooding of their rainy season has been severely decreased, and the safety of their campus has been greatly improved.
</p>
<div class="carousel-wrapper">
<div class="carousel">
<a class="carousel-item" href="./assets/10 EWB/Proposed Well Head Piping/Proposed Well Head Piping-1-min.jpg" target="_blank"><img src="./assets/10 EWB/Proposed Well Head Piping/Proposed Well Head Piping-1-min.jpg"></a>
<a class="carousel-item" href="./assets/10 EWB/Photos/1 (3)-min.jpg" target="_blank"><img src="./assets/10 EWB/Photos/1 (3)-min.jpg"></a>
<a class="carousel-item" href="./assets/10 EWB/Photos/1-min.jpg" target="_blank"><img src="./assets/10 EWB/Photos/1-min.jpg"></a>
<a class="carousel-item" href="./assets/10 EWB/Photos/P1040270-min.JPG" target="_blank"><img src="./assets/10 EWB/Photos/P1040270-min.JPG"></a>
<a class="carousel-item" href="./assets/10 EWB/EWB -Ethiopia Project Proposal/EWB -Ethiopia Project Proposal-1-min.jpg" target="_blank"><img src="./assets/10 EWB/EWB -Ethiopia Project Proposal/EWB -Ethiopia Project Proposal-1-min.jpg"></a>
<a class="carousel-item" href="./assets/10 EWB/EWB -Ethiopia Project Proposal/EWB -Ethiopia Project Proposal-2-min.jpg" target="_blank"><img src="./assets/10 EWB/EWB -Ethiopia Project Proposal/EWB -Ethiopia Project Proposal-2-min.jpg"></a>
<a class="carousel-item" href="./assets/10 EWB/EWB -Ethiopia Project Proposal/EWB -Ethiopia Project Proposal-3-min.jpg" target="_blank"><img src="./assets/10 EWB/EWB -Ethiopia Project Proposal/EWB -Ethiopia Project Proposal-3-min.jpg"></a>
<a class="carousel-item" href="./assets/10 EWB/EWB -Ethiopia Project Proposal/EWB -Ethiopia Project Proposal-4-min.jpg" target="_blank"><img src="./assets/10 EWB/EWB -Ethiopia Project Proposal/EWB -Ethiopia Project Proposal-4-min.jpg"></a>
<a class="carousel-item" href="./assets/10 EWB/EWB -Ethiopia Project Proposal/EWB -Ethiopia Project Proposal-5-min.jpg" target="_blank"><img src="./assets/10 EWB/EWB -Ethiopia Project Proposal/EWB -Ethiopia Project Proposal-5-min.jpg"></a>
<a class="carousel-item" href="./assets/10 EWB/EWB -Ethiopia Project Proposal/EWB -Ethiopia Project Proposal-6-min.jpg" target="_blank"><img src="./assets/10 EWB/EWB -Ethiopia Project Proposal/EWB -Ethiopia Project Proposal-6-min.jpg"></a>
<a class="carousel-item" href="./assets/10 EWB/Water Distribution Map for MSB/Water Distribution Map for MSB-1-min.jpg" target="_blank"><img src="./assets/10 EWB/Water Distribution Map for MSB/Water Distribution Map for MSB-1-min.jpg"></a>
</div>
<div class="right transparent blue-grey-text text-lighten-1" style="margin-bottom: 90px;">swipe to scroll and click to expand</div>
</div>
</div>
<div class="gallery-action">
<a class="btn-floating btn-large waves-effect waves-light" onclick="Materialize.toast('Thanks!', 1000)"><i class="material-icons">thumb_up</i></a>
</div>
</div>
</div>
<!-- Northwind -->
<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter coding" style="border-color: #c8e6c9">
<div class="gallery-curve-wrapper">
<a class="gallery-cover gray">
<img src="./assets/9 Northwind/Northwind-Mobile.png" alt="placeholder">
</a>
<div class="gallery-header">
<span>DemoNorthwind</span>
</div>
<div class="gallery-body">
<div class="title-wrapper">
<h3>DemoNorthwind</h3>
<span class="price">Full Stack Website - <a href="https://demonorthwind.com" target="_blank">link</a></span>
</div>
<p class="description">
This is a single pageapplication website that I put together with Navin Pathak in order to display my knowledge of full stack
development. I built the site using an <a href="https://angular.io" target="_blank">
Angular 4</a> frontend, which connects to a RESTful API I created using a
<a href="https://nodejs.org" target="_blank">Node</a> and
<a href="https://expressjs.com" target="_blank">Express</a> framework. My API then connects
with a <a href="https://postgresql.org" target="_blank">PostgreSQL</a> database. Important
features inculde full unit testing of the API, secure login, https, custom authentication and custom authorization.
</p>
<p class="description">
As a regular user, you can:
<ul>
<li class="description"> • Create an account and stay signed in even after navigating away from the site</a></li>
<li class="description"> • View details of all product categories</a></li>
<li class="description"> • View details of all products</a></li>
<li class="description"> • Create new products</a></li>
<li class="description"> • Edit and delete products that you created</a></li>
</ul>
</p>
<p class="description">
As an admin, you can:
<ul>
<li class="description"> • Do everything regular users can</a></li>
<li class="description"> • Create new product categories</a></li>
<li class="description"> • Edit and delete all product categories</a></li>
<li class="description"> • Edit and delete all products</a></li>
</ul>
</p>
<p class="description">
If you would like to test out the admin functionality, simply navigate to any
admin-protected route like <a href=”https://demonorthwind.com/categories/new”>
demonorthwind.com/categories/new</a> after you have already logged in.
</p>
<div class="carousel-wrapper">
<div class="carousel">
<a class="carousel-item" href="./assets/9 Northwind/Northwind-Code-min.JPG" target="_blank"><img src="./assets/9 Northwind/Northwind-Code-min.JPG"></a>
<a class="carousel-item" href="./assets/9 Northwind/Northwind1-min.JPG" target="_blank"><img src="./assets/9 Northwind/Northwind1-min.JPG"></a>
<a class="carousel-item" href="./assets/9 Northwind/Northwind-Tests-min.JPG" target="_blank"><img src="./assets/9 Northwind/Northwind-Tests-min.JPG"></a>
</div>
<div class="right transparent blue-grey-text text-lighten-1" style="margin-bottom: 90px;">swipe to scroll and click to expand</div>
</div>
</div>
<div class="gallery-action">
<a class="btn-floating btn-large waves-effect waves-light" onclick="Materialize.toast('Thanks!', 1000)"><i class="material-icons">thumb_up</i></a>
</div>
</div>
</div>
<!-- Sci-Fi Playground -->
<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter design" style="border-color: #bbdefb">
<div class="gallery-curve-wrapper">
<a class="gallery-cover gray">
<img src="./assets/3 Sifi Playground/SciFi-Cover-min-min.jpg" alt="placeholder">
</a>
<div class="gallery-header">
<span>Sci-Fi Playground</span>
</div>
<div class="gallery-body">
<div class="title-wrapper">
<h3>Sci-Fi Playground</h3>
<span class="price">Playground Design</span>
</div>
<p class="description">
I created this playground design for architecture studio with a focus of maximizing childrens’ interactivity and
imagination potential, while still being an appealing piece of art.
</p>
<p class="description">
In order to accomplish this, I created abstract structures that look organic. This allowed for
plenty of pockets and bars where children could climb and play on, while not forcing an idea
for how to play with it. Although the centerpiece of the playground was made to look like a
spaceship, I made sure it was abstract enough to allow children to come up with their own
narratives when playing with it.
</p>
<div class="carousel-wrapper">
<div class="carousel">
<a class="carousel-item" href="./assets/3 Sifi Playground/002 SifiV1Perspective-min-min.jpeg" target="_blank"><img src="./assets/3 Sifi Playground/002 SifiV1Perspective-min-min.jpeg"></a>
<a class="carousel-item" href="./assets/3 Sifi Playground/003 SifiV2Module-min-min.jpeg" target="_blank"><img src="./assets/3 Sifi Playground/003 SifiV2Module-min-min.jpeg"></a>
<a class="carousel-item" href="./assets/3 Sifi Playground/005 SifiV2PerspectiveBack-min-min.jpeg" target="_blank"><img src="./assets/3 Sifi Playground/005 SifiV2PerspectiveBack-min-min.jpeg"></a>
<a class="carousel-item" href="./assets/3 Sifi Playground/006 SifiV2FormFrount-min-min.jpeg" target="_blank"><img src="./assets/3 Sifi Playground/006 SifiV2FormFrount-min-min.jpeg"></a>
<a class="carousel-item" href="./assets/3 Sifi Playground/SciFi-Cover-min-min.jpg" target="_blank"><img src="./assets/3 Sifi Playground/SciFi-Cover-min-min.jpg"></a>
<a class="carousel-item" href="./assets/3 Sifi Playground/001 SifiV1Light-min-min.jpeg" target="_blank"><img src="./assets/3 Sifi Playground/001 SifiV1Light-min-min.jpeg"></a>
</div>
<div class="right transparent blue-grey-text text-lighten-1" style="margin-bottom: 90px;">swipe to scroll and click to expand</div>
</div>
</div>
<div class="gallery-action">
<a class="btn-floating btn-large waves-effect waves-light" onclick="Materialize.toast('Thanks!', 1000)"><i class="material-icons">thumb_up</i></a>
</div>
</div>
</div>
<!-- Adventure Cove -->
<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter design" style="border-color: #bbdefb">
<div class="gallery-curve-wrapper">
<a class="gallery-cover gray">
<img src="./assets/2 Adventure Cove/AdcentureCove-Cover-min.jpg" alt="placeholder">
</a>
<div class="gallery-header">
<span>Adventures’ Retreat</span>
</div>
<div class="gallery-body">
<div class="title-wrapper">
<h3>Adventures’ Retreat</h3>
<span class="price">St Louis Community Center Design</span>
</div>
<p class="description">
I created this design of a new community center for a St. Louis design competition for
<a href="http://www.google.com/maps?f=l&hl=en&q=801+DeMun+Avenue%2c+Clayton%2c+MO+63105" target="_blank">
Concordia Park.</a> The primary focus was to preserve the aesthetic of nature.
I did this by designing not only a structure for the community center, but also by the
landscape around it. The structure melds into the environment to give
people a feeling of discovery.
</p>
<p class="description">
The design includes a children’s pool area with four different ways to enter leading to hours
of exploration and enjoyment. For the parents, the design has a lookout where they can keep
an eye on their children while sunbathing.
</p>
<div class="carousel-wrapper">
<div class="carousel">
<a class="carousel-item" href="./assets/2 Adventure Cove/000 IllustratorPresentation1-min.jpeg" target="_blank"><img src="./assets/2 Adventure Cove/000 IllustratorPresentation1-min.jpeg"></a>
<a class="carousel-item" href="./assets/2 Adventure Cove/000.5 IllustratorPresentation2-min.jpeg" target="_blank"><img src="./assets/2 Adventure Cove/000.5 IllustratorPresentation2-min.jpeg"></a>
<a class="carousel-item" href="./assets/2 Adventure Cove/001 PerspectiveCove-min.jpeg" target="_blank"><img src="./assets/2 Adventure Cove/001 PerspectiveCove-min.jpeg"></a>
<a class="carousel-item" href="./assets/2 Adventure Cove/004 TopographyTopLeft-min.jpeg" target="_blank"><img src="./assets/2 Adventure Cove/004 TopographyTopLeft-min.jpeg"></a>
<a class="carousel-item" href="./assets/2 Adventure Cove/008 Process1-min.jpeg" target="_blank"><img src="./assets/2 Adventure Cove/008 Process1-min.jpeg"></a>
<a class="carousel-item" href="./assets/2 Adventure Cove/009 Process2-min.jpeg" target="_blank"><img src="./assets/2 Adventure Cove/009 Process2-min.jpeg"></a>
</div>
<div class="right transparent blue-grey-text text-lighten-1" style="margin-bottom: 90px;">swipe to scroll and click to expand</div>
</div>
</div>
<div class="gallery-action">
<a class="btn-floating btn-large waves-effect waves-light" onclick="Materialize.toast('Thanks!', 1000)"><i class="material-icons">thumb_up</i></a>
</div>
</div>
</div>
<!-- Senior Design Project -->
<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter engineering" style="border-color: #ffecb3">
<div class="gallery-curve-wrapper">
<a class="gallery-cover gray">
<img src="./assets/5 Senior Design Project/SD-Cover-min.jpg" alt="placeholder">
</a>
<div class="gallery-header">
<span>Automatic Dog Exercizer</span>
</div>
<div class="gallery-body">
<div class="title-wrapper">
<h3>Automatic Dog Exercizer</h3>
<span class="price">The Dog Tank</span>
</div>
<p class="description">
I designed and constructed a device that launches tennis balls to exercise dogs while their
owners are away along with my team: <a href=”https://www.linkedin.com/in/chad-clark-b4610544/” target="_blank">
Chad Clark</a>, <a href=”https://www.linkedin.com/in/lauren-powell-1b11a9a1/” target="_blank">Lauren Powell</a>,
and <a href=”https://www.linkedin.com/in/david-richmond-14830388/” target="_blank">David Richmond</a>. In order
to maintain reliability, no electricity is used. Instead, power is stored in the form of a
refillable hanging water jug. Each time a dog returns a ball to the device, height is released
from the weight and is converted into kinetic energy to launch the ball.
</p>
<p class="description">
<a href=”https://www.youtube.com/watch?v=YUUNjclqBWQ” target="_blank">The result</a> is a successful prototype,
but for a production-ready design, I would decrease the size by using power from springs instead
of weights and by using metal parts instead of wood.
</p>
<p class="description">
We wrote a full report on the product which can be found on Washington University’s
<a href=”http://openscholarship.wustl.edu/mems411/9/” target="_blank">Open Scholarship site</a>.
</p>
<div class="carousel-wrapper">
<div class="carousel">
<a class="carousel-item" href="./assets/5 Senior Design Project/001 SDFullAssembly-min.jpg" target="_blank"><img src="./assets/5 Senior Design Project/001 SDFullAssembly-min.jpg"></a>
<a class="carousel-item" href="./assets/5 Senior Design Project/002 SDPinAssembly-min.jpg" target="_blank"><img src="./assets/5 Senior Design Project/002 SDPinAssembly-min.jpg"></a>
<a class="carousel-item" href="./assets/5 Senior Design Project/003 SDPrototype-min.jpeg" target="_blank"><img src="./assets/5 Senior Design Project/003 SDPrototype-min.jpeg"></a>
<a class="carousel-item" href="./assets/5 Senior Design Project/004 SDPinAssembly-min.jpeg" target="_blank"><img src="./assets/5 Senior Design Project/004 SDPinAssembly-min.jpeg"></a>
<a class="carousel-item" href="./assets/5 Senior Design Project/005 SDTopWorkingParts-min.jpeg" target="_blank"><img src="./assets/5 Senior Design Project/005 SDTopWorkingParts-min.jpeg"></a>
<a class="carousel-item" href="./assets/5 Senior Design Project/006 SDConcept-min.jpeg" target="_blank"><img src="./assets/5 Senior Design Project/006 SDConcept-min.jpeg"></a>
</div>
<div class="right transparent blue-grey-text text-lighten-1" style="margin-bottom: 90px;">swipe to scroll and click to expand</div>
</div>
</div>
<div class="gallery-action">
<a class="btn-floating btn-large waves-effect waves-light" onclick="Materialize.toast('Thanks!', 1000)"><i class="material-icons">thumb_up</i></a>
</div>
</div>
</div>
<!-- Potting Shed -->
<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter design" style="border-color: #bbdefb">
<div class="gallery-curve-wrapper">
<a class="gallery-cover gray">
<img src="./assets/6 Potting Shed/PotShed-Cover-min.jpg" alt="placeholder">
</a>
<div class="gallery-header">
<span>Farmers' Market</span>
</div>
<div class="gallery-body">
<div class="title-wrapper">
<h3>Farmers' Market</h3>
<span class="price">Community Design</span>
</div>
<p class="description">
I created a design of a community garden and potting shed for architecture studio. The potting shed doubles
as a market when the crops are harvested. The design includes topography maps of the
garden and drafts of the potting shed and exterior deck.
</p>
<div class="carousel-wrapper">
<div class="carousel">
<a class="carousel-item" href="./assets/6 Potting Shed/002 PotShedPerspectiveEntry-min.jpeg" target="_blank"><img src="./assets/6 Potting Shed/002 PotShedPerspectiveEntry-min.jpeg"></a>
<a class="carousel-item" href="./assets/6 Potting Shed/001 PotShedTop-min.jpeg" target="_blank"><img src="./assets/6 Potting Shed/001 PotShedTop-min.jpeg"></a>
<a class="carousel-item" href="./assets/6 Potting Shed/003.5 PotShedDeckDraft-min.jpeg" target="_blank"><img src="./assets/6 Potting Shed/003.5 PotShedDeckDraft-min.jpeg"></a>
<a class="carousel-item" href="./assets/6 Potting Shed/003 PotShedDraft-min.jpeg" target="_blank"><img src="./assets/6 Potting Shed/003 PotShedDraft-min.jpeg"></a>
<a class="carousel-item" href="./assets/6 Potting Shed/004 PotShedTopography-min.jpeg" target="_blank"><img src="./assets/6 Potting Shed/004 PotShedTopography-min.jpeg"></a>
</div>
<div class="right transparent blue-grey-text text-lighten-1" style="margin-bottom: 90px;">swipe to scroll and click to expand</div>
</div>
</div>
<div class="gallery-action">
<a class="btn-floating btn-large waves-effect waves-light" onclick="Materialize.toast('Thanks!', 1000)"><i class="material-icons">thumb_up</i></a>
</div>
</div>
</div>
<!-- PerchPal -->
<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter coding" style="border-color: #c8e6c9">
<div class="gallery-curve-wrapper">
<a class="gallery-cover gray">
<img src="./assets/11 PerchPal/PerchPal-Code.JPG" alt="placeholder">
</a>
<div class="gallery-header">
<span>Current Project - PerchPal</span>
</div>
<div class="gallery-body">
<div class="title-wrapper">
<h3>PerchPal</h3>
<span class="price">Social Media Site for Purchases</span>
</div>
<p class="description">
This is my current project; creating a full stack, production ready social media site aimed at
connecting friends who are experts in products with friends who are looking to buy those products.
<p class="description">
The site includes configuration for frontend and backend unit testing, end-to-end testing, hybrid server-side/client-side
rendering using <a href=”https://universal.angular.io/” target="_blank">Angular Universal</a> and
<a href=”https://github.com/angular/preboot” target="_blank">preboot.js</a>, bundling and uglifying using
<a href=”https://webpack.js.org/” target="_blank">Webpack</a>, development building and serving using
<a href=”https://cli.angular.io/” target="_blank">Angular CLI</a>, an <a href="https://angular.io" target="_blank">Angular 4</a>
frontend, a <a href="https://postgresql.org" target="_blank">PostgreSQL</a> database, and
a RESTful API made with <a href="https://nodejs.org" target="_blank">Node</a> and
<a href="https://expressjs.com" target="_blank">Express</a>.
</p>
<p class="description">
The repository is private, but I am documenting the API on my
<a href="http://docs.perchpal.com/" target="_blank">PerchPal API documentation site</a>,
so check it out! I will be updating this page as the project moves along.
</p>
<div style="margin-bottom: 90px;"></div>
</div>
<div class="gallery-action">
<a class="btn-floating btn-large waves-effect waves-light" onclick="Materialize.toast('Thanks!', 1000)"><i class="material-icons">thumb_up</i></a>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<!-- Core Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/materialize/0.98.0/js/materialize.min.js"></script>
<script src="js/color-thief.min.js"></script>
<script src="js/galleryExpand.js"></script>
<script src="js/init.js"></script>
<!-- Custom -->
<script src="js/custom/materialize-additions.js"></script>
<!-- Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-102004557-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>