index.html

<!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:logankrumbhaar@gmail.com" target="_blank">logankrumbhaar@gmail.com</a></p>
				</div>
			</div>
			
			<div class="copyright">
				Copyright &copy; 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>