
<!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">
		
		<meta name="author" content="Jonathan Holmes">
		<meta property="article:author" content="https://www.facebook.com/crait">
		<meta property="og:title" content="Jonathan Holmes' Online Portfolio">
		<meta property="og:site_name" content="Jonathan Holmes' Online Portfolio">
		<meta property="og:url" content="http://www.crait.net/">
		<meta name="description" content="Online portfolio for Jonathan Holmes (crait): Software Engineer, Game Designer, Ore Creator, HCI/UI/UX Designer, Graphic Designer, Web Developer, and Chicken Expert.">
		<meta property="og:description" content="Online portfolio for Jonathan Holmes (crait): Software Engineer, Game Designer, Ore Creator, HCI/UI/UX Designer, Graphic Designer, Web Developer, and Chicken Expert.">
		<meta property="og:image" content="http://www.crait.net/img/ogimg.png">
		<meta property="og:type" content="website">

		<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://www.crait.net/img/apple-touch-icon-57x57.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.crait.net/img/apple-touch-icon-114x114.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.crait.net/img/apple-touch-icon-72x72.png">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.crait.net/img/apple-touch-icon-144x144.png">
		<link rel="apple-touch-icon-precomposed" sizes="60x60" href="http://www.crait.net/img/apple-touch-icon-60x60.png">
		<link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://www.crait.net/img/apple-touch-icon-120x120.png">
		<link rel="apple-touch-icon-precomposed" sizes="76x76" href="http://www.crait.net/img/apple-touch-icon-76x76.png">
		<link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://www.crait.net/img/apple-touch-icon-152x152.png">
		<link rel="icon" type="image/png" href="http://www.crait.net/img/favicon-196x196.png" sizes="196x196">
		<link rel="icon" type="image/png" href="http://www.crait.net/img/favicon-96x96.png" sizes="96x96">
		<link rel="icon" type="image/png" href="http://www.crait.net/img/favicon-32x32.png" sizes="32x32">
		<link rel="icon" type="image/png" href="http://www.crait.net/img/favicon-16x16.png" sizes="16x16">
		<link rel="icon" type="image/png" href="http://www.crait.net/img/favicon-128.png" sizes="128x128">
		<meta name="application-name" content="crait's Online Portfolio">
		<meta name="msapplication-TileColor" content="#203748">
		<meta name="msapplication-TileImage" content="http://www.crait.net/img/mstile-144x144.png">
		<meta name="msapplication-square70x70logo" content="http://www.crait.net/img/mstile-70x70.png">
		<meta name="msapplication-square150x150logo" content="http://www.crait.net/img/mstile-150x150.png">
		<meta name="msapplication-wide310x150logo" content="http://www.crait.net/img/mstile-310x150.png">
		<meta name="msapplication-square310x310logo" content="http://www.crait.net/img/mstile-310x310.png">
		<meta name="theme-color" content="#203748">

		<title>Jonathan Holmes - Online Portfolio</title>
		
		<link href="./css/bootstrap4.min.css" rel="stylesheet">
		<link href="./css/sticky-footer.css" rel="stylesheet">
		<link href="./css/main.css" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
		<script src="https://kit.fontawesome.com/a076d05399.js"></script>
	</head>
	<body>
		<div id="accent"></div>

		<div class="row w-100 p-0 m-0 justify-content-center">
			<div class="col-sm-12 col-md-11 col-lg-9">
				<div class="row mt-5">
					<div class="text-center col-xs-12 col-sm-5 col-md-6 col-lg-6">
						<img src="./img/me.png" class="me mb-5">
					</div>
					<div class="col-xs-12 col-sm-7 col-md-6 col-lg-6">

						<div class="row d-none d-sm-block ml-2 mr-2">
							<div class="col">
								<h1 class="text-nowrap">Jonathan Holmes</h1>
								<h4>Software Engineer</h4>
								<h4>Web Developer</h4>
								<h4>Game Designer</h4>
								<h4>Graphic Designer</h4>
								<h4>UX Designer</h4>
								<h4>Chicken Expert</h4>
							</div>
							<a href="./download.php?file=JonathanHolmesResume.pdf" class="mt-4 col button resume nounderline">
								<span class="fade-in"><i class="fas fa-file"></i> Resume</span>
							</a>
							<div class="col p-0">
								<div class="d-flex justify-content-between">
									<div class="">
										<a href="mailto:crait.is@gmail.com" class="d-block mt-4 button-small email">
											<i class="fas fa-envelope"></i>
										</a>
									</div>
									<div class="">
										<a href="http://www.twitter.com/crait" class="d-block mt-4 button-small twitter">
											<i class="fab fa-twitter"></i>
										</a>
									</div>
									<div class="">
										<a href="https://www.linkedin.com/in/crait/" class="d-block mt-4 button-small linkedin">
											<i class="fab fa-linkedin-in"></i>
										</a>
									</div>
									<div class="">
										<a href="https://www.facebook.com/crait" class="d-block mt-4 button-small facebook">
											<i class="fab fa-facebook-f"></i>
										</a>
									</div>
								</div>
							</div>
						</div>


						<div class="row d-block d-sm-none ml-2 mr-2">
							<div class="col-xs-12 text-center w-100">
								<h1>Jonathan Holmes</h1>
								<h4>Software Engineer</h4>
								<h4>Web Developer</h4>
								<h4>Game Designer</h4>
								<h4>Graphic Designer</h4>
								<h4>UX Designer</h4>
								<h4>Chicken Expert</h4>
							</div>
							<a href="./download.php?file=JonathanHolmesResume.pdf" class="mt-4 col button resume nounderline">
								<span class="fade-in"><i class="fas fa-file"></i> Resume</span>
							</a>
							<a href="mailto:crait.is@gmail.com" class="mt-4 col button email nounderline">
								<span class="fade-in"><i class="fas fa-envelope"></i> E-Mail</span>
							</a>
							<a href="http://www.twitter.com/crait" class="mt-4 col button twitter nounderline">
								<span class="fade-in"><i class="fab fa-twitter"></i> @crait</span>
							</a>
							<a href="https://www.linkedin.com/in/crait/" class="mt-4 col button linkedin nounderline">
								<span class="fade-in"><i class="fab fa-linkedin-in"></i> LinkedIn</span>
							</a>
							<a href="https://www.facebook.com/crait" class="mt-4 col button facebook nounderline">
								<span class="fade-in"><i class="fab fa-facebook-f"></i> Facebook</span>
							</a>
						</div>
					</div>
					<div id="downloads" class="fade-in col ml-2 mr-2">
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/CircuitDudePC.gif" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="CircuitDudePC.gif">
								</a>
							</div>
							<div class="col">
								<h2>Circuit Dude</h2>
								
																<h4 class="text-muted">PC, macOS, iOS, Android, Nintendo Switch</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Circuit Dude is a puzzle game with 120 levels that I designed and programmed for PC and macOS. It is soon to be released for Android and iOS, as well.</p>
																				<p>The gameplay is fun and simple: Help Circuit Dude build an awesome invention by leading him through the first 100 levels, completing circuits and plugging in microchips. After all chips are inserted into their sockets, the exit will activate and you can advance to the next puzzle! What kind of secret invention is Circuit Dude building? Complete those levels to find out!</p>
																				<p>But, if you're feeling creative, you can take a shot at creating your own levels and even upload them onto the internet to share with your friends!</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fab fa-steam-symbol"></i> <a href="https://store.steampowered.com/app/662410/Circuit_Dude/" target="_blank">Steam</a><br />
																				<i class="fa-fw fab fa-app-store"></i> <a href="https://apps.apple.com/us/app/circuit-dude/id1497085581" target="_blank">App Store</a><br />
																				<i class="fa-fw fab fa-google-play"></i> <a href="https://play.google.com/store/apps/details?id=com.crait.CircuitDude" target="_blank">Google Play Store</a><br />
																			</div>
																											<div class="col">
																				<i class="fa-fw fas fa-external-link-alt"></i> <a href="http://circuitdude.com/" target="_blank">Website</a><br />
																				<i class="fa-fw fas fa-briefcase"></i> <a href="http://circuitdude.com/presskit.php" target="_blank">Press Kit</a><br />
																				<i class="fa-fw fab fa-youtube"></i> <a href="https://www.youtube.com/watch?v=ahaL5ZF3BEc" target="_blank">Trailer</a><br />
																			</div>
																		<div class="col-12 mt-3">
																				<kbd>GML</kbd>
																				<kbd>Level Design</kbd>
																				<kbd>JavaScript</kbd>
																				<kbd>C/C++</kbd>
																				<kbd>Pixel Art</kbd>
																				<kbd>PHP</kbd>
																				<kbd>Windows</kbd>
																				<kbd>macOS</kbd>
																				<kbd>API Design</kbd>
																			</div>
																		<div class="col-12 mt-3">
										<div class="embed-responsive embed-responsive-16by9">
											<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ahaL5ZF3BEc?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
										</div>
									</div>
																										</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/FiendBlaster.jpg" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="FiendBlaster.jpg">
								</a>
							</div>
							<div class="col">
								<h2>Fiend Blaster: Robot Journey</h2>
								
																<h4 class="text-muted">PC (1.2)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>You're a robot, sent from the future to the medieval ages to fight terrible monsters and demons that are trying to change the course of history! Destroy them with several weapon types before they rewrite history! Be careful, though, because ammo is limited and it's quite dark!</p>
																				<p>Features include a unique and cool selective coloring art style, survival game mode (endless waves of progressively-difficult enemies), waypoint game mode (time-based scavenger hunt), online high scores for both, 4 weapon types, and 5 enemy tpes.</p>
																				<p>This game was created for the DSOP Cartridge Jam #3, 2020. Music was created by <a href="https://twitter.com/thegreycove" target="_blank">Greycove</a> and many models and some code was made by <a href="https://lowlande52.itch.io/" target="_blank">Lowlande52</a>.</p>
																			</div>
																											<div class="col">
																				<i class="fa-fw fas fa-external-link-alt"></i> <a href="https://crait.itch.io/fiend-blaster-robot-journey" target="_blank">itch.io Page</a><br />
																				<i class="fa-fw fab fa-windows"></i> <a href="./download.php?file=RobotJourney.zip" target="_blank">Download .ZIP</a><br />
																			</div>
																		<div class="col-12 mt-3">
																				<kbd>Unity</kbd>
																				<kbd>Level Design</kbd>
																				<kbd>C#</kbd>
																				<kbd>Rendering Pipeline</kbd>
																				<kbd>Windows</kbd>
																			</div>
																		<div class="col-12 mt-3">
										<div class="embed-responsive embed-responsive-16by9">
											<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PLG6uoP7msI?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
										</div>
									</div>
																										</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/KogresMountain.jpg" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="KogresMountain.jpg">
								</a>
							</div>
							<div class="col">
								<h2>Kogre's Mountain</h2>
								
																<h4 class="text-muted">PS Vita (1.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Kogre's Mountain is a wholesome, family-friendly digital board game. The first player to reach the top of the mountain with all four of their knights wins!</p>
																				<p>However, watch out for falling rocks! If the spinner lands on a gate icon, all the rocks will roll down the mountain- Getting hit by one will send your knight back to the bottom, so strategize by hiding your knights behind obstactles and other players.</p>
																				<p>This game was originally greated with some friends, but after losing the source code, I decided to completely recreate it. Music was created by <a href="https://twitter.com/thegreycove" target="_blank">Greycove</a> and <a href="https://twitter.com/joyrok" target="_blank">joyrok</a> helped spruce up the models with cool materials and shaders.</p>
																			</div>
																											<div class="col">
																				<i class="fa-fw fab fa-playstation"></i> <a href="./download.php?file=KogresMountain.vpk" target="_blank">Download .VPK</a><br />
																				<i class="fa-fw fab fa-windows"></i> <a href="./download.php?file=KogresMountain.zip" target="_blank">Download .ZIP</a><br />
																			</div>
																		<div class="col-12 mt-3">
																				<kbd>Unity</kbd>
																				<kbd>Level Design</kbd>
																				<kbd>C#</kbd>
																				<kbd>Game Design</kbd>
																				<kbd>PS Vita</kbd>
																			</div>
																		<div class="col-12 mt-3">
										<div class="embed-responsive embed-responsive-16by9">
											<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/u1rJCBid08U?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
										</div>
									</div>
																										</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/CircuitDude.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="CircuitDude.png">
								</a>
							</div>
							<div class="col">
								<h2>Circuit Dude</h2>
								
																<h4 class="text-muted">Arduboy (3.2)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Circuit Dude is a puzzle game with 75 levels that I designed and programmed for the Arduboy in C/C++. This game has been really well received and even recently polled as the best-rated Arduboy game.</p>
																				<p>To help design this game, I also created a web application to help generate levels and convert them to raw C/C++ code as well as designing all pixel art for the game.</p>
																				<p>The gameplay is fun and simple: Help Circuit Dude build an awesome invention by leading him through 50 unique levels, completing circuits and plugging in microchips. After all chips are inserted into their sockets, the exit will activate and you can advance to the next puzzle! What kind of secret invention is Circuit Dude building? Complete all of the levels to find out!</p>
																				<p>I also created an in-game level editor!</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=CircuitDude.arduboy" target="_blank">Download .ARDUBOY</a><br />
																				<i class="fa-fw fas fa-file-medical-alt"></i> <a href="./download.php?file=CircuitDude.hex" target="_blank">Download .HEX</a><br />
																				<i class="fa-fw fas fa-file-code"></i> <a href="./download.php?file=CircuitDude.ino" target="_blank">Download .INO</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C/C++</kbd>
																				<kbd>Arduboy</kbd>
																				<kbd>Arduino</kbd>
																				<kbd>Pixel Art</kbd>
																			</div>
																											<div class="col-12 mt-3">
										<div class="d-flex flex-wrap justify-content-around">
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/CircuitDude2.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="CircuitDude2.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/CircuitDude3.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="CircuitDude3.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/CircuitDude4.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="CircuitDude4.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/CircuitDude5.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="CircuitDude5.png">
												</a>
											</div>
																					</div>
									</div>
																	</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/CircuitDudeLevelTool.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="CircuitDudeLevelTool.png">
								</a>
							</div>
							<div class="col">
								<h2>Circuit Dude Level Tool</h2>
								
																<h4 class="text-muted">PC (1.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>This program allows you to load and edit .DUDE files that contain custom Circuit Dude levels. These files can be read from the Arduboy or be sent directly to the Arduboy, as well as be added to the BittBoy, PocketGO, and LDK Game version of the game.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fab fa-windows"></i> <a href="./download.php?file=CircuitDudeLevelTool.zip" target="_blank">Download .ZIP</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C#</kbd>
																				<kbd>Arduboy</kbd>
																				<kbd>Arduino</kbd>
																				<kbd>Serial Communication</kbd>
																				<kbd>Windows</kbd>
																			</div>
																										</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/CircuitDudeBB1.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="CircuitDudeBB1.png">
								</a>
							</div>
							<div class="col">
								<h2>Circuit Dude</h2>
								
																<h4 class="text-muted">BittBoy, PocketGo, LDK Game (1.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Circuit Dude is a puzzle game with 75 levels that I designed and programmed for the Arduboy in C/C++, but ported to the BittBoy, PocketGo, and LDK Game, using an SDL wrapper that I wrote.</p>
																				<p>The gameplay is fun and simple: Help Circuit Dude build an awesome invention by leading him through 50 unique levels, completing circuits and plugging in microchips. After all chips are inserted into their sockets, the exit will activate and you can advance to the next puzzle! What kind of secret invention is Circuit Dude building? Complete all of the levels to find out! This version also includes the built-in level editor.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=CircuitDudeBB.zip" target="_blank">Download for BittBoy</a><br />
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=CircuitDudePG.zip" target="_blank">Download for PocketGo</a><br />
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=CircuitDudeLDK.zip" target="_blank">Download for LDK Game</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C/C++</kbd>
																				<kbd>BittBoy</kbd>
																				<kbd>PocketGo</kbd>
																				<kbd>LDK Game</kbd>
																				<kbd>Linux</kbd>
																				<kbd>SDL</kbd>
																				<kbd>Pixel Art</kbd>
																			</div>
																											<div class="col-12 mt-3">
										<div class="d-flex flex-wrap justify-content-around">
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/CircuitDudeBB2.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="CircuitDudeBB2.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/CircuitDudeBB3.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="CircuitDudeBB3.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/CircuitDudeBB4.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="CircuitDudeBB4.png">
												</a>
											</div>
																					</div>
									</div>
																	</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/MidnightWildBittBoy0.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="MidnightWildBittBoy0.png">
								</a>
							</div>
							<div class="col">
								<h2>Midnight Wild</h2>
								
																<h4 class="text-muted">BittBoy, PocketGo, LDK Game (1.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Something's gone awry out West! Help Dusty Argile adventure out and defeat the baddies who are causing a commotion and stopping him from getting a good night's rest. Put them to sleep with your handy lasso and rack up as many points as you can, but watch out for falling barrels, cacti, whirling tumbleweeds, snakes, and coyotes! Most of all, watch out for the mad bull and crazy Texan twister!</p>
																				<p>This version features multiple color modes, including the new Full Color mode, GB DMG, CGA, and original Black/White Arduboy mode.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=MidnightWildBB.zip" target="_blank">Download for BittBoy</a><br />
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=MidnightWildPG.zip" target="_blank">Download for PocketGo</a><br />
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=MidnightWildLDK.zip" target="_blank">Download for LDK Game</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C/C++</kbd>
																				<kbd>BittBoy</kbd>
																				<kbd>PocketGo</kbd>
																				<kbd>LDK Game</kbd>
																				<kbd>Linux</kbd>
																				<kbd>SDL</kbd>
																				<kbd>Pixel Art</kbd>
																				<kbd>Music Compesition</kbd>
																			</div>
																											<div class="col-12 mt-3">
										<div class="d-flex flex-wrap justify-content-around">
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/MidnightWildBittBoy1.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="MidnightWildBittBoy1.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/MidnightWildBittBoy2.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="MidnightWildBittBoy2.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/MidnightWildBittBoy3.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="MidnightWildBittBoy3.png">
												</a>
											</div>
																					</div>
									</div>
																	</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/MidnightWild.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="MidnightWild.png">
								</a>
							</div>
							<div class="col">
								<h2>Midnight Wild</h2>
								
																<h4 class="text-muted">Arduboy (1.2)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Circuit Dude is a puzzle game with 75 levels that I designed and programmed for the Arduboy in C/C++. This game has been really well received and even recently polled as the best-rated Arduboy game.</p>
																				<p>To help design this game, I also created a web application to help generate levels and convert them to raw C/C++ code as well as designing all pixel art for the game.</p>
																				<p>The gameplay is fun and simple: Help Circuit Dude build an awesome invention by leading him through 50 unique levels, completing circuits and plugging in microchips. After all chips are inserted into their sockets, the exit will activate and you can advance to the next puzzle! What kind of secret invention is Circuit Dude building? Complete all of the levels to find out!</p>
																				<p>I also created an in-game level editor!</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=MidnightWild.arduboy" target="_blank">Download .ARDUBOY</a><br />
																				<i class="fa-fw fas fa-file-medical-alt"></i> <a href="./download.php?file=MidnightWild.hex" target="_blank">Download .HEX</a><br />
																				<i class="fa-fw fas fa-file-code"></i> <a href="./download.php?file=MidnightWild.ino" target="_blank">Download .INO</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C/C++</kbd>
																				<kbd>Arduboy</kbd>
																				<kbd>Arduino</kbd>
																				<kbd>Pixel Art</kbd>
																				<kbd>Music Compesition</kbd>
																			</div>
																											<div class="col-12 mt-3">
										<div class="d-flex flex-wrap justify-content-around">
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/MidnightWild2.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="MidnightWild2.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/MidnightWild3.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="MidnightWild3.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/MidnightWild4.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="MidnightWild4.png">
												</a>
											</div>
																					</div>
									</div>
																	</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/arduboymanagerpc.gif" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="arduboymanagerpc.gif">
								</a>
							</div>
							<div class="col">
								<h2>Arduboy Manager</h2>
								
																<h4 class="text-muted">PC (2.25)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>The Arduboy Manager is a simple program created by Jonathan Holmes (crait) that allows you to quickly download and install games onto your Arduboy without any programming experience! Just run the program and it will automatically connect to my server and download games for you. Turn your Arduboy on and connect your Arduboy through USB and it should be automatically detected. From there, simply select the game you'd like to install and click Transfer Other features include serial screen mirroring, serial terminal, and alternate repository pulling.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fas fa-external-link-alt"></i> <a href="./arduboy/" target="_blank">Website</a><br />
																				<i class="fa-fw fab fa-windows"></i> <a href="./download.php?file=arduboymanagerpc.zip" target="_blank">Download .ZIP</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C#</kbd>
																				<kbd>Arduboy</kbd>
																				<kbd>Arduino</kbd>
																				<kbd>Serial Communication</kbd>
																				<kbd>Windows</kbd>
																			</div>
																										</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/FestiveFight.gif" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="FestiveFight.gif">
								</a>
							</div>
							<div class="col">
								<h2>Festive Fight</h2>
								
																<h4 class="text-muted">Arduboy (1.1)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Holiday mascots from throughout the calendar must fight in order to compete for the affection of the children throughout the world for some weird reason. This game includes single and multiplayer support. To fight, you have two options: Attack and Retreat. Each match, you have 5 hearts. Getting punched causes you to lose 1 heart. Lose all your hearts, and you’ll lose the match, so make sure you retreat often to dodge oncoming attacks. Different characters have different stats. Some are harder to use than others, so try them all out! This game was created for the second Arduboy Game Jam.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=FestiveFight.arduboy" target="_blank">Download .ARDUBOY</a><br />
																				<i class="fa-fw fas fa-file-medical-alt"></i> <a href="./download.php?file=FestiveFight.hex" target="_blank">Download .HEX</a><br />
																				<i class="fa-fw fas fa-file-code"></i> <a href="./download.php?file=FestiveFight.ino" target="_blank">Download .INO</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C/C++</kbd>
																				<kbd>Arduboy</kbd>
																				<kbd>Arduino</kbd>
																				<kbd>Pixel Art</kbd>
																			</div>
																											<div class="col-12 mt-3">
										<div class="d-flex flex-wrap justify-content-around">
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/FestiveFight1.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="FestiveFight1.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/FestiveFight2.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="FestiveFight2.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/FestiveFight3.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="FestiveFight3.png">
												</a>
											</div>
																					</div>
									</div>
																	</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/RooRun.gif" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="RooRun.gif">
								</a>
							</div>
							<div class="col">
								<h2>Roo Run</h2>
								
																<h4 class="text-muted">Arduboy (1.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>The zoo had to close and now all the animals are trying to escape! Help the kangaroo run away from the animal control who's trying to catch him. Push A and B back and forth as fast as you can to run faster. This game was created for the first Arduboy Game Jam.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=RooRun.arduboy" target="_blank">Download .ARDUBOY</a><br />
																				<i class="fa-fw fas fa-file-medical-alt"></i> <a href="./download.php?file=RooRun.hex" target="_blank">Download .HEX</a><br />
																				<i class="fa-fw fas fa-file-code"></i> <a href="./download.php?file=RooRun.ino" target="_blank">Download .INO</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C/C++</kbd>
																				<kbd>Arduboy</kbd>
																				<kbd>Arduino</kbd>
																				<kbd>Pixel Art</kbd>
																			</div>
																										</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/VampireDanceParty1.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="VampireDanceParty1.png">
								</a>
							</div>
							<div class="col">
								<h2>Vampire Dance Party</h2>
								
																<h4 class="text-muted">PC (1.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Play as a vampire in this game, going from night club to night club, trying to drain the blood of all of the dancers. Don't arouse people's suspicions, though! Dance with the ASDF keys to fit in and to increase your illusion meter. Sneaking around and sucking blodd depletes it, so make sure you are watching that meter!</p>
																				<p>Vampire Dance Party is a game jam game created as a part of the Dallas Society of Play's 2nd Cart Jam. This game is for Windows and can record your high score.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fab fa-windows"></i> <a href="./download.php?file=VampireDanceParty.exe" target="_blank">Download .EXE</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>GML</kbd>
																				<kbd>Windows</kbd>
																			</div>
																											<div class="col-12 mt-3">
										<div class="d-flex flex-wrap justify-content-around">
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/VampireDanceParty2" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="VampireDanceParty2">
												</a>
											</div>
																					</div>
									</div>
																	</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/LNM0.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="LNM0.png">
								</a>
							</div>
							<div class="col">
								<h2>Loop N' Moove</h2>
								
																<h4 class="text-muted">PC (1.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Loop N' Moove is a sidescrolling wrangle 'em up game inspired by Texan culture. Take control of your 10 heads of cattle and drive them as far as possible, round them up when they try to run away and protecting them from wolves. Whenever you lose all of your cattle, your game is over.</p>
																				<p>Use the mouse to aim your lasso, and left-click to power it up. When you're ready, left-click again to throw. Once you've snagged a bovine, slowly pull them in automatically, left-clicking again to cancel. Use the W, A, S, & D keys to move your horse around.</p>
																				<p>This game was created during the SGDA Game Jam, 2017.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fab fa-windows"></i> <a href="./download.php?file=LMN.exe" target="_blank">Download .EXE</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>GML</kbd>
																				<kbd>Windows</kbd>
																			</div>
																											<div class="col-12 mt-3">
										<div class="d-flex flex-wrap justify-content-around">
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/LNM1.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="LNM1.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/LNM2.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="LNM2.png">
												</a>
											</div>
																					</div>
									</div>
																	</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/Cockpit1.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="Cockpit1.png">
								</a>
							</div>
							<div class="col">
								<h2>The Cockpit</h2>
								
																<h4 class="text-muted">PC (2.1)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>The Cockpit is a retro-style game that pits a lone chicken against raging traffic. The player navigates the busy streets in order to reach the hen on the other side. This game also supports 2-players where the first player to reach the hen 6 times wins- But don't be fooled! This game isn't as easy as Frogger or Crossy Roads! Cars are insanely fast and frustratingly hard to predict. There are explosions all over the place and even cars crashing into each other!</p>
																				<p>The left player controls their green chicken using the standard arrow keys on the keyboard while the right player controls their orange chicken with WASD.</p>
																				<p>This game's retro look and playstyle was inspired by older games such as Frogger and Dig Dug. I made this for Windows in GM to perfectly fit my personal arcade machine's asthetics and theme.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fab fa-windows"></i> <a href="./download.php?file=Cockpit.exe" target="_blank">Download .EXE</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>GML</kbd>
																				<kbd>Windows</kbd>
																			</div>
																											<div class="col-12 mt-3">
										<div class="d-flex flex-wrap justify-content-around">
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/Cockpit2.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="Cockpit2.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/Cockpit3.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="Cockpit3.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/Cockpit4.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="Cockpit4.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/Cockpit5.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="Cockpit5.png">
												</a>
											</div>
																					</div>
									</div>
																	</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/cockpit1.jpg" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="cockpit1.jpg">
								</a>
							</div>
							<div class="col">
								<h2>The Cockpit</h2>
								
																<h4 class="text-muted">Arcade Machine</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>The Cockpit is an arcade cabinet created from the shell of an old Golden Tee cab. I created custom decals as well as inserted a converted CRT TV. The control deck was fabricated from scratch with new buttons/joysticks from Tornado Terrys.</p>
																				<p>The internal components have been replaced with a Windows PC that can emulate other consoles as well as play the custom game I've made of the same name.</p>
																				<p>So far, The Cockpit has been shown off at Texas Pinball Festival 2016 and 2018.</p>
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>Graphic Design</kbd>
																				<kbd>Fabrication</kbd>
																			</div>
																											<div class="col-12 mt-3">
										<div class="d-flex flex-wrap justify-content-around">
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/cockpit2.jpg" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="cockpit2.jpg">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/cockpit3.jpg" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="cockpit3.jpg">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/cockpit4.jpg" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="cockpit4.jpg">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/cockpit5.jpg" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="cockpit5.jpg">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/cockpit6.jpg" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="cockpit6.jpg">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/cockpit7.jpg" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="cockpit7.jpg">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/cockpit8.jpg" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="cockpit8.jpg">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/cockpit9.jpg" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="cockpit9.jpg">
												</a>
											</div>
																					</div>
									</div>
																	</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/ChickenLauncherVita.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="ChickenLauncherVita.png">
								</a>
							</div>
							<div class="col">
								<h2>Chicken Launcher</h2>
								
																<h4 class="text-muted">PlayStation Vita (1.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Chicken Launcher is a fun lil' game I made for the Playstation Vita after making a version for the Arduboy, which was inspired by Kitten Cannon, where you shoot a chicken as far as you can. Try to hit springboards and TNT to give you a big boost, but watch out for spikes! Your high score is recorded and saved. If you think you get a big high score, tweet me a pic!</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fab fa-playstation"></i> <a href="./download.php?file=ChickenLauncherVita.zip" target="_blank">Download for PS Vita .ZIP</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C/C++</kbd>
																				<kbd>PS Vita</kbd>
																			</div>
																										</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/ChickenLauncher.gif" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="ChickenLauncher.gif">
								</a>
							</div>
							<div class="col">
								<h2>Chicken Launcher</h2>
								
																<h4 class="text-muted">Arduboy (1.1)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Chicken Launcher is a fun lil' game I made for the Arduboy based off of Kitten Cannon. Shoot a chicken as far as you can, trying to hit springboards to give you a boost, but watch out for spikes! Your high score is recorded and saved. If you think you get a big high score, tweet me a pic!</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=ChickenLauncher.arduboy" target="_blank">Download .ARDUBOY</a><br />
																				<i class="fa-fw fas fa-file-medical-alt"></i> <a href="./download.php?file=ChickenLauncher.hex" target="_blank">Download .HEX</a><br />
																				<i class="fa-fw fas fa-file-code"></i> <a href="./download.php?file=ChickenLauncher.ino" target="_blank">Download .INO</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C/C++</kbd>
																				<kbd>Arduboy</kbd>
																				<kbd>Arduino</kbd>
																				<kbd>Pixel Art</kbd>
																			</div>
																										</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/TrainDodge.gif" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="TrainDodge.gif">
								</a>
							</div>
							<div class="col">
								<h2>Train Dodge</h2>
								
																<h4 class="text-muted">Arduboy (1.1)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Who's brave enough to play chicken with a train? Stand on the track as multiple trains come at you full-speed... The closer they get to you before jumping off the tracks, the more points you'll rack up. (You'll also lose points for jumping off of the track too early.) Dodge as many as you can, but beware! If you don't jump off in time, you'll be hit!</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=TrainDodge.arduboy" target="_blank">Download .ARDUBOY</a><br />
																				<i class="fa-fw fas fa-file-medical-alt"></i> <a href="./download.php?file=TrainDodge.hex" target="_blank">Download .HEX</a><br />
																				<i class="fa-fw fas fa-file-code"></i> <a href="./download.php?file=TrainDodge.ino" target="_blank">Download .INO</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C/C++</kbd>
																				<kbd>Arduboy</kbd>
																				<kbd>Arduino</kbd>
																				<kbd>Pixel Art</kbd>
																			</div>
																										</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/SuitShooter.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="SuitShooter.png">
								</a>
							</div>
							<div class="col">
								<h2>Suit Shooter</h2>
								
																<h4 class="text-muted">Arduboy (2.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Launch suits of cards at falling cards in order to create matches and score points. Watch out, though! Missing cards will hurt you! The cards start out falling slowly, but get faster as you score more points and regain health.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=SuitShooter.arduboy" target="_blank">Download .ARDUBOY</a><br />
																				<i class="fa-fw fas fa-file-medical-alt"></i> <a href="./download.php?file=SuitShooter.hex" target="_blank">Download .HEX</a><br />
																				<i class="fa-fw fas fa-file-code"></i> <a href="./download.php?file=SuitShooter.ino" target="_blank">Download .INO</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C/C++</kbd>
																				<kbd>Arduboy</kbd>
																				<kbd>Arduino</kbd>
																				<kbd>Pixel Art</kbd>
																			</div>
																										</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/ArduboyAssistant.jpg" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="ArduboyAssistant.jpg">
								</a>
							</div>
							<div class="col">
								<h2>Arduboy Assistant</h2>
								
																<h4 class="text-muted">Arduboy (2.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>Arduboy Assistant is a program that allows you to manage an Arduboy's EEPROM as well as test several hardware and software components. You can view raw EEPROM data, back it up through the Arduino IDE's serial monitor, restore EEPROM data the same way, and even clear the entirety of the EEPROM data. Additionally, you can do a button test, LED test, sound test, serial test, and screen test.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fas fa-file-archive"></i> <a href="./download.php?file=ArduboyAssistant.arduboy" target="_blank">Download .ARDUBOY</a><br />
																				<i class="fa-fw fas fa-file-medical-alt"></i> <a href="./download.php?file=ArduboyAssistant.hex" target="_blank">Download .HEX</a><br />
																				<i class="fa-fw fas fa-file-code"></i> <a href="./download.php?file=ArduboyAssistant.ino" target="_blank">Download .INO</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C/C++</kbd>
																				<kbd>Arduboy</kbd>
																				<kbd>Arduino</kbd>
																				<kbd>Pixel Art</kbd>
																				<kbd>Serial Communication</kbd>
																			</div>
																										</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/LemonLight.gif" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="LemonLight.gif">
								</a>
							</div>
							<div class="col">
								<h2>LemonLight</h2>
								
																<h4 class="text-muted">PC (2.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>LemonLight (previously LimeLight) is a program designed as a Apple's Spotlight clone for Windows. You can set custom shortcuts, search Google, run other processes, and so much more quickly from any other window.</p>
																				<p>Customize the shortcuts file and drop in some images and you can run all sorts of cool stuff!</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fab fa-windows"></i> <a href="./download.php?file=LemonLight.zip" target="_blank">Download .ZIP</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C#</kbd>
																				<kbd>Windows</kbd>
																			</div>
																										</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/Regradiater.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="Regradiater.png">
								</a>
							</div>
							<div class="col">
								<h2>Image Regradiater</h2>
								
																<h4 class="text-muted">PC (1.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>This is a program that I made in order to test a new image processing and masking technique that I created called regradiation. In order to use this program, you must input both a source image, and mask image. Both images will have all of their pixels sorted, retaining the location data for each pixel. The gradient mask's color data is swapped into the source image's data, and the pixels are sorted back to their original location, leaving very beautiful results. Images with very similarly-shaped curves tend to have the best results.</p>
																				<p>Regradiation can look very similar to pallet swapping, but it is actually a new technique. Results can vary greatly depending on the difference between two images' curves. If the curves are 1:1, regradiation is pallet swapping, however the more the curves mismatch, the greater the difference in application will be.</p>
																				<p>Note that when running the program, the images must both have the same amount of pixels. Usually, this means that the resolution of the two images must match exactly.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fab fa-windows"></i> <a href="./download.php?file=Regradiater.exe" target="_blank">Download .EXE</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>Image Processing</kbd>
																				<kbd>C#</kbd>
																				<kbd>Windows</kbd>
																			</div>
																											<div class="col-12 mt-3">
										<div class="d-flex flex-wrap justify-content-around">
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/Cat.jpg" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="Cat.jpg">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/Peacock.jpg" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="Peacock.jpg">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/Regradiated.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="Regradiated.png">
												</a>
											</div>
																					</div>
									</div>
																	</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/pkmnwatch1.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="pkmnwatch1.png">
								</a>
							</div>
							<div class="col">
								<h2>PokéFace</h2>
								
																<h4 class="text-muted">Pebble (2.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>This is a watchface that I created for the Pebble smartwatch using C/C++ with the CloudPebble IDE. It is a recreation of the popular Pokémon Blue/Red title screen for the Game Boy. Like the original title screen, it features monsters being swapped out by sliding out and replacements sliding in. Due to the limitations of the Pebble smartwatch, I had to recreate a lot of sprites in a monochrome format while still retaining their original artstyle. Pokémon featured in this watchface are: Arbok, Arcanine, Blastoise, Bulbasaur, Charizard, Charmander, Gyarados, Hitmonlee, Kedabra, MewTwo, Nidoqueen, Squirtle, and Venasaur.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fas fa-clock"></i> <a href="./download.php?file=pkmnwatch.pbw" target="_blank">Download Pebble Watch Face .PBW</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C/C++</kbd>
																				<kbd>Pebble</kbd>
																				<kbd>Pixel Art</kbd>
																				<kbd>CloudPebble IDE</kbd>
																			</div>
																											<div class="col-12 mt-3">
										<div class="d-flex flex-wrap justify-content-around">
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/pkmnwatch2.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="pkmnwatch2.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/pkmnwatch3.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="pkmnwatch3.png">
												</a>
											</div>
																					</div>
									</div>
																	</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/PebbleTransporter1.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="PebbleTransporter1.png">
								</a>
							</div>
							<div class="col">
								<h2>Pebble Transporter</h2>
								
																<h4 class="text-muted">Android (1.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>This is a simple Android application that opens the camera on a device and actively searches for a QR code. (The user can optionally upload an image they have on their phone.) The program takes the QR code, downloads the Pebble application or watchface from the internet, and passes the file directly to the Pebble Android application.</p>
																				<p>This application was designed for developers who use the CloudPebble IDE to compile their code. It cuts out the steps of having to compile the application locally, connect their device through USB, use a compatible Android file browser to find the specific file, then launch with the Pebble application intent.</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fab fa-android"></i> <a href="./download.php?file=PebbleTransporter.apk" target="_blank">Download for Adroid .APK</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>MIT App Inventor 2</kbd>
																				<kbd>Pebble</kbd>
																				<kbd>Android</kbd>
																			</div>
																											<div class="col-12 mt-3">
										<div class="d-flex flex-wrap justify-content-around">
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/PebbleTransporter2.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="PebbleTransporter2.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/PebbleTransporter3.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="PebbleTransporter3.png">
												</a>
											</div>
																					</div>
									</div>
																	</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/FanMate2.jpg" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="FanMate2.jpg">
								</a>
							</div>
							<div class="col">
								<h2>FanMate</h2>
								
																<h4 class="text-muted">PSP (1.0)</h4>
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>FanMate is a remake of a popular program for the ol' Palm Pilot, originally created by PalmMate, with the same name. The software is a quirky joke program that is described as "an application to keep you virtually cool... as the hot days of summer approach..." My recreation for the Playstation Portable is virtually identical.</p>
																				<p>This program has almost no functionality, but it's one of the first applications I created, so it deserves a special little place in my heart.</p>
																				<p>If you have a Sony PSP on 3.XX custom firmware, you should be able to download this .ZIP, extract the EBOOT.PBP file, and run it. (Extract the contents of the .ZIP file into <i>X:/PSP/GAME/</i>) If you are using a newer version, you'll have to pick up a self-signer. Have fun and stay cool!</p>
																			</div>
																		<div class="col">
																				<i class="fa-fw fab fa-playstation"></i> <a href="./download.php?file=FanMate.zip" target="_blank">Download for PSP .ZIP</a><br />
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>C/C++</kbd>
																				<kbd>Pixel Art</kbd>
																				<kbd>PSP</kbd>
																			</div>
																											<div class="col-12 mt-3">
										<div class="d-flex flex-wrap justify-content-around">
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/FanMate.png" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="FanMate.png">
												</a>
											</div>
																						<div class="w-30 mb-3">
												<a class="thumbnail responsive img-responsive">
													<img src="./i/FanMate1.jpg" class="img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="FanMate1.jpg">
												</a>
											</div>
																					</div>
									</div>
																	</div>
							</div>
						</div>
												<div class="col-12 pl-0 pr-0">
							<hr />
						</div>
																		<div class="row download">
							<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 mb-4">
								<a class="thumbnail responsive img-responsive">
									<img src="./i/Portfolio.png" class="w-100 img-thumbnail proj media-object" data-toggle="modal" data-target="#imagemodal" data-image="Portfolio.png">
								</a>
							</div>
							<div class="col">
								<h2>Personal Portfolio</h2>
								
																
								<div class="row">
									<div class="col-12 mt-2">
																				<p>If you're on my website, looking at my portfolio, then odds are, you don't really need to read this entry. If you're interested in what it took to make this page, then go on ahead!</p>
																				<p>This page is a single page, based off of Bootstrap 3.3.6 for responsive theming, and uses jQuery and Javascript to handle delivering different sections and data. There's a lot of basic custom work put into this. Go ahead and look at the source code to see for yourself!</p>
																			</div>
																											<div class="col-12 mt-3">
																				<kbd>JavaScript</kbd>
																				<kbd>jQuery</kbd>
																				<kbd>Bootstrap</kbd>
																				<kbd>PHP</kbd>
																				<kbd>CSS</kbd>
																				<kbd>HTML</kbd>
																				<kbd>Bootstrap</kbd>
																				<kbd>Font Awesome</kbd>
																			</div>
																										</div>
							</div>
						</div>
																	</div>
				</div>
			</div>
		</div>
		
		<footer class="footer">
			<div class="container">
				<span class="text-muted"></span>
			</div>
		</footer>



	<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="imagemodal">
		<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
			<div class="modal-content modal-image">
				<div class="modal-body text-center">
					<a href="" target="_blank" class="thumbnail" id="imagelink">
						<img src="img/load.gif" id="imageholder">
					</a>
				</div>
			</div>
		</div>
	</div>


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="./js/bootstrap4.min.js"></script>



	<script>
	$(".proj").click(function() {
		$("#imageholder").attr("src", "img/load.gif");
		var image = $(this).data('image');
		$("#imageholder").attr("src", "./fi/" + image);
		$("#imagelink").attr("href", "./fi/" + image);
	});

	$('#myModal').on('hidden.bs.modal', function (e) {
		$("#imageholder").attr("src", "img/load.gif");
	})


	if(location.search == '?aprilfools') {
		$("#imageholder").attr("src", "img/aprilfools.jpg");
		$('#imagemodal').modal('show')
	}
	</script>
	</body>
</html>

