-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
410 lines (391 loc) · 26 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title Tab -->
<link rel="icon" href="https://vectr.com/nsnyder1992/aSjKJATIB.svg?width=640&height=640&select=aSjKJATIBpage0"
type="image/icon type">
<title>Nick Snyder's Portfolio</title>
<!-- Stylesheets and fonts -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,300&family=Ubuntu:wght@300&family=Goldman&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/snowfall.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand grow" href="#">
<object data="https://vectr.com/nsnyder1992/aSjKJATIB.svg?width=640&height=640&select=aSjKJATIBpage0" width="50px" height="auto" type="image/svg+xml" loading="lazy"></object>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#about" id="about-link">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects" id="projects-link">Projects</a>
</li>
<li class="nav-item">
<span class="nav-link contact-me" id="contact-link">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Alerts section -->
<!-- Jumbotron Introduction -->
<div class="jumbotron light-theme snowfall">
<div id="snow"></div>
<div id="snow2"></div>
<div id="snow3"></div>
<div class="container header-container">
<div class="row text-center">
<div class="col-md-12">
<h1 class="display-2 text-center text-white snowfall-font">Nick Snyder</h1>
<p class="display-4 text-center text-white">Software Engineer</p>
<hr class="my-4 text-white" id="divider">
<div class="technologies">
<div class="scrollable">
<a href="#projects" class="nav-icon"><i class="fab fa-python text-center fa-10x grow" id="python"></i></a>
<a href="#projects" class="nav-icon"><i class="col fab fa-html5 text-center fa-10x grow" id="html"></i></a>
<a href="#projects" class="nav-icon"><i class="fas fa-database text-center fa-10x grow" id="database"></i></a>
<a href="#projects" class="nav-icon"><i class="col fab fa-css3-alt text-center fa-10x grow" id="css"></i></a>
<a href="#projects" class="nav-icon"><i class="col fab fa-js-square text-center fa-10x grow" id="js"></i></a>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class="col text-center">
<a class="btn btn-lg btn-primary" href="#projects" role="button">Projects</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Section-->
<div class="contact modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Contact Me!</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="https://formspree.io/f/mvovbgny" method="POST">
<div class="form-group">
<div class="container-fluid">
<div class="form-element row">
<label for="email" class="col-sm-3">Your email:</label>
<input type="email" class="form-control col-sm-9" id='email'
aria-describedby="contactMe" name="_replyto">
</div>
<div class="form-element row">
<label for="subject" class="col-sm-3">Subject:</label>
<input type="text" class="form-control col-sm-9" id='subject'
aria-describedby="contactMe" name="subject">
</div>
<div class="form-element row">
<label for="message" class="col-sm-3">Message:</label>
<textarea class="form-control col-sm-9" id="message" rows="3" name="message"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" style="background-image: none;" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary form-button">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- About Section -->
<div class="container-fluid about-container" id="about">
<div class="row">
<div class="col-xl-3 text-center history show headshot-container">
<a href="https://instagram.com/dennisthebrian?igshid=uviruza4tqk1" target="blank"><p class="brains-tag">@dennisthebrian</p>
<img id="headshot" src="assets/img/headshot.jpg" alt="My Picture" width="250px" loading="lazy"></a>
</div>
<div class="col-xl-9">
<h3 class="display-4 col-md-12 text-center text-white history show lead" id="about-header"><strong>About</strong></h3>
<div class="history show">
<p class="lead text-white">
I have been working in Industrial automation for 5 years as a Controls Engineer, which is a fancy way of saying Software Engineer for machines. Besides machine controls, my employers sought me out to complete special projects, because I am a self-starter and love to learn new things.
</p>
<p class="lead text-white">
I am always looking for new and exciting projects to work on! If you would like to contact me about your project, click the button below!
</p>
</div>
</div>
<!-- <div class="col-xl-4">
<h3 class="display-4 col-md-12 text-center text-white history show lead" id="about-header"><strong>Skills</strong></h3>
<div class="history show">
<canvas id="skillz-chart" width="100%" style="margin-bottom: 10px;"></canvas>
</div>
</div> -->
<div class="col-xl-12 history show text-center">
<button class="btn btn-lg btn-primary contact-me" data-toggle="modal" data-target="contactModal">Contact me!</button>
</div>
</div>
</div>
<!-- Projects Section -->
<div id="projects">
<div class="container-fluid projects-container">
<div class="row">
<h3 class="display-4 col-md-12 lead text-center" id="projects-header"><strong>Projects</strong></h3>
</div>
<div class="text-center">
<div class="scrollable-thumbnails">
<!-- Previous page arrow -->
<!-- <div id="prev-arrow-insert">
<div class="thumbnail-arrow" id="prev-thumbnails">
<i class="fas fa-angle-left fa-3x"></i>
</div>
</div> -->
<!-- Static Layout: https://nsnyder1992.github.io/static_layout/ -->
<div class="thumbnail static-thumbnail selected" id="static-thumbnail">
<h6 class="text-white">Static Layout</h6>
<i class="fab fa-html5 fa-2x text-center"></i>
<i class="fab fa-js-square text-center fa-2x"></i>
<i class="fab fa-css3-alt fa-2x text-center"></i>
</div>
<!-- CSS Creature: https://codepen.io/sicknick92/pen/QWEJeLq -->
<div class="thumbnail creature-thumbnail" id="creature-thumbnail">
<h6 class="text-white">CSS Creature</h6>
<i class="fab fa-html5 fa-2x text-center"></i>
<i class="fab fa-css3-alt fa-2x text-center"></i>
</div>
<!-- Fuji Seal -->
<div class="thumbnail fuji-thumbnail" id="fuji-thumbnail">
<h6 class="text-white">Parameter Extractor</h6>
<i class="fab fa-python text-center fa-2x"></i>
<i class="fas fa-database text-center fa-2x"></i>
</div>
<!-- API Challenge -->
<div class="thumbnail api-thumbnail" id="api-thumbnail">
<h6 class="text-white">Spotify API</h6>
<i class="fab fa-html5 fa-2x text-center"></i>
<i class="fab fa-js-square text-center fa-2x"></i>
<i class="fab fa-css3-alt fa-2x text-center"></i>
</div>
<!-- Azure IoT -->
<div class="thumbnail device-thumbnail" id="device-thumbnail">
<h6 class="text-white">Azure IoT Device</h6>
<i class="fab fa-python text-center fa-2x"></i>
<i class="fas fa-cloud text-center fa-2x"></i>
<i class="fab fa-linux text-center fa-2x"></i>
</div>
<!-- Serverless API -->
<div class="thumbnail serverless-thumbnail" id="serverless-thumbnail">
<h6 class="text-white">Azure Serverless App</h6>
<i class="fab fa-html5 fa-2x text-center"></i>
<i class="fab fa-js-square text-center fa-2x"></i>
<i class="fas fa-cloud text-center fa-2x"></i>
<i class="fab fa-css3-alt fa-2x text-center"></i>
</div>
<!-- RPG Game -->
<div class="thumbnail game-thumbnail" id="game-thumbnail">
<h6 class="text-white">Mini-Game</h6>
<i class="fab fa-js-square text-center fa-2x"></i>
</div>
<!-- Next page arrow -->
<!-- <div id="next-arrow-insert">
<div class="thumbnail-arrow" id="next-thumbnails" >
<i class="fas fa-angle-right fa-3x"></i>
</div>
</div> -->
</div>
<!-- <div id="pageable-dots"></div> -->
</div>
<hr class="my-2 text-white" id="divider2">
<!-- Static Layout content -->
<div class="container thumbnail-content static-content show" id="static-content">
<div class="row">
<h2 class="col-lg-12 text-center">Static Layout</h2>
<div class="col-lg-5 text-center">
<a href="https://nsnyder1992.github.io/static_layout/" target="blank" class="download"><img
src="assets/img/static_layout.PNG" alt="" class="thumbnail-img"></a>
</div>
<div class="col-lg-7 text-center">
<p class="lead text-left project-descriptions"><strong>Description: </strong> The second project done at Eleven Fifty Academy. I was
tasked with recreating a static website from a provided list. I choose <a href="https://www.kastapp.co/"
class="download">kastapp.co</a>. I used HTML, CSS & a small amount of JS.</p>
</div>
<div class="col-lg-12 text-center">
<a href="https://github.com/nsnyder1992/static_layout" target="blank" class="github-link"><i
class="fab fa-github github-link fa-3x grow"></i></a>
</div>
</div>
</div>
<!-- CSS Creature content -->
<div class="container thumbnail-content creature-content" id="creature-content">
<div class="row">
<h2 class="col-lg-12 text-center">CSS Creature</h2>
<div class="col-lg-5 text-center">
<a href="https://codepen.io/sicknick92/pen/QWEJeLq" target="blank"><img src="assets/img/jack-o-lanterns.PNG" alt="" class="thumbnail-img"></a>
</div>
<div class="col-lg-7 text-center">
<p class="lead text-left"><strong>Description: </strong> This project was the first project I did at Eleven Fifty Academy. We were instructed to create a creature using only HTML & CSS. I decided to create Jack-O-Lanterns that light up when you hover over them and add some motion to them to add more complexity</p>
</div>
<div class="col-lg-12 text-center">
<a href="https://codepen.io/sicknick92/pen/QWEJeLq" class="github-link" target="blank"><i class="github-link fab fa-codepen fa-3x grow"></i></a>
</div>
</div>
</div>
<!-- Parameter Extractor content -->
<div class="col-md-12 thumbnail-content fuji-content text-center" id="fuji-content">
<h2>Parameter Extractor</h2>
<p class="lead text-left"><strong>Description: </strong> I was asked to develop software to connect to a PLC (Programable Logic Controller) to download/upload parameters, of the current program recipe. Using python, wxpython, and an Ethernet/IP (a common server/client Industrial Communication protocol) python library, I was able to accomplish this task. I setup a database, so that admins could login and add/remove certain parameters or even UDTs (User Defined Tags). They are sort of like a <u>struct</u> in C, or a user defined datatype that contains variables of base datatypes, int, dint, etc., that are defined in a specific layout. I also made a feature for field-service engineers (FSEs) to be able to import/export parameters to CSV format. This came in handy when a operator would mess with the recipe and couldn't get it to work again. All the FSE had to do was load the last working recipe!</p>
<p class="lead text-left">This project is owned by Fuji Seal and is proprietary software and can not be
made public, but below are some screenshots</p>
<div class="text-center">
<img src="assets/img/Fuji_Veiw_Current_Recipe_values.png" alt=""
class="col-md-4 col-sm-6 img-fluid screenshots">
<img src="assets/img/FujiSealAdminUDTs.PNG" alt="" class="col-md-3 col-sm-6 img-fluid screenshots">
<img src="assets/img/FujiSealAdminTags.PNG" alt="" class="col-md-3 col-sm-6 img-fluid screenshots">
<img src="assets/img/FujiSealReadWrite.PNG" alt="" class="col-md-3 col-sm-6 img-fluid screenshots">
<img src="assets/img/FujiSeal.PNG" alt="" class="col-md-3 col-sm-6 img-fluid screenshots">
<img src="assets/img/FujiSealImportExportToCSV.PNG" alt="" class="col-md-3 col-sm-6 img-fluid screenshots">
</div>
</div>
<!-- API content -->
<div class="container thumbnail-content api-content" id="api-content">
<div class="row">
<h2 class="col-lg-12 text-center">Your Top Artists</h2>
<div class="col-lg-5 text-center" >
<a href="https://nsnyder1992.github.io/spotifyApi/" target="blank"><img src="assets/img/spotify-api.PNG" alt=""
class="thumbnail-img"></a>
</div>
<div class="col-lg-7">
<p class="lead text-left"><strong>Description:</strong> This looks up the top 5 artist you listen
to and displays them on this page! And if you click on them it will take you to their spotify page.</p>
<div class="col text-center">
<span class="btn btn-lg btn-primary" href="" role="button" id="spotify">Try it out!</span>
</div>
<div id="spotify-insert"></div>
</div>
<div class="col-lg-12 text-center">
<a href="https://github.com/nsnyder1992/spotifyApi" target="blank" class="github-link" target="blank"><i
class="fab fa-github github-link fa-3x grow"></i></a>
</div>
</div>
</div>
<!-- IoT device content -->
<div class="col-md-12 thumbnail-content device-content text-center" id="device-content">
<h2>Azure IoT Device</h2>
<div class="lead text-left">
<p class="lead text-left"><strong>Description:</strong> This Flask application is running on a raspberry pi, and it sends telemetry data to an Azure IoT Hub. I created a custom Flask CLI command, so that I could use cron to run it every 10 minutes. Why Flask? Well I plan on using Flask to create a small api, so that I can view my data locally. Also it is easy to hide and save my environment variables with the dotenv library. So, why not use Flask!</p>
<div class="text-center" style="margin-bottom: 20px;">
<img src="assets/img/rpi-iot-terminal.PNG" alt="" class="col-md-5 img-fluid screenshots-lg">
<img src="assets/img/azure-terminal.PNG" alt="" class="col-md-5 img-fluid screenshots-lg">
<img src="assets/img/rpi-crontab.PNG" alt="" class="col-md-5 img-fluid screenshots-lg">
</div>
</div>
<div class="col-lg-12 text-center">
<a href="https://github.com/nsnyder1992/rpi-iot-test" target="blank" class="github-link" target="blank"><i
class="fab fa-github github-link fa-3x grow"></i></a>
</div>
</div>
</div>
<!-- Serverless API content -->
<div class="container thumbnail-content serverless-content" id="serverless-content">
<div class="row">
<h2 class="col-lg-12 text-center">Serverless Azure IoT App</h2>
<div class="col-lg-5 my-4">
<div class="spinner-border text-secondary azure-loading" role="status" id="azure-loading">
<span class="sr-only">Loading...</span>
</div>
<div id="device-insert">
<a href="https://nsnyder1992.github.io/iot-serverless-app/" target="blank" id="azure-link">
<i class="fas fa-cloud text-center fa-10x text-white" id="azure-cloud"></i>
</a>
</div>
</div>
<div class="col-lg-7 my-4">
<p class="lead text-left"><strong>Description:</strong> Using Azure's cloud platform, I created this
application by routing the messages sent from my IoT Device project's IoT Hub to a Function App. The Function App then
logs the message in a NoSQL DB. When you click the button below it sends a request to the Function app and
gets the latest update. Now please keep in mind, in order to keep the cost down for the IoT Hub and the Function App, I
only update this information every 10 minutes. You can check the code out on my github. Click the github icon
below.
</p>
<div class="col text-center">
<span class="btn btn-lg btn-primary" href="" role="button" id="azure-btn">Try it out!</span>
</div>
<div class="contianer text-center">
<p class="text-center">Next available refresh: <strong><span id="azure-min">Click button</span></strong></p>
</div>
</div>
<div class="col-lg-12 text-center">
<a href="https://github.com/nsnyder1992/iot-serverless-app" target="blank" class="download"
target="blank"><i class="fab fa-github fa-3x grow"></i></a>
</div>
</div>
</div>
<!-- RPG Game content -->
<div class="container thumbnail-content game-content" id="game-content">
<div class="row">
<h2 class="col-lg-12 text-center">Mini-Game</h2>
<div class="col-lg-5 text-center">
<a href="https://nsnyder1992.github.io/rpg-mini-game/" target="blank" class="download" target="blank"><img
src="assets/img/rpg.PNG" alt="" class="thumbnail-img"></a>
</div>
<div class="col-lg-7">
<p class="lead text-left"><strong>Description:</strong> I decided to make a mini-game to enhance my
javascript understanding. I used a framework called <a href="https://phaser.io/"
class="download">phaser.io</a>. This made the task a lot easier and I learned to use MVC to divide
up my code so it was easier to maintain. If you would like to play it click the image!</p>
</div>
<div class="col-lg-12 text-center">
<a href="https://github.com/nsnyder1992/rpg-mini-game" target="blank" class="github-link" target="blank"><i
class="fab fa-github fa-3x github-link grow"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Section -->
<div class="container footer">
<div class="row text-center">
<div class="col-md-12">
<a href="https://github.com/nsnyder1992" target="blank"><i class="fab fa-github fa-2x grow"></i></a>
<a href="https://www.linkedin.com/in/nick-snyder-47238a139/" target="blank"><i class="fab fa-linkedin-in fa-2x grow"></i></a>
<a href="https://codepen.io/sicknick92" target="blank"><i class="fab fa-codepen fa-2x grow"></i></a>
<a href="assets/docs/nick_snyder_resume.pdf" download="nick_snyder_resume.pdf"><i class="fas fa-file fa-2x grow"></i></a>
</div>
</div>
</div>
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<!-- BOOTSTRAPS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<!-- AM CHART JS-->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/continentsLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<!-- Assets -->
<script src="assets/js/index.js"></script>
<script src="assets/js/spotifyapi.js"></script>
<script src="assets/js/severlessApi.js"></script>
</body>
</html>