-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
299 lines (293 loc) · 18.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Zeke Graves Portfolio</title>
<!--jQuery-->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/5.5.5/firebase.js"></script>
<script>
//Initalialize the Form Select and Modal Trigger for Materialize
$(document).ready(function() {
$('select').formSelect();
$('.modal').modal();
});
</script>
</head>
<body>
<nav class="cyan darken-2">
<div class="nav-wrapper">
<div class="container">
<a href="./index.html" class="brand-logo">Zeke Graves</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="index.html">About Me</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li><a href="index.html">About Me</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
<main>
<div class="container">
<br />
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title cyan-text text-darken-2">Portfolio</span>
<div class="row">
<div class="col s12 m6 l4">
<div class="card small portfolio-img">
<div class="card-image">
<img src="assets/images/arp_cropped.jpg">
</div>
<div class="card-content center-align white-text cyan darken-2">
<span class="card-title">Memory Matrix Game</span>
</div>
<div class="card-action center-align grey lighten-5">
<a href="https://zinc-glaze.github.io/memory-matrix/" target="_blank" class="cyan-text">Demo</a>
<a href="https://github.com/zinc-glaze/memory-matrix" target="_blank" class="cyan-text">Code</a>
<a class="cyan-text modal-trigger" href="#memory-matrix-modal">Info</a>
</div>
</div>
</div>
<!-- Project Info Modal -->
<div id="memory-matrix-modal" class="modal">
<div class="modal-content">
<h4>Memory Matrix</h4>
<p>This is a memory game that presents the user with 12 image tiles. The user must click each tile without clicking the same one twice. The tiles are rearranged after each click. The game keeps score of how many unique tiles the user has clicked and the high score from each session.</p>
<br/>
<p>The main purpose of this app is to practice creating a React app, composing multiple components, and managing state. It demonstrates ability with the following tools and techniques:
<ul class="collection">
<li class="collection-item">React.js for front-end framework, logic, and state management</li>
<li class="collection-item">CSS for UI design, layout, and animations</li>
<li class="collection-item">Javascript/JSX for app logic and interactive elements</li>
<li class="collection-item">Github for app deployment and hosting</li>
</ul>
</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card small portfolio-img">
<div class="card-image">
<img src="assets/images/placeholder_image_08.JPG">
</div>
<div class="card-content center-align white-text cyan darken-2">
<span class="card-title">Scrape Left</span>
</div>
<div class="card-action center-align grey lighten-5">
<a href="https://scrape-left.herokuapp.com/" target="_blank" class="cyan-text">Demo</a>
<a href="https://github.com/zinc-glaze/scrape-left" target="_blank" class="cyan-text">Code</a>
<a class="cyan-text modal-trigger" href="#scrape-left-modal">Info</a>
</div>
</div>
</div>
<!-- Project Info Modal -->
<div id="scrape-left-modal" class="modal">
<div class="modal-content">
<h4>Scrape Left</h4>
<p>This app allows the user to easily scrape the most recent articles from Truthout.org, save them to a database, and display them in a single list with a summary and link. Once scraped, the articles can be saved and commented on. From the Saved view, the user can add notes which are then saved and displayed with the relevant article. Articles can also be deleted.</p>
<br/>
<p>The main purpose of this app is to create an aggregator that can be repurposed to scrape and save from any website that posts frequent updates. It demonstrates ability with the following tools and techniques:
<ul class="collection">
<li class="collection-item">Handlebars and HTML for web page templates and structure</li>
<li class="collection-item">Materialize for CSS framework</li>
<li class="collection-item">Node.js for Javascript runtime environment</li>
<li class="collection-item">Express.js for server setup and routing</li>
<li class="collection-item">Javascript for app logic and interactive elements</li>
<li class="collection-item">jQuery for additional Javascript functionality and AJAX calls to server</li>
<li class="collection-item">Heroku for app deployment and hosting</li>
<li class="collection-item">MVC design pattern for app architecture</li>
<li class="collection-item">MongoDB for data persistance</li>
<li class="collection-item">Mongoose, Cheerio, and Axios npm packages</li>
</ul>
</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card small portfolio-img">
<div class="card-image">
<img src="assets/images/burger_background.jpg">
</div>
<div class="card-content center-align white-text cyan darken-2">
<span class="card-title">Burger Devourer</span>
</div>
<div class="card-action center-align grey lighten-5">
<a href="https://burger-devourer-app.herokuapp.com/" target="_blank" class="cyan-text">Demo</a>
<a href="https://github.com/zinc-glaze/Burger" target="_blank" class="cyan-text">Code</a>
<a class="cyan-text modal-trigger" href="#burger-devourer-modal">Info</a>
</div>
</div>
</div>
<!-- Project Info Modal -->
<div id="burger-devourer-modal" class="modal">
<div class="modal-content">
<h4>Burger Devourer</h4>
<p>This app allows the user to create different burgers that they would like to consume and add them to a MySQL database. These burgers will be displayed to the user with a "Devour" button. On clicking this button, the burger will be consumed, it's status will be changed to "devoured" in the database, and it will be displayed to the user in a list of "Consumed" burgers.</p>
<br/>
<p>The main purpose of this app is to demonstrate ability with the following tools and techniques, especially Handlebars and custom ORMs:
<ul class="collection">
<li class="collection-item">Handlebars and HTML for web page templates and structure</li>
<li class="collection-item">Materialize for CSS framework</li>
<li class="collection-item">Node.js for Javascript runtime environment</li>
<li class="collection-item">Express.js for server setup and routing</li>
<li class="collection-item">Javascript for app logic and interactive elements</li>
<li class="collection-item">jQuery for additional Javascript functionality and AJAX calls to server</li>
<li class="collection-item">Heroku for app deployment and hosting</li>
<li class="collection-item">MVC design pattern for app architecture</li>
</ul>
</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card small portfolio-img">
<div class="card-image">
<img src="assets/images/placeholder_image_11.JPG">
</div>
<div class="card-content center-align white-text cyan darken-2">
<span class="card-title">Zombie Friend Finder</span>
</div>
<div class="card-action center-align grey lighten-5">
<a href="https://zombie-friend-finder.herokuapp.com/" target="_blank" class="cyan-text">Demo</a>
<a href="https://github.com/zinc-glaze/FriendFinder" target="_blank" class="cyan-text">Code</a>
<a class="cyan-text modal-trigger" href="#zombie-friend-finder-modal">Info</a>
</div>
</div>
</div>
<!-- Project Info Modal -->
<div id="zombie-friend-finder-modal" class="modal">
<div class="modal-content">
<h4>Zombie Friend Finder</h4>
<p>This app creates a compatibility-based "FriendFinder" application -- basically a dating app. This full-stack site takes in results from the users' surveys, then compares their answers with those from other users. The app will then display the name and picture of the user with the best overall match. The app includes input validation to prevent the user submitting empty data fields and posting them to the API (../api/friends).</p>
<br/>
<p>This app uses the following tools:
<ul class="collection">
<li class="collection-item">HTML for web page structure</li>
<li class="collection-item">Materialize for CSS framework</li>
<li class="collection-item">Node.js for Javascript runtime environment</li>
<li class="collection-item">Express.js for server setup and routing</li>
<li class="collection-item">Javascript for app logic and interactive elements</li>
<li class="collection-item">jQuery for additional Javascript functionality and AJAX calls to server</li>
<li class="collection-item">Heroku for app deployment and hosting</li>
</ul>
</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card small portfolio-img">
<div class="card-image">
<img src="assets/images/placeholder_image_01.JPG">
</div>
<div class="card-content center-align white-text cyan darken-2">
<span class="card-title">Zmart</span>
</div>
<div class="card-action center-align grey lighten-5">
<a href="https://github.com/zinc-glaze/Zmart" target="_blank" class="cyan-text">Demo</a>
<a href="https://github.com/zinc-glaze/Zmart" target="_blank" class="cyan-text">Code</a>
<a class="cyan-text modal-trigger" href="#zmart-modal">Info</a>
</div>
</div>
</div>
<!-- Project Info Modal -->
<div id="zmart-modal" class="modal">
<div class="modal-content">
<h4>ZMart</h4>
<p>This app creates a storefront with separate modules for customers, managers, and supervisors to perform tasks. The app takes in orders from customers and depletes stock from the store's inventory. The app allows managers to add new products and track and replenish inventory.The supervisor module allows you to track product sales across your store's departments and then provide a summary of the highest-grossing departments in the store.</p>
<br/>
<p>This app uses the following tools:
<ul class="collection">
<li class="collection-item">MySQL for data persistence and database queries</li>
<li class="collection-item">Node.js for Javascript runtime environment</li>
<li class="collection-item">Javascript for app logic</li>
<li class="collection-item">inquirer npm package for user input</li>
<li class="collection-item">cli-table npm package for formatting data tables for display</li>
<li class="collection-item">mysql npm package for database queries</li>
</ul>
</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card small portfolio-img">
<div class="card-image">
<img src="assets/images/placeholder_image_12.JPG">
</div>
<div class="card-content center-align white-text cyan darken-2">
<span class="card-title">Comics Time Machine</span>
</div>
<div class="card-action center-align grey lighten-5">
<a href="https://zinc-glaze.github.io/ComicsTimeMachine/" target="_blank" class="cyan-text">Demo</a>
<a href="https://github.com/zinc-glaze/ComicsTimeMachine" target="_blank" class="cyan-text">Code</a>
<a class="cyan-text modal-trigger" href="#comics-time-machine-modal">Info</a>
</div>
</div>
</div>
<!-- Project Info Modal -->
<div id="comics-time-machine-modal" class="modal">
<div class="modal-content">
<h4>Comics Time Machine</h4>
<p>This is a entertainment and shopping app that retrieves Marvel comic books that were published the week of your birthday (or any other date). The app queries the Marvel API and returns a selection of comics (with image thumbnails) for the submitted date. When the user clicks one of these thumbnails, the app queries the eBay API to return the top result for that comic</p>
<br/>
<p>The main purpose of this app is to demonstrate ability interfacing with APIs. It uses the following tools and techniques:
<ul class="collection">
<li class="collection-item">HTML</li>
<li class="collection-item">jQuery for Javascript library and AJAX calls</li>
<li class="collection-item">Materialize for CSS framework</li>
<li class="collection-item">Javascript for app logic and interactive elements</li>
<li class="collection-item">Marvel and eBay APIs</li>
</ul>
</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- SCRIPTS-->
<!-- jQuery -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- Materialize -->
<script type="text/javascript" src="assets/js/materialize.min.js"></script>
<!-- Moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<!-- App -->
<script type="text/javascript" src="assets/js/script.js"></script>
</body>