-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·454 lines (420 loc) · 20 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Logan Krumbhaar's Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="hamburger-menu.css">
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin&display=swap" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<nav class="header">
<a href="#about-me" class="logo"><img class="logo" src="img/logo.svg" alt="Logan Krumbhaar"></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"><span class="sr-only">Menu</span></span></label>
<ul class="menu">
<li><a href="#about-me">About Me</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact" class="contact-link">Contact</a></li>
</ul>
</nav>
<main>
<header>
<h1>Web Developer and Application Designer</h1>
<div>
<p>I build solid software from the ground up that people depend on.</p>
</div>
<img class="avatar" src="img/avatar.svg" alt="Logan Krumbhaar Avatar">
</header>
<section id="about-me" class="about-me">
<h2>Hi, I'm Logan. Nice to meet you.</h2>
<div>
<p class="long-paragraph">
I am a web and application developer who graduated from Thinkful's Full Stack Flex web development program.
My favorite programming languages and platforms are Javascript, Java, C/C++, Android, and HTML5.
I have made several Android and desktop applications that many people have found useful, accruing more than 500,000 total downloads.
One of the most enjoyable things about programming to me is how each new project is like a puzzle.
You have to figure out how the broader project architecture will fit together,
as well as find and fix bugs, which can be like solving an interesting mystery itself.
</p>
</div>
<div>
<p class="long-paragraph">
When I'm not coding, I enjoy spending my time relaxing in nature or bettering myself.
Destressing by walking in lush green forests and national parks is one of my favorite things to do.
I'm very health conscious and you can often catch me working out or snacking on some kale.
Although I try to give myself time away from the screen when I'm not working,
I often find myself drawn back to invest time in personal projects as well as learning new things.
In addition to programming, I'm interested in a bunch of different topics such as history, science, and psychology.
</p>
</div>
</section>
<section id="portfolio" class="portfolio">
<h2>Portfolio</h2>
<div class="row">
<div class="col-4">
<div class="portfolio-card">
<img src="img/cryptodash-card.png" alt="Cryptodash">
<h3>Cryptodash</h3>
<p>A React/NextJS web app I created which allows you to import and manage cryptocurrency portfolios.</p>
<div><span class="portfolio-read-more" data-modal-num="9">Read more...</span></div>
</div>
</div>
<div class="col-4">
<div class="portfolio-card">
<img src="img/wifimouse-icon.svg" alt="WifiMouse Icon">
<h3>WifiMouse</h3>
<p>An Android application I developed which turns your phone into a wireless mouse and keyboard with many useful features.</p>
<div><span class="portfolio-read-more" data-modal-num="1">Read more...</span></div>
</div>
</div>
<div class="col-4">
<div class="portfolio-card">
<img src="img/sticky-notes.png" alt="Sticky Notes App">
<h3>Sticky Notes</h3>
<p>Windows app written in C# that allows users to post realistic looking sticky notes on their desktop. Downloaded over 370k times on the Windows Store!</p>
<div><span class="portfolio-read-more" data-modal-num="8">Read more...</span></div>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="portfolio-card">
<img src="img/forum-profile-pic.svg" alt="Forum Icon">
<h3>Forum App</h3>
<p>This is a full-stack forum/disccusion board app created to showcase my knowledge in React, Node, and PostgreSQL.</p>
<div><span class="portfolio-read-more" data-modal-num="4">Read more...</span></div>
</div>
</div>
<div class="col-4">
<div class="portfolio-card">
<img src="img/backpack-guy.jpg" alt="Clothing Store Icon">
<h3>Clothing Store Demo</h3>
<p>Here's another full-stack app, this one is a proof of concept clothing store app also utilizing React, Node, and PostgreSQL.</p>
<div><span class="portfolio-read-more" data-modal-num="5">Read more...</span></div>
</div>
</div>
<div class="col-4">
<div class="portfolio-card">
<img src="img/qbe.png" alt="Quick Box2D Editor">
<h3>Quick Box2D Editor</h3>
<p>Here is a scene editor I made for Box2D, a physics engine.</p>
<div><span class="portfolio-read-more" data-modal-num="6">Read more...</span></div>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="portfolio-card">
<img src="img/catris.png" alt="Catris HTML5 Game">
<h3>Catris</h3>
<p>Catris is a cat-themed game similar to the arcade-classic Tetris.</p>
<div><span class="portfolio-read-more" data-modal-num="7">Read more...</span></div>
</div>
</div>
<div class="col-4">
<div class="portfolio-card">
<img src="img/zombie-icon.png" alt="Zombie Icon">
<h3>Zombie Apocalypse Quiz</h3>
<p>This is an online quiz web app developed during my time at Thinkful while taking part in their Full Stack Flex Course.</p>
<div><span class="portfolio-read-more" data-modal-num="2">Read more...</span></div>
</div>
</div>
<div class="col-4">
<div class="portfolio-card">
<img src="img/hiking-app-logo.svg" alt="Hiking App Icon">
<h3>Hiking Trails Search</h3>
<p>Tool to find nearby hiking trails and learn about them. Uses hikingproject.com's API as well as the Google Maps API.</p>
<div><span class="portfolio-read-more" data-modal-num="3">Read more...</span></div>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="contact-info" id="contact">
<div>
<h2>Location</h2>
<p>King of Prussia, PA</p>
</div>
<div>
<h2>Around the Web</h2>
<div class="circle-button-row">
<a class="circle-button" href="https://github.com/krogank9/" target="_blank">
<i class="fa fa-fw fa-github"><span class="sr-only">GitHub</span></i>
</a>
<a class="circle-button" href="https://www.linkedin.com/in/logan-krumbhaar-691175153" target="_blank">
<i class="fa fa-fw fa-linkedin"><span class="sr-only">LinkedIn</span></i>
</a>
<a class="circle-button" href="https://www.youtube.com/channel/UCpH93goetR0u9ejeAR8M4Nw" target="_blank">
<i class="fa fa-fw fa-youtube"><span class="sr-only">YouTube</span></i>
</a>
</div>
</div>
<div>
<h2>Contact</h2>
<p><a href="mailto:[email protected]" target="_blank">[email protected]</a></p>
</div>
</div>
<div class="copyright">
Copyright © Logan Krumbhaar 2019
</div>
</footer>
<!-- =========== Portfolio Modals =========== -->
<!-- Modal popup #1 -->
<div class="portfolio-modal-container hide modal-1">
<div class="portfolio-modal" id="portfolio-modal-1">
<div class="portfolio-x-container">
<span class="portfolio-x-button">
<i class="fa fa-3x fa-times"></i>
</span>
</div>
<div class="portfolio-modal-contents">
<h2>WifiMouse</h2>
<div class="portfolio-links">
<a href="https://wifimouse.github.io/" target="_blank">Live app</a>
/ <a href="https://github.com/krogank9/WifiMouseServer" target="_blank">Server source code</a>
/ <a href="https://github.com/krogank9/WifiMouse" target="_blank">Client source code</a>
</div>
<img class="portfolio-image" src="img/wifimouse-screenshot.jpg" alt="WifiMouse Screenshot">
<p class="long-paragraph mb-5">
This app turns your phone into a super compact yet full-featured wireless keyboard for your computer.
It has many useful features such as screen mirroring, CPU/process monitoring, wireless file transfer, and an application launcher.
This app has 2 components; the Android client and the cross-platform desktop server.
Simply download the 2 applications, connect to the same WiFi network (or connect via Bluetooth if on Mac/Linux),
choose a remote and enjoy the convenience of full control over your computer from your pocket.
Perfect for watching Netflix or for controlling Home Media Centers.
<br>
<br>
To create WifiMouse I used Java for the Android app and C/C++ with Qt for the server.
I had to write my own small library called fakeinput to simulate user input and trigger a variety of user actions like key presses, mouse movements, and unicode input.
The server compiles cross platform with Windows, Mac, and Linux specific code separated into their own files.
Includes an encryption technique that uses AES-256 to secure data of packets sent over the network.
<br>
<br>
<span class="italic">Note: Currently unmaintained, this app doesn't produce enough revenue to allow me to regularly update it.</span>
</p>
<span class="portfolio-close-button">
<i class="fa fa-close"></i> Close Project
</span>
</div>
</div>
</div>
<!-- Modal popup #2 -->
<div class="portfolio-modal-container modal-2">
<div class="portfolio-modal" id="portfolio-modal-2">
<div class="portfolio-x-container">
<span class="portfolio-x-button">
<i class="fa fa-3x fa-times"></i>
</span>
</div>
<div class="portfolio-modal-contents">
<h2>Zombie Apocalypse Quiz</h2>
<div class="portfolio-links">
<a href="https://krogank9.github.io/thinkful-quiz-app/" target="_blank">Live app</a>
/ <a href="https://github.com/krogank9/thinkful-quiz-app" target="_blank">Source code</a>
</div>
<img class="portfolio-image" src="img/zombie-screenshot.jpg" alt="Zombie Apocalypse Quiz App Screenshot">
<p class="long-paragraph mb-5">
This app was the first project completed in my time at Thinkful's full-stack web development course.
It is designed to showcase my knowledge in semantic HTML, CSS, jQuery, event delegation, Javascript, and proper programming practices.
The topic of the quiz is zombie survival tactics! Take the quiz to find out if you are prepared for the zombie apocalypse.
</p>
<span class="portfolio-close-button">
<i class="fa fa-close"></i> Close Project
</span>
</div>
</div>
</div>
<!-- Modal popup #3 -->
<div class="portfolio-modal-container modal-3">
<div class="portfolio-modal" id="portfolio-modal-3">
<div class="portfolio-x-container">
<span class="portfolio-x-button">
<i class="fa fa-3x fa-times"></i>
</span>
</div>
<div class="portfolio-modal-contents">
<h2>Hiking Trails Search</h2>
<div class="portfolio-links">
<a href="https://krogank9.github.io/hiking-trails-search/" target="_blank">Live app</a>
/ <a href="https://github.com/krogank9/hiking-trails-search" target="_blank">Source code</a>
</div>
<img class="portfolio-image" src="img/hiking-search-screenshot.png" alt="Hiking Search App Screenshot">
<p class="long-paragraph mb-5">
This app was the second project completed in my time at Thinkful's full-stack web development course.
I love hiking, so I decided to create an app that helps locate nearby hiking trails/parks and display them in a clear and convenient way.
It's the API capstone and is designed to showcase my capability of interfacing with multiple APIs to create a novel and useful web app.
It's built with HTML, CSS, Javascript, and jQuery while utilizing information from the hikingproject.com API, Google Maps, and the extreme-ip-lookup.com API.
</p>
<span class="portfolio-close-button">
<i class="fa fa-close"></i> Close Project
</span>
</div>
</div>
</div>
<!-- Modal popup #4 - Forum App -->
<div class="portfolio-modal-container modal-4">
<div class="portfolio-modal" id="portfolio-modal-4">
<div class="portfolio-x-container">
<span class="portfolio-x-button">
<i class="fa fa-3x fa-times"></i>
</span>
</div>
<div class="portfolio-modal-contents">
<h2>Forum App</h2>
<div class="portfolio-links">
<a href="https://forum-client.now.sh/" target="_blank">Live app</a>
/ <a href="https://github.com/krogank9/forum-client" target="_blank">Client code</a>
/ <a href="https://github.com/krogank9/forum-server" target="_blank">Server code</a>
</div>
<img class="portfolio-image" src="img/forum-screenshot.png" alt="Forum App Screenshot">
<p class="long-paragraph mb-5">
This is a full stack discussion/message board app.
You can create an account, login, make threads inside of each of the topic specific boards,
and post replies to existing threads in each of the boards.
The app utilizes HTML, CSS, and the modern user interface library, React for the frontend.
For the backend it makes use of ExpressJS to expose API endpoints and PostgreSQL to manage the database.
</p>
<span class="portfolio-close-button">
<i class="fa fa-close"></i> Close Project
</span>
</div>
</div>
</div>
<!-- Modal popup #5 - Clothing Store App -->
<div class="portfolio-modal-container modal-5">
<div class="portfolio-modal" id="portfolio-modal-5">
<div class="portfolio-x-container">
<span class="portfolio-x-button">
<i class="fa fa-3x fa-times"></i>
</span>
</div>
<div class="portfolio-modal-contents">
<h2>Clothing Store Demo App</h2>
<div class="portfolio-links">
<a href="https://clothing-store-client.now.sh/" target="_blank">Live app</a>
/ <a href="https://github.com/krogank9/clothing-store-client" target="_blank">Client code</a>
/ <a href="https://github.com/krogank9/clothing-store-server" target="_blank">Server code</a>
</div>
<img class="portfolio-image" src="img/clothing-store-screenshot.png" alt="Clothing Store Demo App Screenshot">
<p class="long-paragraph mb-5">
This is a full stack clothing store demo app.
You can create an account, login, browse collections, products, add products to your cart, create reviews products,
and favorite items to save for later. The app utilizes HTML, CSS, and React for the frontend.
For the backend it makes use of ExpressJS to expose API endpoints and PostgreSQL to manage the database.
</p>
<span class="portfolio-close-button">
<i class="fa fa-close"></i> Close Project
</span>
</div>
</div>
</div>
<!-- Modal popup #6 - Quick Box2D Editor -->
<div class="portfolio-modal-container modal-6">
<div class="portfolio-modal" id="portfolio-modal-6">
<div class="portfolio-x-container">
<span class="portfolio-x-button">
<i class="fa fa-3x fa-times"></i>
</span>
</div>
<div class="portfolio-modal-contents">
<h2>Quick Box2D Editor</h2>
<div class="portfolio-links">
<a href="https://www.youtube.com/watch?v=9owegh59zyU" target="_blank">Video Showcase</a>
/ <a href="https://krogank9.github.io/box2d_editor/editor.html" target="_blank">Live App</a>
</div>
<img class="portfolio-image" src="img/qbe-screenshot.png" alt="QBE Demo App Screenshot">
<p class="long-paragraph mb-5">
Here is a Javascript web application I made while I was learning Box2D, a physics engine.
It allows for quickly creating and testing various scenes composed of different physics objects and joints.
</p>
<span class="portfolio-close-button">
<i class="fa fa-close"></i> Close Project
</span>
</div>
</div>
</div>
<!-- Modal popup #7 - Catris -->
<div class="portfolio-modal-container modal-7">
<div class="portfolio-modal" id="portfolio-modal-7">
<div class="portfolio-x-container">
<span class="portfolio-x-button">
<i class="fa fa-3x fa-times"></i>
</span>
</div>
<div class="portfolio-modal-contents">
<h2>Catris</h2>
<div class="portfolio-links">
<a href="https://krogank9.github.io/tetris/main_menu.html" target="_blank">Live app</a>
</div>
<img class="portfolio-image" src="img/catris-screenshot.PNG" alt="Catris Demo App Screenshot">
<p class="long-paragraph mb-5">
Catris is a cat-themed game similar to the arcade-classic Tetris.
It was released for Android and uses HTML5, Javascript, and WebGL technology to provide a su-*purr*-bly fun user experience.
</p>
<span class="portfolio-close-button">
<i class="fa fa-close"></i> Close Project
</span>
</div>
</div>
</div>
<!-- Modal popup #8 - Sticky Notes -->
<div class="portfolio-modal-container modal-8">
<div class="portfolio-modal" id="portfolio-modal-8">
<div class="portfolio-x-container">
<span class="portfolio-x-button">
<i class="fa fa-3x fa-times"></i>
</span>
</div>
<div class="portfolio-modal-contents">
<h2>Sticky Notes</h2>
<div class="portfolio-links">
<a href="https://www.microsoft.com/en-us/p/sticky-notes-post-virtual-notes-on-your-desktop/9n110gmw1xts?activetab=pivot:overviewtab#" target="_blank">Get it on the Windows Store</a>
</div>
<img class="portfolio-image" src="img/sticky-notes-screenshot.jfif" alt="Sticky Notes Demo App Screenshot">
<p class="long-paragraph mb-5">
This is a Windows app developed using C# which allows users to create virtual sticky notes to post reminders to their desktop.
It has reached over 370k installs on the Windows store and currently has over 10,000 active users daily.
</p>
<span class="portfolio-close-button">
<i class="fa fa-close"></i> Close Project
</span>
</div>
</div>
</div>
<!-- Modal popup #9 - Cryptodash -->
<div class="portfolio-modal-container modal-9">
<div class="portfolio-modal" id="portfolio-modal-9">
<div class="portfolio-x-container">
<span class="portfolio-x-button">
<i class="fa fa-3x fa-times"></i>
</span>
</div>
<div class="portfolio-modal-contents">
<h2>Cryptodash</h2>
<div class="portfolio-links">
<a href="http://cryptodash.ltkdigital.com/" target="_blank">Live app</a>
/ <a href="https://github.com/krogank9/cryptodash-client" target="_blank">Client code</a>
/ <a href="https://github.com/krogank9/cryptodash-server" target="_blank">Server code</a>
</div>
<img class="portfolio-image" src="img/cryptodash-screenshot.png" alt="Cryptodash Screenshot">
<p class="long-paragraph mb-5">
This is a web application developed using Javascript, React/NextJS, and Node which acts as a mock cryptocurrency platform with the ability to import wallets, view price history, and make predictions with a neural network based on past data.
</p>
<span class="portfolio-close-button">
<i class="fa fa-close"></i> Close Project
</span>
</div>
</div>
</div>
<script src="bodyScrollLock.min.js"></script>
<script src="handle-modals.js"></script>
</body>
</html>