-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
363 lines (337 loc) · 18.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Nicholas Quisler's Portfolio">
<meta property="og:type" content="website">
<meta property="og:url" content="https://nicholasquisler.github.io">
<meta property="og:image" content="https://nicholasquisler.github.io/images/preview.PNG">
<title>Nicholas Quisler</title>
<link rel="shortcut icon" href="./images/me.jpg" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<img src="./images/me.png" alt="Nicholas Quisler" id="me">
<h2>Nicholas Quisler</h2>
<p class="caption">Credit Data Analyst at <br>Foundation Finance Company LLC</p>
<div class="email">
<a href="mailto: nquisler@gmail.com" class="emailImg"><span>✉</span></a>
<a href="mailto: nquisler@gmail.com" target="_blank" class="emailText">
<p>nquisler@gmail.com</p>
</a>
</div>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#skills">Technical Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div>
<a href="https://www.linkedin.com/in/nicholas-q" target="_blank"><img src="./images/linkedIn.png" alt="linkedIn" class="linkIcons"></a>
<a href="https://github.com/nicholasquisler" target="_blank"><img src="./images/github64.png" alt="gitHub" class="linkIcons"></a>
<a href="https://www.codecademy.com/profiles/1clownfish2" target="_blank"><img src="./images/codecademy.png" alt="codecademy" class="linkIcons"></a>
</div>
</nav>
<div id="main" class="main">
<button class="openbtn" onclick="openNav()">☰</button>
</div>
<script>
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mySidebar").style.width = "300px";
}
/* Set the width of the sidebar to 0 */
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("me").style.width = "135px";
document.getElementById("me").style.height = "135px";
}
</script>
<div class="about" id="about">
<h2>About Me</h2>
<div class="borderUnderline"></div>
<p>
I’m currently employed as a Credit Data Analyst at Foundation Finance Company LLC. Before my employment, I’ve spent my undergraduate earning my bachelor’s in Physics with a minor in Applied Math, Astronomy, and Natural Science. Concurrently, I’ve been an office assistant for multiple departments, Math Club President & Vice President, and a STEM tutor. After graduating, I’ve devoted my time to pursuing technical skills and certificates, giving me the skills needed to excel in today’s rapidly changing workforce.
</p>
</div>
<div class="skills" id="skills">
<h2>Technical Skills</h2>
<div class="borderUnderline"></div>
<div class="skillbox">
<div>
<h3>Programming Languages</h3>
<p>Python, JavaScript, Java, SQL(PostgreSQL, MongoDB), HTML5/CSS3, R, AMPL, Wolfram Language (Mathematica)</p>
</div>
<div class="borderUnderline"></div>
<div>
<h3>Frameworks / Libraries / RTE</h3>
<p><strong>JavaScript:</strong> Express.js, React.js, Redux.js, Node.js</p>
<p><strong>Python:</strong> Pandas, SciPy, NumPy, Matplotlib, Seaborn, Statsmodels</p>
</div>
<div class="borderUnderline"></div>
<div>
<h3>DevOps / Infrastructure / Other</h3>
<p>Git, GitHub, Heroku, Firebase, Visual Studio Code, Android Studio, Microsoft Excel, Tableau, Jupyter Notebook</p>
</div>
</div>
</div>
<div class="projects" id="projects">
<h2>My Projects</h2>
<div class="borderUnderline"></div>
<div>
<h3>Full-Stack Engineering</h3>
<div class="innerds full-stack">
<div class="some_innerd">
<div class="img_innerd">
<a href="https://restaurant-review-pern.herokuapp.com/" target="_blank">
<img src="./images/restaurantReviews.PNG" alt="restaurant review preview">
</a>
</div>
<div class="proj_desc">
<figcaption>(Closed) Restaurant Reviews</figcaption>
<div class="borderUnderline_desc"></div>
<p id="desc">I used a PERN stack to create a site where users can create a restaurant and add
respective details about that website including a location and price range. From there, they
can add reviews to any restaurant to talk about their experience. The database is hosted and
deployed with Heroku. (As of Dec. 2022 this will no longer work as Heroku no longer has their free plan.)
<br>
<br>
<a href="https://restaurant-review-pern.herokuapp.com/" target="_blank" style="text-decoration:underline;">Demo (No longer available)</a>
/
<a href="https://github.com/nicholasquisler/restaurantReview" target="_blank" style="text-decoration:underline;">Code</a>
</p>
</div>
</div>
<div class="some_innerd">
<div class="img_innerd">
<a href="/discord-clone/" target="_blank">
<img src="./images/discordClone.PNG" alt="discord clone preview">
</a>
</div>
<div class="proj_desc">
<figcaption>Discord Clone</figcaption>
<div class="borderUnderline_desc"></div>
<p id="desc">I mainly used my knowledge of React and Redux with a created Firebase database to
allows users to create Discord-like channels and communicate in them by signing in with
their Google account.
<br>
<br>
<a href="/discord-clone/" target="_blank" style="text-decoration:underline;">Demo</a>
/
<a href="https://github.com/nicholasquisler/discord-clone" target="_blank" style="text-decoration:underline;">Code</a>
</p>
</div>
</div>
<div class="some_innerd">
<div class="img_innerd">
<a href="/Weather/" target="_blank">
<img src="./images/WeatherCrop.png" alt="weather app preview">
</a>
</div>
<div class="proj_desc">
<figcaption>Weather App</figcaption>
<div class="borderUnderline_desc"></div>
<p id="desc">I mainly used my knowledge of React with
the OpenWeather API to build a website that allows users to fetch the temperature and
forecast details from a given city or zip-code.
<br>
<br>
<a href="/Weather/" target="_blank" style="text-decoration:underline;">Demo</a>
/
<a href="https://github.com/nicholasquisler/Weather" target="_blank" style="text-decoration:underline;">Code</a>
</p>
</div>
</div>
<div class="some_innerd">
<div class="img_innerd">
<a href="http://juvenile-loaf.surge.sh/" target="_blank">
<img src="./images/Jamming.PNG" alt="spotify playlist creator preview">
</a>
</div>
<div class="proj_desc">
<figcaption>Spotify Playlist Creator</figcaption>
<div class="borderUnderline_desc"></div>
<p id="desc">I mainly used my knowledge of React with the
Spotify API to build a website that allows me to search the Spotify library, create a custom
playlist, then save to my Spotify account.
<br>
<br>
<a href="http://juvenile-loaf.surge.sh/" target="_blank" style="text-decoration:underline;">Demo</a>
/
<a href="https://github.com/nicholasquisler/jamming" target="_blank" style="text-decoration:underline;">Code</a>
</p>
</div>
</div>
</div>
<div class="borderUnderline"></div>
<h3>Data Scientist: Analytics Specialist</h3>
<div class="innerds full-stack">
<div class="some_innerd">
<div class="img_innerd">
<a href="https://nicholasquisler.github.io/BioDiversity/"
target="_blank">
<img src="./images/biodiversity.PNG" alt="Biodiversity Website Preview">
</a>
</div>
<div class="proj_desc">
<figcaption>Biodiversity in National Parks</figcaption>
<div class="borderUnderline_desc"></div>
<p id="desc">This project uses Python modules Pandas, Matplotlib, Seaborn, and SciPy to
understand characteristics and correlations about species and their conservation status, and their relationship
to the national parks.
<br>
<br>
<a href="https://nicholasquisler.github.io/BioDiversity/" target="_blank" style="text-decoration:underline;">Demo</a>
/
<a href="https://github.com/nicholasquisler/BioDiversity/" target="_blank" style="text-decoration:underline;">Code</a>
</p>
</div>
</div>
<div class="some_innerd">
<div class="img_innerd">
<a href="https://nicholasquisler.github.io/Life-Expectancy-and-GDP/"
target="_blank">
<img src="./images/LEAB_GDP.png" alt="Life Expectancy vs GDP">
</a>
</div>
<div class="proj_desc">
<figcaption>Life Expectancy and GDP</figcaption>
<div class="borderUnderline_desc"></div>
<p id="desc">This project uses Python modules Pandas, Matplotlib, and Seaborn to investigate probable correlations between the economic output of a country,
and the life expectancy at birth of its citizens.
<br>
<br>
<a href="https://nicholasquisler.github.io/Life-Expectancy-and-GDP/" target="_blank" style="text-decoration:underline;">Demo</a>
/
<a href="https://github.com/nicholasquisler/Life-Expectancy-and-GDP" target="_blank" style="text-decoration:underline;">Code</a>
</p>
</div>
</div>
<div class="some_innerd">
<div class="img_innerd">
<a href="https://public.tableau.com/app/profile/nicholas.quisler/viz/DeadlyVolcanoes/Dashboard1?publish=yes"
target="_blank">
<img src="./images/Tableau.png" alt="tableau volcano poster">
</a>
</div>
<div class="proj_desc">
<figcaption>Deadly Volcanoes</figcaption>
<div class="borderUnderline_desc"></div>
<p id="desc">This project uses Tableau to load, wrangle,
clean, and tidy publicly available data on volcanic eruptions.
Then I built a visually appealing, effective, and interactive
visualization to tell a compelling data story.
<br>
<br>
<a href="https://public.tableau.com/app/profile/nicholas.quisler/viz/DeadlyVolcanoes/Dashboard1?publish=yes" target="_blank" style="text-decoration:underline;">Interactive Poster</a>
</p>
</div>
</div>
</div>
<div class="borderUnderline"></div>
<h3>Android App Development With Java</h3>
<div class="innerds noscroll">
<div class="some_innerd otherin">
<div class="img_innerd">
<a href="https://github.com/nicholasquisler/Unquote"
target="_blank">
<img src="./images/unquote.PNG" alt="android app preview">
</a>
</div>
<div class="proj_desc">
<figcaption>Unquote Trivia App</figcaption>
<div class="borderUnderline_desc"></div>
<p id="desc">I used my knowledge of Java with Android Studio to develop a trivia app where users
answer a series of multiple choice questions. The questions are randomized and they have
the ability to see their score and try again.
<br>
<br>
<a href="https://github.com/nicholasquisler/Unquote/raw/main/app/Unquote.apk" target="_blank" style="text-decoration:underline;">Download APK</a>
/
<a href="https://github.com/nicholasquisler/Unquote" target="_blank" style="text-decoration:underline;">Code</a>
</p>
</div>
</div>
</div>
<div class="borderUnderline"></div>
<h3>Undergraduate Research</h3>
<div class="innerds noscroll">
<div class="some_innerd otherin">
<div class="img_innerd">
<a href="docs/SMCPA - Exploring Quasars Through Their Broad Emission Line Shifts and Radio Morpholo.pdf"
target="_blank">
<img src="./images/poster.PNG" alt="research poster">
</a>
</div>
<div class="proj_desc">
<figcaption>Exploring Quasars Through Their
Broad Emission Line Shifts
and Radio Morphology
</figcaption>
<div class="borderUnderline_desc"></div>
<p id="desc">For my research I explored and filtered large amounts of data to create statistical comparisons of various
properties/measures of Balmer Hβ λ4861Å and MgII doublet β λ2800Å emission lines of quasars.
I was awarded an Undergraduate Research award for the 2019-2020 academic year from the
Wisconsin Space Grant Consortium. I was able to present my findings at the 31st Annual
Wisconsin Space Conference and the 2021 UWSP College of Letters & Science Undergraduate
Research Symposium.
<br>
<br>
<a href="docs/SMCPA - Exploring Quasars Through Their Broad Emission Line Shifts and Radio Morpholo.pdf" target="_blank" style="text-decoration:underline;">PDF</a>
/
<a href="https://drive.google.com/file/d/1IrZzx35TzcxNTxNKO34ePNCD06cNRZ63/view" target="_blank" style="text-decoration:underline;">Video</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="contact" id="contact">
<h2>Contact Me</h2>
<div class="borderUnderline"></div>
<form action="https://formsubmit.co/34e7312da278aa9e78cc4e79574f4a09" method="POST">
<div class="two-cols">
<div class="col-6">
<fieldset>
<legend>Name:</legend>
<input name="name" type="text" class="form-control" id="name" placeholder=" Your name..."
required="">
</fieldset>
</div>
<div class="col-6">
<fieldset>
<legend>Email:</legend>
<input name="email" type="text" class="form-control" id="email" placeholder=" Your email..."
required="">
</fieldset>
</div>
</div>
<div class="col-12">
<fieldset>
<legend title="subject">Subject:</legend>
<input name="subject" type="text" class="form-control" id="subject" placeholder=" Subject..."
required="">
</fieldset>
</div>
<div class="col-12">
<fieldset title="message">
<legend>Message:</legend>
<textarea name="message" rows="6" class="form-control" id="message" placeholder=" Your message..."
required=""></textarea>
</fieldset>
</div>
<div class="col-12">
<fieldset>
<button type="submit" id="form-submit" class="button">Send Message</button>
</fieldset>
</div>
</form>
<i class="uil uil-arrow-up scrollup-icon"></i>
</div>
<footer></footer>
</body>
</html>