-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
467 lines (450 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
<!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="Zach's portfolio of coding projects in HTML, JavaScript, CSS, and Python. Links are provided to GitHub repositories and live examples of projects.">
<title>Zach Grauerholz's Portfolio</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="css/style.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" defer></script>
<script src="js/bootstrap.min.js" defer></script>
<script src="js/custom.js" defer></script>
<!-- Google Universal Analytics tracking code -->
<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-91945949-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="container-fluid dark-bg-color">
<header>
<div class="row">
<div class="col-xs-12 text-right text-uppercase no-padding">
<picture id="header-img">
<source media="(min-width: 991px)" srcset="images/code_shorter_landscape.jpg">
<img class="col-xs-12 img-responsive" src="images/code_shorter_port.jpg" alt="Image of code on computer screen">
</picture>
<h1 id="name">Zachary Grauerholz</h1>
<h2 id="title">Programmer</h2>
</div>
</div>
</header>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left text-uppercase">
<li class="active"><a href="#">Projects</a></li>
<li><a href="work.html">Work Experience</a></li>
<li><a href="education.html">Education & Skills</a></li>
</ul>
<div class="navbar-right">
<span class="badge linkedin-colors" id="linkedin-badge">
<a href="https://www.linkedin.com/in/zachary-grauerholz" target="_blank" >
<img src="./images/linkedin.svg" alt="Linkedin profile" class="nav-svg" />
</a>
</span>
<span class="badge github-colors" id="github-badge">
<a href="https://github.com/ZGrauer/" target="_blank">
<img src="./images/github.svg" alt="GitHub profile" class="nav-svg" />
</a>
</span>
</div>
</div>
</nav>
<main class="format-main">
<section class="content">
<div class="row">
<h3 class="col-xs-12 highlight-color page-heading">Featured Work</h3>
</div>
<div class="row">
<article class="col-md-4 pad-bottom text-center">
<!-- Img hover overlay. Links to modal with additional info on project -->
<div class="hov-img-container">
<img class="img-responsive img-thumbnail modal-img" src="images/Map_Info-800.png" alt="Vacation Planning Map Additional Info">
<div class="hov-middle">
<div class="row">
<div class="col-xs-12">
<a href="#" class="btn btn-info" data-toggle="modal" data-target="#map" role="button">
More Info
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<a href="http://map.zgrauerholz.com/" target="_blank" class="btn btn-primary margin-top-10" role="button">
View Site
</a>
</div>
</div>
</div>
</div>
<h4 class="highlight-color proj-title" data-toggle="modal" data-target="#map">Vacation Planner Map</h4>
<div>
<span class="project-skill"><abbr title="Asynchronous JavaScript and XML">AJAX</abbr></span>
<span class="project-skill">JavaScript Frameworks</span>
<span class="project-skill"><abbr title="Application Program Interface">API</abbr> integration</span>
</div>
<p class="project-summary">
A single-page application built using the Knockout framework, featuring a map of a future vacation spot. The map is generated by Google's Map API and map markers are added in JavaScript to identify popular locations to visit. Features real-time list and
map marker filtering to easily discover locations. A listview on the left of the UI exists for simple browsing of locations. When a list item or map marker is clicked, an info window is opened with data from third-party APIs.
Data from
<a href="https://developers.google.com/maps/documentation/streetview/" target="_blank">Google StreetView</a>,
<a href="https://developers.google.com/places/" target="_blank">Google Places</a>, and
<a href="https://www.mediawiki.org/wiki/API:Main_page" target="_blank">Wikipedia</a> is loaded asynchronously.
</p>
<a class="btn btn-primary margin-top-10 github github-fork" href="https://github.com/ZGrauer/Vacation-Planner" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Fork me on GitHub">
<img src="./images/github.svg" alt="Fork on GitHub" class="btn-svg" /> Fork me
</a>
</article>
<article class="col-md-4 pad-bottom text-center">
<!-- Img hover overlay. Links to modal with additional info on project -->
<div class="hov-img-container">
<img class="img-responsive img-thumbnail modal-img" src="images/Recipe-Book-800.png" alt="Recipe Book Angular App">
<div class="hov-middle">
<div class="row">
<div class="col-xs-12">
<a href="#" class="btn btn-info" data-toggle="modal" data-target="#recipe-book" role="button">
More Info
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<a href="http://recipes.zgrauerholz.com" target="_blank" class="btn btn-primary margin-top-10" role="button">
View Site
</a>
</div>
</div>
</div>
</div>
<h4 class="highlight-color proj-title" data-toggle="modal" data-target="#recipe-book">Recipe Book</h4>
<div>
<span class="project-skill">Angular v4.0</span>
<span class="project-skill">TypeScript</span>
<span class="project-skill">NoSQL</span>
</div>
<p class="project-summary">
A responsive Single Page Application (SPA), written in
<a href="https://angular.io/" target="_blank">Angular</a>, to store personal recipes.
The Recipe Book website allows recipes to be added, edited, or deleted based on
<a href="https://developers.google.com/identity/" target="_blank">OAuth</a> user
authorization & authentication. Images of the recipe can be specified as a URL. Recipe ingredients can be
added to a separate Shopping List page. Items can be added, edited, or deleted on the Shopping List page. All
of this data can be stored in a
<a href="https://firebase.google.com/docs/database/" target="_blank">Firebase database</a> and retrieved later.
</p>
<a class="btn btn-primary margin-top-10 github github-fork" href="https://github.com/ZGrauer/recipe-book" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Fork me on GitHub">
<img src="./images/github.svg" alt="Fork on GitHub" class="btn-svg" /> Fork me
</a>
</article>
<article class="col-md-4 pad-bottom text-center">
<!-- Img hover overlay. Links to modal with additional info on project -->
<div class="hov-img-container">
<img class="img-responsive img-thumbnail modal-img" src="images/Item-Catalog-550.jpg" alt="Item Catalog Additional Info">
<div class="hov-middle">
<div class="row">
<div class="col-xs-12">
<a href="#" class="btn btn-info" data-toggle="modal" data-target="#item-catalog" role="button">
More Info
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<!-- <a href="http://itemcatalog.us-west-2.elasticbeanstalk.com/" target="_blank" class="btn btn-primary margin-top-10" role="button">
View Site
</a>-->
</div>
</div>
</div>
</div>
<h4 class="highlight-color proj-title" data-toggle="modal" data-target="#item-catalog">Item Catalog</h4>
<div>
<span class="project-skill">OAuth 2.0</span>
<span class="project-skill">Flask</span>
<span class="project-skill">Python</span>
</div>
<p class="project-summary">
Allows users to register and login using <a href="https://oauth.net/2/" target="_blank">OAuth 2.0</a> providers Google and Facebook so they can create lists of items in distinct categories. All categories and items are viewable
but they can only be added to, edited, or deleted by the user who created them.
</p>
<a class="btn btn-primary margin-top-10 github github-fork" href="https://github.com/ZGrauer/Item-Catalog" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Fork me on GitHub">
<img src="./images/github.svg" alt="Fork on GitHub" class="btn-svg" /> Fork me
</a>
</article>
</div>
<div class="row">
<article class="col-md-4 pad-bottom text-center">
<!-- Img hover overlay. Links to modal with additional info on project -->
<div class="hov-img-container">
<img class="img-responsive img-thumbnail modal-img" src="images/Blog-Post-550.jpg" alt="Personal Blog in Python">
<div class="hov-middle">
<div class="row">
<div class="col-xs-12">
<a href="#" class="btn btn-info" data-toggle="modal" data-target="#python-blog" role="button">
More Info
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<a href="https://zachs-blog-154712.appspot.com/" target="_blank" class="btn btn-primary margin-top-10" role="button">
View Site
</a>
</div>
</div>
</div>
</div>
<h4 class="highlight-color proj-title" data-toggle="modal" data-target="#python-blog">Multi-User Blog</h4>
<div>
<span class="project-skill">Bootstrap</span>
<span class="project-skill">Google App Engine</span>
<span class="project-skill">Python</span>
</div>
<p class="project-summary">
A personal blog for posting content with commenting and score system. Built using Python for the backend server, and runs on <a href="https://cloud.google.com/appengine/" target="_blank">Google App Engine</a>. The Python server
uses <a href="http://jinja.pocoo.org/" target="_blank">jinja2</a> for HTML templating and stores all site data in <a href="https://cloud.google.com/datastore/docs/concepts/overview" target="_blank">Google Cloud Datastore</a>.
</p>
<a class="btn btn-primary margin-top-10 github github-fork" href="https://github.com/ZGrauer/Python-Blog" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Fork me on GitHub">
<img src="./images/github.svg" alt="Fork on GitHub" class="btn-svg" /> Fork me
</a>
</article>
<article class="col-md-4 pad-bottom text-center">
<!-- Img hover overlay. Links to modal with additional info on project -->
<div class="hov-img-container">
<img class="img-responsive img-thumbnail modal-img" src="images/Movie-Site-550.jpg" alt="Python Movie Website">
<div class="hov-middle">
<div class="row">
<div class="col-xs-12">
<a href="#" class="btn btn-info" data-toggle="modal" data-target="#python-movie" role="button">
More Info
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<a href="fresh_tomatoes.html" target="_blank" class="btn btn-primary margin-top-10" role="button">
View Site
</a>
</div>
</div>
</div>
</div>
<h4 class="highlight-color proj-title" data-toggle="modal" data-target="#python-movie">Python Movie Website</h4>
<div>
<span class="project-skill"><abbr title="HyperText Markup Language">HTML</abbr></span>
<span class="project-skill"><abbr title="Cascading Style Sheets">CSS</abbr></span>
<span class="project-skill">Python</span>
</div>
<p class="project-summary">
Server-side Python class to store a list of favorite movies, populated with info from <abbr title="Internet Movie Database">IMDb</abbr> and YouTube API queries. The class generates the HTML page from the queries.
</p>
<a class="btn btn-primary margin-top-10 github github-fork" href="https://github.com/ZGrauer/Movie-Website" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Fork me on GitHub">
<img src="./images/github.svg" alt="Fork on GitHub" class="btn-svg" /> Fork me
</a>
</article>
</div>
<!-- TODO: add future projects -->
</section>
</main>
</div>
<!-- Modals -->
<div class="modal fade" id="python-movie" tabindex="-1" role="dialog" aria-labelledby="movieModalLabel" aria-hidden="true">
<div class="modal-dialog dark-color">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="movieModalLabel">Python Movie Website</h4>
</div>
<div class="modal-body">
<a href="fresh_tomatoes.html" target="_blank">
<img class="modal-img img-responsive img-thumbnail center" src="./images/Movie-Site-800.jpg" alt="Python Movie Website ">
</a>
<div class="text-center">
<span class="project-skill"><abbr title="HyperText Markup Language">HTML</abbr></span>
<span class="project-skill"><abbr title="Cascading Style Sheets">CSS</abbr></span>
<span class="project-skill">Python</span>
</div>
<p class="project-summary">
Server-side Python class to store a list of favorite movies, including box art imagery, movie trailer URL, and other info. The code generates a static web page allowing visitors to browse movies. Click the image above to view the generated page.
</p>
<p>The Python code uses APIs for <abbr title="Internet Movie Database">IMDb</abbr> and YouTube to pull movie information and trailers. Only the movie title needs specified in a list for it to be added to the page.
</p>
<p>
GitHub Repository: <a href="https://github.com/ZGrauer/Movie-Website" target="_blank">https://github.com/ZGrauer/Movie-Website</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="python-blog" tabindex="-1" role="dialog" aria-labelledby="blogModalLabel" aria-hidden="true">
<div class="modal-dialog dark-color">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="blogModalLabel">Multi-User Blog</h4>
</div>
<div class="modal-body">
<a href="https://zachs-blog-154712.appspot.com/" target="_blank">
<img class="modal-img img-responsive img-thumbnail center" src="./images/Blog-550.jpg" alt="Python Movie Website ">
</a>
<div class="text-center">
<span class="project-skill">Bootstrap</span>
<span class="project-skill">HTML</span>
<span class="project-skill">Google App Engine</span>
<span class="project-skill">Google Datastore</span>
<span class="project-skill">Python</span>
</div>
<p class="project-summary">
A personal blog for posting content with commenting and score system. Built using Python for the backend, and runs on Google App Engine. The Python server uses jinja2 for HTML templating and stores all site data in Google Cloud Datastore.
</p>
<p>
Both the user cookies and user database info are hashed for security. SHA-256 is used along with HMAC and salts. Anyone can create an account on the site, and emails are optional. An account is needed to post articles, add comments, or like posts.
</p>
<p>
Users can edit or delete only their own posts but can comment on any post. In addition, users can only like or dislike other users posts. They cannot like their own. The post's score can be viewed on the right side of the screen.
</p>
<p>
GitHub Repository: <a href="https://github.com/ZGrauer/Python-Blog" target="_blank">https://github.com/ZGrauer/Python-Blog</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="item-catalog" tabindex="-1" role="dialog" aria-labelledby="itemModalLabel" aria-hidden="true">
<div class="modal-dialog dark-color">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="itemModalLabel">Item Catalog Web App</h4>
</div>
<div class="modal-body">
<!--<a href="http://itemcatalog.us-west-2.elasticbeanstalk.com/" target="_blank">
<img class="modal-img img-responsive img-thumbnail center" src="./images/Item-Catalog-Item-550.jpg" alt="Item Catalog Website">
</a>-->
<img class="modal-img img-responsive img-thumbnail center" src="./images/Item-Catalog-Item-550.jpg" alt="Item Catalog Website">
<div class="text-center">
<span class="project-skill">OAuth 2.0</span>
<span class="project-skill">Flask</span>
<span class="project-skill">Python</span>
<span class="project-skill">HTML</span>
<span class="project-skill">Bootstrap</span>
<span class="project-skill">SQL</span>
</div>
<p class="project-summary">
Allows users to register and login using <a href="https://oauth.net/2/" target="_blank">OAuth 2.0</a> providers Google and Facebook so they can create lists of items in distinct categories. All categories and items are viewable
but they can only be added to, edited, or deleted by the user who created them.
</p>
<p>
The web server is written in Python using the <a href="http://flask.pocoo.org/" target="_blank">Flask</a> framework and the database uses <a href="https://sqlite.org/" target="_blank">SQLite</a>. The app includes a
<abbr title="Representational State Transfer">RESTful</abbr> <abbr title="Application Programming Interface">API</abbr> that returns <abbr title="JavaScript Object Notation">JSON</abbr> objects representing items in the catalog
based.
</p>
<p>
GitHub Repository: <a href="https://github.com/ZGrauer/Item-Catalog" target="_blank">https://github.com/ZGrauer/Item-Catalog</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="map" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel" aria-hidden="true">
<div class="modal-dialog dark-color">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="mapModalLabel">Vacation Planner Map</h4>
</div>
<div class="modal-body">
<a href="http://aws-website-vacationplanner-j69l5.s3-website-us-east-1.amazonaws.com/" target="_blank">
<img class="modal-img img-responsive img-thumbnail center" src="./images/Map_Overview-800.jpg" alt="Vacation Planner Website">
</a>
<div class="text-center">
<span class="project-skill"><abbr title="Asynchronous JavaScript and XML">AJAX</abbr></span>
<span class="project-skill">JavaScript Frameworks</span>
<span class="project-skill"><abbr title="Application Program Interface">API</abbr> integration</span>
<span class="project-skill">Knockoutjs</span>
<span class="project-skill"><abbr title="Model–View–View-Model">MVVM</abbr> Pattern</span>
</div>
<p class="project-summary">
A single-page application featuring a map of a future vacation spot. The map is generated by Google's Map API and map markers are added in JavaScript to identify popular locations to visit. Features real-time list and map marker filtering to easily discover
locations. A listview on the left of the UI exists for simple browsing of locations. When a list item or map marker is clicked, an info window is opened with data from third-party APIs. Data from
<a href="https://developers.google.com/maps/documentation/streetview/" target="_blank">Google StreetView</a>,
<a href="https://developers.google.com/places/" target="_blank">Google Places</a>, and
<a href="https://www.mediawiki.org/wiki/API:Main_page" target="_blank">Wikipedia</a> is loaded asynchronously.
</p>
<p>
<a href="http://knockoutjs.com/" target="_blank">Knockoutjs 3.4.1</a> is used for data binding, auto-refreshing the UI, and templating. All JavaScript code is organized using the <abbr title="Model–View–View-Model">MVVM</abbr> pattern. <a href="https://jquery.com/" target="_blank">jQuery 3.1.1</a> is required for <a href="http://getbootstrap.com/components/" target="_blank">Bootstrap</a> components and is used for AJAX API queries.
</p>
<p>
GitHub Repository: <a href="https://github.com/ZGrauer/Vacation-Planner" target="_blank">https://github.com/ZGrauer/Vacation-Planner</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="recipe-book" tabindex="-1" role="dialog" aria-labelledby="recipeModalLabel" aria-hidden="true">
<div class="modal-dialog dark-color">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="recipeModalLabel">Recipe Book</h4>
</div>
<div class="modal-body">
<a href="http://recipes.zgrauerholz.com" target="_blank">
<img class="modal-img img-responsive img-thumbnail center" src="./images/Recipe-Book-800.png" alt="Recipe Book Angular 2 App">
</a>
<div class="text-center">
<span class="project-skill">Angular v4.0</span>
<span class="project-skill">TypeScript</span>
<span class="project-skill"><abbr title="Model–View–View-Model">MVVM</abbr> Pattern</span>
<span class="project-skill">Bootstrap</span>
<span class="project-skill">NoSQL</span>
</div>
<p class="project-summary">
A responsive Single Page Application (SPA), written in <a href="https://angular.io/" target="_blank">Angular v4.0</a>, to store personal recipes. The Recipe Book website allows recipes to be added, edited, or deleted based on
<a href="https://developers.google.com/identity/" target="_blank">Google OAuth</a> user
authorization & authentication. Images of the recipe can be specified as a URL. Recipe ingredients can be added to a separate Shopping List page by any user. Items can be added, edited, or deleted on the Shopping List page. All of this data
can be stored in a <a href="https://firebase.google.com/docs/database/" target="_blank">Firebase database</a> and retrieved later.
</p>
<p>
This project was generated with Angular CLI version 1.0.0-beta.32.3. The HTML/CSS templates utilize <a href="http://getbootstrap.com/" target="_blank">Bootstrap version 3.3.7</a> for styling.
</p>
<p>
GitHub Repository: <a href="https://github.com/ZGrauer/recipe-book" target="_blank">https://github.com/ZGrauer/recipe-book</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- TODO: add future project modals -->
</body>
</html>