-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
693 lines (627 loc) · 31 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
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
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import Materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<!-- Import CSS -->
<link type="text/css" rel="stylesheet" href="css/main.css" />
<!-- Import Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Force refresh favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<title>Steve Walker's Portfolio</title>
</head>
<body>
<!-- Begin Nav -->
<header class="main-header">
<div class="bg-img">
<nav class="transparent z-index-0">
<div class="nav-wrapper">
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="material-icons hide-on-large burger">menu</i>
</a>
<a href="index.html" class="brand-logo">Portfolio
</a>
<ul class="right hide-on-med-and-down">
<li>
<a href="https://www.linkedin.com/in/stevelwalker/" target="_blank" class="connect" target="_blank" alt="LinkedIn">LinkedIn</a>
</li>
<li>
<a href="https://github.com/captnwalker" target="_blank" class="connect" target="_blank" alt="GitHub">GitHub</a>
</li>
<li>
<a href="mailto:steve@stevewalker.us?Subject=Hello,%20I%20viewed%20your%20website%20and%20I%20have%20an%20inquiry.&body=Please include as much detail as possible and Thank You for contacting me."
target="_top" class="connect" target="_blank" alt="Email">Email</a>
</li>
<li>
<a class="modal-trigger connect" href="#proj1" alt="Bio">Bio</a>
</li>
</ul>
</div>
<!-- SideNav 'Hamburger' menu -->
<ul class="slide-out side-nav cyan darken-1" id="mobile-nav">
<a href="#">
<i class="material-icons">menu</i>
</a>
<!-- SideNav Content -->
<li class="sidenav-header cyan darken-3">
<div class="row">
<div class="col s4">
<img src="img/gallery/slw-1.JPG" width="48px" height="48px" alt="Steve Walker, MBA" class="circle responsive-img valign profile-image">
</div>
<div class="col s8">
<a class="btn-flat dropdown-button waves-effect waves-light white-text" href="#">Steve
</a>
<ul class="right">
<li>
<div class="divider"></div>
</li>
<li>
<div id="nav-spacer"></div>
</li>
<li>
<a class="sidenav-close" href="https://www.linkedin.com/in/stevelwalker/" target="_blank">LinkedIn</a>
</li>
<li>
<a class="sidenav-close" href="https://github.com/captnwalker" target="_blank">GitHub</a>
</li>
<li>
<a class="sidenav-close" href="mailto:steve@stevewalker.us?Subject=Hello,%20I%20viewed%20your%20portfolio%20website%20and%20I%20have%20an%20inquiry.&body=Please include as much detail as possible and Thank You for contacting me."
target="_top">Email</a>
</li>
<li>
<a class="modal-trigger" href="#proj1">Bio</a>
</li>
<li>
<a href="#proj1">Close</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
<!-- END SideNav 'Hamburger' menu -->
<!-- Banner Text -->
</nav>
<h1 class="center banner">Steve Walker,
<small>MBA</small>
</h1>
<h4 class="center sub-banner">UI/UX | Full Stack Web Dev | REACT</h4>
</div>
</header>
<!-- END Nav -->
<!-- Begin Content -->
<section class="section section-main">
<div class="container">
<!-- Row 1 -->
<div class="row row-1">
<div class="col m6 hide-on-small-only">
<div class="img-content">
<h3>About Me</h3>
<p class="desc">Welcome! I'm an accomplished "Mobile-First" Front-End Developer with Full Stack Experience working in REACT,
Angular, Laravel, PHP, JavaScript, MySql and Mongo to name just a few.
<span class="hide-on-med-and-down">Click the
<a class="in-line-link modal-trigger" href="#proj1">information icon</a> to view my
<a class="in-line-link modal-trigger" href="#proj1">Bio</a>, then scroll down and have a look around at some of my projects.</span> Thank you for stopping by
and, please, send me an
<a class="in-line-link" href="mailto:steve@stevewalker.us?Subject=Hello,%20I%20viewed%20your%20portfolio%20website%20and%20I%20have%20an%20inquiry.&body=Please include as much detail as possible and Thank You for contacting me."
target="_top">
email
</a> if you would like to learn more.</p>
</div>
</div>
<div class="col m6">
<div class="card hoverable">
<div class="card-image">
<img src="img/gallery/slw.jpg" alt="Steve Walker, MBA">
<span class="card-title">Steve Walker,
<small>MBA</small>
</span>
<a href="#proj1" class="btn-floating halfway-fab waves-effect waves-light cyan darken-2 modal-trigger pulse">
<i class="material-icons tooltipped hide-on-small-only" data-position="bottom" data-delay="50" data-tooltip="View Bio">info_outline</i>
<i class="material-icons hide-on-med-and-up">info_outline</i>
</a>
</div>
<div class="card-content">
<p class="center-align">
<a class="waves-effect waves-teal btn-flat connect" href="https://github.com/captnwalker" target="_blank" alt="GitHub">GitHub</a>
<a class="waves-effect waves-teal btn-flat connect" href="https://www.linkedin.com/in/stevelwalker/" target="_blank" alt="linkedIn">LinkedIn</a>
<a class="waves-effect waves-teal btn-flat connect" href="mailto:steve@stevewalker.us?Subject=Hello,%20I%20viewed%20your%20website%20and%20I%20have%20an%20inquiry.&body=Please include as much detail as possible and Thank You for contacting me."
target="_top" class="connect tooltipped" alt="Email">Email</a>
</p>
</div>
</div>
</div>
</div>
<!-- Row 2 -->
<div class="row row-2">
<div class="col m6">
<div class="card hoverable">
<div class="card-image">
<img src="img/gallery/redcarpet.jpg" alt="Red Carpet">
<span class="card-title">Red Carpet</span>
<a href="#proj2" class="btn-floating halfway-fab waves-effect waves-light cyan darken-2 modal-trigger pulse">
<i class="material-icons tooltipped hide-on-small-only" data-position="bottom" data-delay="50" data-tooltip="Enlarge">add</i>
<i class="material-icons hide-on-med-and-up">add</i>
</a>
</div>
<div class="card-content">
<p class="center-align">
<a class="waves-effect waves-teal btn-flat connect" href="https://github.com/captnwalker/red-carpet" target="_blank" alt="GitHub">GitHub</a>
<a class="waves-effect waves-teal btn-flat connect" href="http://red-carpet-app.herokuapp.com/" target="_blank" alt="Github"
data-position="bottom">Live Site</a>
</p>
</div>
</div>
</div>
<div class="col m6 hide-on-small-only">
<div class="img-content">
<h3>Red Carpet</h3>
<p class="desc">Built with Sequalize, Handlebars, Passport and a proprietary 11,000 row MySql database of every Academy Award
winner & nominee since 1927.
<span class="hide-on-med-and-down">"Red Carpet" permits the user to register & login, create a watch list, rate and purchase the outstanding films.</span>
Click
<a class="in-line-link modal-trigger" href="#proj2">
<svg class="user-nav__icon">
<use xlink:href="img/sprite.svg#icon-plus2"></use>
</svg>
</a>
to start the show!
</p>
</div>
</div>
</div>
<!-- Row 3 -->
<div class="row row-3">
<div class="col m6 hide-on-small-only">
<div class="img-content">
<h3>Reservationist</h3>
<p class="desc">Booking the best table in the house just got easier! "Reservationist" records and retrives reservation information.
Reservationist is built in React with SCSS styling.
<span class="hide-on-med-and-down">This permits each individual element to occupy separate files making the product easily scalable and customizable
by swapping components in and out as required for a wide variety of end users.</span>Click
<a class="in-line-link modal-trigger" href="#proj3">
<svg class="user-nav__icon">
<use xlink:href="img/sprite.svg#icon-plus2"></use>
</svg>
</a>
to explore.</p>
</div>
</div>
<div class="col m6">
<div class="card hoverable">
<div class="card-image">
<img src="img/gallery/reservationist.jpg" alt="Reservationist">
<span class="card-title">Reservationist</span>
<a href="#proj3" class="btn-floating halfway-fab waves-effect waves-light cyan darken-2 modal-trigger pulse">
<i class="material-icons tooltipped hide-on-small-only" data-position="bottom" data-delay="50" data-tooltip="Enlarge">add</i>
<i class="material-icons hide-on-med-and-up">add</i>
</a>
</div>
<div class="card-content">
<p class="center-align">
<a class="waves-effect waves-teal btn-flat connect" href="https://github.com/captnwalker/reservationist-2" target="_blank"
alt="GitHub">GitHub</a>
<a class="waves-effect waves-teal btn-flat connect" href="https://reservationist-2.herokuapp.com/" target="_blank" alt="Live Site">Live Site</a>
</p>
</div>
</div>
</div>
</div>
<!-- Row 4 -->
<div class="row row-4">
<div class="col m6">
<div class="card hoverable">
<div class="card-image">
<img src="img/gallery/rant-rave.png" alt="Rant and Rave">
<span class="card-title">Rant and Rave</span>
<a href="#proj4" class="btn-floating halfway-fab waves-effect waves-light cyan darken-2 modal-trigger pulse">
<i class="material-icons tooltipped hide-on-small-only" data-position="bottom" data-delay="50" data-tooltip="Enlarge">add</i>
<i class="material-icons hide-on-med-and-up">add</i>
</a>
</div>
<div class="card-content">
<p class="center-align">
<a class="waves-effect waves-teal btn-flat connect" href="https://github.com/captnwalker/rant-and-rave" target="_blank" alt="GitHub">GitHub</a>
<a class="waves-effect waves-teal btn-flat connect" href="#" target="_blank" alt="Live Site">Coming Soon</a>
</p>
</div>
</div>
</div>
<div class="col m6 hide-on-small-only">
<div class="img-content">
<h3>Rant and Rave</h3>
<p class="desc">Scream into the digital abyss. Written in PHP with PDO included to help prevent SQL injection, "Rant and Rave"
is
<span class="hide-on-med-and-down"> an exercise in creating a social media platform with</span> a MVC framework built from scratch. Similar to
REACT, Angular or Laravel, this social media app is built on a Custom MVC Framework with a MySql backend. Click
<a class="in-line-link modal-trigger" href="#proj4">
<svg class="user-nav__icon">
<use xlink:href="img/sprite.svg#icon-plus2"></use>
</svg>
</a>
to learn more.</p>
</div>
</div>
</div>
<!-- Row 5 -->
<div class="row row-5">
<div class="col m6 hide-on-small-only">
<div class="img-content">
<h3>Restaurant
<span class="hide-on-med-and-down">Expense</span> Manager</h3>
<p class="desc">Restaurant Expense Manager tracks buisness expenses. Built in React with SCSS styling which permits swift styling
and color-branding across components.
<span class="hide-on-med-and-down"> Each individual element occupys separate files making the product easily scalable and customizable by swapping
components in and out as required for a wide variety of end users. </span> Click
<a class="in-line-link modal-trigger" href="#proj5">
<svg class="user-nav__icon">
<use xlink:href="img/sprite.svg#icon-plus2"></use>
</svg>
</a>
for more information.
</p>
</div>
</div>
<div class="col m6">
<div class="card hoverable">
<div class="card-image">
<img src="img/gallery/expense-manager.jpg" alt="Expense Manager">
<span class="card-title">Restaurant Expense Manager</span>
<a href="#proj5" class="btn-floating halfway-fab waves-effect waves-light cyan darken-2 modal-trigger pulse">
<i class="material-icons tooltipped hide-on-small-only" data-position="bottom" data-delay="50" data-tooltip="Enlarge">add</i>
<i class="material-icons hide-on-med-and-up">add</i>
</a>
</div>
<div class="card-content">
<p class="center-align">
<a class="waves-effect waves-teal btn-flat connect" href="https://github.com/captnwalker/expense-manager" target="_blank"
alt="GitHub">GitHub</a>
<a class="waves-effect waves-teal btn-flat connect" href="https://expense-manager3.herokuapp.com/dashboard" target="_blank"
alt="Live Site">Live Site</a>
</p>
</div>
</div>
</div>
</div>
<!-- Row 6 -->
<div class="row row-6">
<div class="col m6">
<div class="card hoverable">
<div class="card-image">
<img src="img/gallery/dilemma.jpg" alt="Dilemma Decider">
<span class="card-title">Dilemma Decider</span>
<a href="#proj6" class="btn-floating halfway-fab waves-effect waves-light cyan darken-2 modal-trigger pulse">
<i class="material-icons tooltipped hide-on-small-only" data-position="bottom" data-delay="50" data-tooltip="Enlarge">add</i>
<i class="material-icons hide-on-med-and-up">add</i>
</a>
</div>
<div class="card-content">
<p class="center-align">
<a class="waves-effect waves-teal btn-flat connect" href="https://github.com/captnwalker/Dilemma-Decider" target="_blank"
alt="GitHub">GitHub</a>
<a class="waves-effect waves-teal btn-flat connect" href="https://dilemma-decider.herokuapp.com/" target="_blank" alt="Github">Live Site</a>
</p>
</div>
</div>
</div>
<div class="col m6 hide-on-small-only">
<div class="img-content">
<h3>Dilemma Decider</h3>
<p class="desc">Can't Decide? Let "Decision Decider" Do It For You! Written in REACT with Bold and Vibrant SCSS Styling.
<span class="hide-on-med-and-down">Enter as many choices (options) as you wish for Dilemma Decider to consider.</span> The whimsical Dilemma Decider
will make that tough decision for you. Enjoy! Curious about how it works? Click
<a class="in-line-link modal-trigger" href="#proj6">
<svg class="user-nav__icon">
<use xlink:href="img/sprite.svg#icon-plus2"></use>
</svg>
</a>
now.
</p>
</div>
</div>
</div>
<!-- Row 7 -->
<div class="row row-7">
<div class="col m6 hide-on-small-only">
<div class="img-content">
<h3>Personal Expense Manager</h3>
<p class="desc">Track your personal or business expenses with "Personal Expense Manager." Built in React with SCSS styling.
<span class="hide-on-med-and-down">React permits each individual element to occupy separate files making the product easily scalable and customizable
by swapping components in and out as required for a wide variety of puposes and end users.</span> Want to
explore deeper? Click
<a class="in-line-link modal-trigger" href="#proj7">
<svg class="user-nav__icon">
<use xlink:href="img/sprite.svg#icon-plus2"></use>
</svg>
</a>
to expand.
</p>
</div>
</div>
<div class="col m6">
<div class="card hoverable">
<div class="card-image">
<img src="img/gallery/personal-expense-manager.jpg" alt="Personal Expense Manager">
<span class="card-title">Personal Expense Manager</span>
<a href="#proj7" class="btn-floating halfway-fab waves-effect waves-light cyan darken-2 modal-trigger pulse">
<i class="material-icons tooltipped hide-on-small-only" data-position="bottom" data-delay="50" data-tooltip="Enlarge">add</i>
<i class="material-icons hide-on-med-and-up">add</i>
</a>
</div>
<div class="card-content">
<p class="center-align">
<a class="waves-effect waves-teal btn-flat connect" href="https://github.com/captnwalker/personal-expense-manager" target="_blank"
alt="GitHub">GitHub</a>
<a class="waves-effect waves-teal btn-flat connect" href="https://personal-expense-manager5.herokuapp.com/dashboard" target="_blank"
alt="Live Site">Live Site</a>
</p>
</div>
</div>
</div>
</div>
<!-- Row 8 -->
<div class="row row-8">
<div class="col m6">
<div class="card hoverable">
<div class="card-image">
<img src="img/gallery/travelpedia.png" alt="Dilemma Decider">
<span class="card-title">Travelpedia</span>
<a href="#proj8" class="btn-floating halfway-fab waves-effect waves-light cyan darken-2 modal-trigger pulse">
<i class="material-icons tooltipped hide-on-small-only" data-position="bottom" data-delay="50" data-tooltip="Enlarge">add</i>
<i class="material-icons hide-on-med-and-up">add</i>
</a>
</div>
<div class="card-content">
<p class="center-align">
<a class="waves-effect waves-teal btn-flat connect" href="https://github.com/captnwalker/Travelpedia" target="_blank" alt="GitHub">GitHub</a>
<a class="waves-effect waves-teal btn-flat connect" href="https://captnwalker.github.io/Travelpedia/" target="_blank" alt="Live Site on Github">Live Site</a>
</p>
</div>
</div>
</div>
<div class="col m6 hide-on-small-only">
<div class="img-content">
<h3>Travelpedia</h3>
<p class="desc">Travelpedia is a "proof-of-concept" travel booking website landing page (front-end only) built with SASS and
Flexbox and presented as a showcase for numerous CSS animations complied from SASS/SCSS including Bezeir gradients,
transitions, CSS variables and SVG icons. Click
<!-- <span class="hide-on-med-and-down">Enter as many choices (options) as you wish for Dilemma Decider to consider.</span> The whimsical Dilemma Decider
will make that tough decision for you. Enjoy! Curious about how it works? Click -->
<a class="in-line-link modal-trigger" href="#proj8">
<svg class="user-nav__icon">
<use xlink:href="img/sprite.svg#icon-plus2"></use>
</svg>
</a>
for more information.
</p>
</div>
</div>
</div>
<!-- END Row 8 -->
</div>
</section>
<!-- END Content -->
<!-- Footer -->
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5>Links</h5>
<ul>
<li>
<a href="https://www.linkedin.com/in/stevelwalker/" target="_blank" class="connect tooltipped" target="_blank" alt="LinkedIn"
data-position="right" data-delay="50" data-tooltip="Connect on LinkedIn">LinkedIn</a>
</li>
<li>
<li>
<a href="https://github.com/captnwalker" target="_blank" class="connect tooltipped" target="_blank" alt="GitHub" data-position="right"
data-delay="50" data-tooltip="View GitHub Repository">GitHub</a>
</li>
<a href="mailto:steve@stevewalker.us?Subject=Hello,%20I%20viewed%20your%20website%20and%20I%20have%20an%20inquiry.&body=Please include as much detail as possible and Thank You for contacting me."
target="_top" class="connect tooltipped" target="_blank" alt="LinkedIn" data-position="right" data-delay="50"
data-tooltip="Send Email">Email</a>
</li>
<li>
<a class="modal-trigger tooltipped" href="#proj1" alt="Bio" data-position="right" data-delay="50" data-tooltip="View Bio">Bio</a>
</li>
<li>
<a href="index.html">
<i class="material-icons tooltipped" id="home" alt="Home" data-position="right" data-delay="50" data-tooltip="Home">home</i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2018 Steve Walker,
<small>MBA</small>
</div>
</div>
</footer>
<!-- END Footer -->
<!-- MODALS -->
<!-- Modal 1 -->
<div id="proj1" class="modal">
<div class="modal-content">
<h4 id="slw">Steve Walker,
<small>MBA</small>
</h4>
<hr>
<p class="flow-text">
I got my start coding HTML and CSS in Florida in the late-1990’s. I also taught software classes including Adobe Photoshop,
Microsoft Excel and Access, all to the Advanced Level, as well as CompTia A+ certification classes. I also ran a
small company buliding Web Sites and doing server and network troubleshooting. I left the Computer Industry in the
mid-2000’s pursue a successful career in the New York Real Estate Investment Industry. After a period of retirement
I took to raise my daughter, I have decided to jump back into the Tech Industry to passionately pursue my goal of
becoming a Full Stack Web Developer.</p>
<p class="flow-text">
In my free time I enjoy World travel having visited countries such as Turkey, Morocco, New Zealand, Australia and all of
Europe with my wife and daughter. Our current situation also permits me the flexibility to entertain relocation for
job offers to any region of the World.
</p>
<table class="highlight">
<thead>
<tr>
<span class="in-line-link tbl">Experience in these Technologies</span>
</tr>
</thead>
<tbody>
<tr>
<td>REACT</td>
<td>Angular 5</td>
<td>Laravel</td>
</tr>
<tr>
<td>MySql</td>
<td>Mongo</td>
<td>Firestore</td>
</tr>
<tr>
<td>NodeJS</td>
<td>ExpressJS</td>
<td>PHP</td>
</tr>
<tr>
<td>Materialize</td>
<td>Bootstrap 4</td>
<td>JavaScript</td>
</tr>
<tr>
<td>CSS-3</td>
<td>SCSS/SASS</td>
<td>HTML5</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<a class="modal-action modal-close waves-effect waves-light btn grey darken-4">Dismiss</a>
</div>
</div>
<!-- Modal 2 -->
<div id="proj2" class="modal">
<div class="modal-content">
<h4>Red Carpet</h4>
<img src="img/gallery/redcarpet.jpg" alt="Red Carpet" class="responsive-img">
<p class="modal-text">
Create and manage your own personal list of award winning (and nominated films), with reviews, a watched list, and priority
lists based on which awards shows are coming up next. Built with Sequalize, Handlebars, Passport and a proprietary
11,000 row MySql database of every Academy Award winner & nominee since 1927, "Red Carpet" permits the user to register
& login, create a watch list, rate and purchase the outstanding films.
</p>
</div>
<div class="modal-footer">
<a class="modal-action modal-close waves-effect waves-light btn grey darken-4">Dismiss</a>
</div>
</div>
<!-- Modal 3 -->
<div id="proj3" class="modal">
<div class="modal-content">
<h4>Reservationist</h4>
<img src="img/gallery/reservationist.jpg" alt="Reservationist" class="responsive-img">
<p class="modal-text">
Booking the best table in the house just got easier! "Reservationist" allows an individual user or company to record and
retrive reservation information. Reservationist is built in React with SCSS styling which permits each individual
element to occupy separate files making the product easily scalable and customizable by swapping components in and
out as required for a wide variety of end users. Reservationist is fully responsive for a seamless mobile user experience.
</p>
</div>
<div class="modal-footer">
<a class="modal-action modal-close waves-effect waves-light btn grey darken-4">Dismiss</a>
</div>
</div>
<!-- Modal 4 -->
<div id="proj4" class="modal">
<div class="modal-content">
<h4>Rant and Rave</h4>
<img src="img/gallery/rant-rave.png" alt="Rant and Rave" class="responsive-img">
<p class="modal-text">
Scream into the digital abyss. Written in PHP with PDO included to help prevent SQL injection, "Rant and Rave" is an exercise
in creating a social media platform with a MVC framework built from scratch. Similar to REACT, Angular or Laravel,
this social media app is built on a Custom MVC Framework with a MySql backend.
</p>
</div>
<div class="modal-footer">
<a class="modal-action modal-close waves-effect waves-light btn grey darken-4">Dismiss</a>
</div>
</div>
<!-- Modal 5 -->
<div id="proj5" class="modal">
<div class="modal-content">
<h4>Restaurant Expense Manager</h4>
<img src="img/gallery/expense-manager.jpg" alt="Restaurant Expense Manager" class="responsive-img">
<p class="modal-text">
"Expense-Manager" allows an individual user or company to track business expenses. Expense-Manager is built in React with
SCSS styling which permits each individual element to occupy separate files making the product easily scalable and
customizable by swapping components in and out as required for a wide variety of end users. The app is fully responsive
for a seamless mobile user experience.
</p>
</div>
<div class="modal-footer">
<a class="modal-action modal-close waves-effect waves-light btn grey darken-4">Dismiss</a>
</div>
</div>
<!-- Modal 6 -->
<div id="proj6" class="modal">
<div class="modal-content">
<h4>Dilemma Decider</h4>
<img src="img/gallery/dilemma.jpg" alt="Dilemma Decider" class="responsive-img">
<p class="modal-text">
Can't Decide? Let "Decision Maker" Do It For You! Written in REACT and presented with Bold and Vibrant SCSS Styling, enter
as many choices (options) as your paticular dilemma presents and Dilemma Decider will make that tough decision for
you. Media queries make this app as accessible and enjoyable on your mobile device as it is on your desktop. Enjoy!
</p>
</div>
<div class="modal-footer">
<a class="modal-action modal-close waves-effect waves-light btn grey darken-4">Dismiss</a>
</div>
</div>
<!-- Modal 7 -->
<div id="proj7" class="modal">
<div class="modal-content">
<h4>Personal Expense Manager</h4>
<img src="img/gallery/personal-expense-manager.jpg" alt="Personal Expense Manager" class="responsive-img">
<<p class="modal-text">
"Personal-Expense-Manager" allows an individual user or company to track personal or business expenses. Expense-Manager is
built in React with SCSS styling which permits each individual element to occupy separate files making the product
easily scalable and customizable by swapping components in and out as required for a wide variety of end users. The
app is fully responsive for a seamless mobile user experience. This version of the Expense-Manager has been customized
for use by individuals.
</p>
</div>
<div class="modal-footer">
<a class="modal-action modal-close waves-effect waves-light btn grey darken-4">Dismiss</a>
</div>
</div>
<!-- Modal 8 -->
<div id="proj8" class="modal">
<div class="modal-content">
<h4>Travelpedia</h4>
<img src="img/gallery/travelpedia.png" alt="Travelpedia" class="responsive-img">
<p class="modal-text">
Travelpedia is a "proof-of-concept" travel booking website landing page (front-end only) built with SASS and Flexbox and
presented as a showcase for numerous CSS animations complied from SASS/SCSS including Bezeir gradients, transitions,
CSS variables and SVG icons.
</p>
</div>
<div class="modal-footer">
<a class="modal-action modal-close waves-effect waves-light btn grey darken-4">Dismiss</a>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
</body>
</html>