portfolio and contact

assets/css/style.css

@@ -1,6 +1,5 @@
 body {
 	background-color: #E7D5B1;
-	/* background-color: #8EA7C8; */
 	background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
 	font-family: monospace;
 	font-size: 16px;
@@ -104,6 +103,16 @@ canvas {
 	padding: 20px;
 }
 
+#contact {
+	background: #a3acbe;
+	position: relative;
+	height: inherit;
+	box-sizing: border-box;
+	font-family: monospace;
+	font-size: 20px;
+	padding: 10px;
+	overflow: auto!important;
+}
 .prompt-container {
   display: flex;
   align-items: center;
@@ -155,6 +164,10 @@ canvas {
 	font-size: 20px;
 }
 
+.audio-controls:hover {
+	cursor: pointer;
+}
+
 #album-thumb img {
 	border: solid 3px #dbe0e7;
 	margin-top: 10px;
@@ -172,6 +185,7 @@ canvas {
 
 #portfolio-container {
 	background: #a3acbe;
+	font-size: 10px;
 }
 
 .games-inner-container {
@@ -189,6 +203,31 @@ canvas {
 	height: auto;
 }
 
+.portfolio-item {
+	display: flex;
+	position: relative;
+	box-sizing: border-box;
+	font-family: monospace;
+	font-size: 17px;
+	padding: 10px;
+	overflow: auto!important;
+}
+
+#portfolio img {
+	width: 200px;
+	height: auto;
+}
+
+.on-screen-controller-button:hover {
+	background-color: 
+}
+#portfolio a {
+	text-decoration: none;
+}
+
+#portfolio h3 {
+	margin: 0px;
+}
 .games-inner-container h3 {
 	margin: 0px;
 	width: 100%;
@@ -278,3 +317,67 @@ tr:nth-child(even) {
 	top: 570px;
 	left: 60px;
 }
+
+.download-resume {
+	font-family: monospace;
+	margin: 10px;
+	position: absolute;
+	bottom: 0px;
+	right: 15px;
+}
+
+.download-resume button {
+	font-size: 15px;
+	font-family: monospace;
+	border-radius: 0%;
+	border-top: white;
+	border-left: white;
+	margin-right: 3px;
+}
+
+.nav-bar {
+	margin-top: 5px;
+}
+
+button {
+	background-color: #ededed;
+	font-size: 16.9px;
+	font-family: monospace;
+	border-width: 3px;
+	border-radius: 0%;
+	border-top: white;
+	border-left: white;
+	margin-right: 2px;
+}
+
+button:hover {
+	background-color: #c3f6c3;
+	cursor: pointer;
+}
+
+.controls {
+	display: none;
+	opacity: 65%;
+	position: absolute;
+	bottom: 0px;
+	left: 0px
+}
+
+#on-screen-controller-button {
+	background-color: #ededed;
+	font-size: 16.9px;
+	font-family: monospace;
+	border-width: 3px;
+	border-radius: 0%;
+	border-top: white;
+	border-left: white;
+	margin-right: 2px;
+	position: absolute;
+	top: -35px;
+	right: 0px;
+}
+
+#on-screen-controller-button:hover {
+	background-color: #c3f6c3;
+	cursor: pointer;
+}

assets/js/app.js

@@ -1,8 +1,11 @@
-var _listener
 var TO_RADIANS = Math.PI/180; 
 
+var _listener
+
+var controlsMode = false
 var dialogMode = true
 var terminalMode = false
+
 var spriteSize = 16 * 5
 var spriteMap = new Image()
 spriteMap.src = './assets/img/sprites/sprite-map-1.png'
@@ -10,12 +13,11 @@ spriteMap.src = './assets/img/sprites/sprite-map-1.png'
 var canvasOffset = 9
 var canvas = document.getElementById("canvas")
 var ctx = canvas.getContext("2d")
-
 canvas.width = spriteSize * canvasOffset
 canvas.height = canvas.width
 
 var audio = null
-
+var contact = new Contact()
 var terminal = new Terminal()
 var games = new Games()
 var music = new Music()
@@ -23,7 +25,7 @@ var dialog = new Dialog()
 var resume = new Resume()
 var portfolio = new Portfolio()
 var indicator = new Indicator()
-var player = new Player(1, 1, 'down')
+var player = new Player(5, 4, 'down')
 
 window.addEventListener("resize", function() {
 	terminal.resize();
@@ -127,21 +129,40 @@ function renderRoom() {
 	new Renderer(3, 2, 0, 7)
 	new Renderer(3, 3, 0, 8)
 	new Renderer(4, 2, 1, 8)
-
 }
 
 dialog.startIntroDialogSequence()
 
+function toggleController() {
+	var enterIndicatorElem = document.getElementById('enter-indicator')
+	if (!controlsMode) {
+		controlsMode = true
+		enterIndicatorElem.innerHTML = 'TOUCH/CLICK ANYWHERE'
+	} else {
+		controlsMode = false
+		enterIndicatorElem.innerHTML = 'PRESS ENTER'
+	}
+}
+
+if (window.innerWidth <= 479) {
+	toggleController()
+}
+
 function gameLoop() {
+	if (!dialogMode && controlsMode) {
+		dialog.controlsElem.style.display = 'block'
+	} else if (!controlsMode || dialogMode) {
+		dialog.controlsElem.style.display = 'none'
+	}
+
 	renderRoom()
 	document.removeEventListener("keydown", _listener);
 	if (terminalMode) {
 		terminal.getKeystroke();
-	} else if (dialogMode) {
-		// pass
-	} else {
+	} else if (!dialogMode) {
 		this.getKeystroke();
 	}
+
 }
 
 spriteMap.onload = function() {

assets/js/contact.js

@@ -0,0 +1,5 @@
+class Contact extends Window {
+	constructor() {
+		super('contact')
+	}
+}

assets/js/dialog.js

@@ -2,6 +2,7 @@ class Dialog {
 	constructor() {
 		this.dialogElem = document.getElementById('dialog')
 		this.dialogTextElem = document.getElementById('dialog-text')
+		this.controlsElem = document.getElementById('controls')
 		
 		this.currentDialogIndex = 0
 		this.dialogOrder = ['intro', 'controls', 'resume']
@@ -19,14 +20,18 @@ class Dialog {
 
 	dialogListener(event) {
 		console.log(event)
-			if (event.key === 'Enter') {
+			if (event.key === 'Enter' || event.type === 'touchstart') {
 				event.currentTarget.self.startIntroDialogSequence()
 			}
 	}
 
+	hide() {
+		this.dialogElem.style.display = 'none'
+	}
+	
 	startIntroDialogSequence() {
 		document.removeEventListener("keydown", this.dialogListener);
-		console.log('hit')
+		document.removeEventListener('touchstart', this.dialogListener)
 		if (this.currentDialogIndex > this.dialogOrder.length - 1) {
 			this.dialogElem.style.display = 'none'
 			dialogMode = false
@@ -51,6 +56,8 @@ class Dialog {
 
 		var self = this
 		document.addEventListener('keydown', this.dialogListener)
+		document.addEventListener('touchstart', this.dialogListener)
+
 		document.self = self
 	}
 

assets/js/games.js

@@ -6,5 +6,4 @@ class Games extends Window {
 	handleDialog() {
 		indicator.hide('tv')
 	}
-
 }

assets/js/indicator.js

@@ -22,12 +22,10 @@ class Indicator {
 	}
 
 	show(indicatorName) {
-		console.log(indicatorName)
 		this.indicatorMap[indicatorName].style.display = 'block'
 	}
 
 	hide(indicatorName) {
 		this.indicatorMap[indicatorName].style.display = 'none'
 	}
-
 }

assets/js/keystroke.js

@@ -8,30 +8,25 @@ function getKeystroke() {
 			event.preventDefault();
 		}
 
-		if (event.key === "h" || event.key === "a" || event.key === "ArrowLeft") {
+		if (['h', 'a', 'ArrowLeft'].includes(event.key)) {
 			player.move('left')
-		} else if (
-			event.key === "j" ||
-			event.key === "s" ||
-			event.key === "ArrowDown"
-		) {
+		} else if (['j', 's', 'ArrowDown'].includes(event.key)) {
 			player.move('down')
-		} else if (
-			event.key === "k" ||
-			event.key === "w" ||
-			event.key === "ArrowUp"
-		) {
+		} else if (['k', 'w', 'ArrowUp'].includes(event.key)) {
 			player.move('up')
-		} else if (
-			event.key === "l" ||
-			event.key === "d" ||
-			event.key === "ArrowRight"
-		) {
+		} else if (['l', 'd', 'ArrowRight'].includes(event.key)) {
 			player.move('right')
 		} else if (
 			event.key === "Enter" &&
 			!terminal.active
 		) {
+			onEnter();
+		}
+	};
+	document.addEventListener("keydown", _listener);
+}
+
+function onEnter() {
 	var playerPosition = [player.canvasX, player.canvasY]
 	if (player.direction === 'up') {
 		if (computerInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
@@ -58,7 +53,4 @@ function getKeystroke() {
 			resume.show()
 		}
 	}
-		}
-	};
-	document.addEventListener("keydown", _listener);
 }

assets/js/player.js

@@ -29,18 +29,21 @@ class Player {
 				this.canvasX -= 1;
 			}
 		}
+
 		if (direction === 'right' && this.canvasX + 1 < canvas.width/spriteSize) {
 			nextPosition = [this.canvasX + 1, this.canvasY]
 			if (!this.isBoundary(nextPosition)) {
 				this.canvasX += 1;
 			}
 		}
+
 		if (direction === 'up' && this.canvasY - 1 >= 0) {
 			nextPosition = [this.canvasX, this.canvasY - 1]
 			if (!this.isBoundary(nextPosition)) {
 				this.canvasY -= 1;
 			}
 		} 
+
 		if (direction === 'down' && this.canvasY + 2 < canvas.height/spriteSize){
 			nextPosition = [this.canvasX, this.canvasY + 1]
 			if (!this.isBoundary(nextPosition)) {

assets/js/portfolio.js

@@ -4,8 +4,9 @@ class Portfolio extends Window {
 	}
 
 	handleDialog() {
-		if (!indicator.computerIndicatorShown) {
 		indicator.hide('portfolio')
+		indicator.portfolioIndicatorShown = true;
+		if (!indicator.computerIndicatorShown) {
 			dialog.display('other')
 
 			indicator.computerIndicatorShown = true;

assets/js/terminal.js

@@ -132,7 +132,6 @@ class Terminal {
 
 		} else {
 			returnText = 'Unkown command, please type "help" for options'
-
 		}
 
 		if (returnText) {
@@ -152,7 +151,6 @@ class Terminal {
 	getKeystroke() {
 		var self = this
 		_listener = function (event) {
-			console.log(event.code)
 			if (
 				["ArrowUp", "ArrowDown", "ControlLeft"].indexOf(event.code,) > -1
 			) {

index.html

@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -17,6 +16,7 @@
 		<script type="text/javascript" src="./assets/js/music.js" defer></script>
 		<script type="text/javascript" src="./assets/js/resume.js" defer></script>
 		<script type="text/javascript" src="./assets/js/portfolio.js" defer></script>
+		<script type="text/javascript" src="./assets/js/contact.js" defer></script>
 		<script type="text/javascript" src="./assets/js/dialog.js" defer></script>
 		<script type="text/javascript" src="./assets/js/indicator.js" defer></script>
 		<script type="text/javascript" src="./assets/js/keystroke.js" defer></script>
@@ -30,20 +30,63 @@
 				Software Developer & Architect
 			</div>
 			<div class="container">
+
 				<canvas id="canvas"></canvas>
 
+				<button id="on-screen-controller-button" onclick="toggleController()">🎮 Toggle On Screen Controller</button>
 				<span class="indicator" id='resume-indicator'></span>	
 				<span class="indicator" id='portfolio-indicator'></span>	
 				<span class="indicator" id='computer-indicator'></span>	
 				<span class="indicator" id='tv-indicator'></span>	
 				<span class="indicator" id='guitar-indicator'></span>	
 
-
 				<div class="dialog" id="dialog">
 					<span id="dialog-text"></span>
-					<div class="enter-indicator">PRESS ENTER</div>
+					<div class="enter-indicator" id="enter-indicator">PRESS ENTER</div>
 				</div>
 
+				<div class="controls" id="controls">
+					<img src="./assets/img/sprites/controls.png" alt="" usemap="#dpadmap">
+				</div>
+
+      <map name="dpadmap">
+        <!-- up -->
+        <area
+          shape="rect"
+          coords="110,55,180,120"
+          href="#"
+          onclick="player.move('up')"
+        />
+        <!-- down -->
+        <area
+          shape="rect"
+          coords="110,180,180,250"
+          href="#"
+          onclick="player.move('down')"
+        />
+        <!-- left -->
+        <area
+          shape="rect"
+          coords="50,125,110,190"
+          href="#"
+          onclick="player.move('left')"
+        />
+        <!-- right -->
+        <area
+          shape="rect"
+          coords="170,110,240,190"
+          href="#"
+          onclick="player.move('right')"
+        />
+        <!-- A-button -->
+        <area
+          shape="rect"
+          coords="580,110,680,190"
+          href="#"
+          onclick="onEnter()"
+        />
+      </map>
+
 				<!-- Terminal -->
 				<div class="window-container" id="term-container">
 					<div class="window-bar">
@@ -62,6 +105,27 @@
 					</div>
 				</div>
 
+				<!-- Contact -->
+				<div class="window-container" id="contact-container">
+					<div class="window-bar">
+						<div style="float:inline-start;">
+							📄 Contact Me
+						</div>
+						<div style="float:inline-end;">
+							<button class="close-button" onclick="contact.hide()">X</button>
+						</div>
+						<div style="clear:both;"></div>
+					</div>
+					<div id="contact">
+						<h3>Contact Me:</h3>
+						Feel free to contact me with a job offering or for freelance work. 
+						<p>
+						<b>EMAIL:</b> <a href= "mailto:me@domdit.com">me@domdit.com</a><br>
+							<b>XMPP:</b> domdit@xmpp.jp
+						</p>
+					</div>
+				</div>
+				
 				<!-- Resume -->
 				<div class="window-container" id="resume-container">
 					<div class="window-bar">
@@ -74,7 +138,11 @@
 						<div style="clear:both;"></div>
 					</div>
 					<div id="resume">
-						Resume placeholder
+						<a class="download-resume" href="./assets/docs/resume.pdf"><button>💾 Download</button></a>
+
+						    <object data="./assets/docs/resume.pdf#toolbar=0" type="application/pdf" width="100%" height="100%">
+      <p>Unable to display PDF file. <a href="./assets/docs/resume.pdf">Download</a> instead.</p>
+    </object>
 					</div>
 				</div>
 
@@ -90,7 +158,255 @@
 						<div style="clear:both;"></div>
 					</div>
 					<div id="portfolio">
-						Portfolio placeholder
+
+					<div class="games-inner-container">
+
+						<!-- Homemaker -->
+						<div class="portfolio-item">
+							<div class="game-thumbnail-container">
+								<img src="./assets/img/thumbnails/homemaker.png" alt="">
+							</div>
+							<div class="game-description-container">
+								<u><h3>Homemaker</h3></u>
+								<b>Description:</b> Custom self-hostable browser homepage. Simple generation via a config file. Functionality for multiple backgrounds and color choices available. Also enables VIM style keybinding for access to your favorite websites without needing to touch a mouse.<br><br>
+								<b>Technology:</b> Python, Javascript
+								<br>
+								<br>
+								<a href="https://git.domdit.com/dominic/homemaker" target="_blank">
+									<button>🐙 GitHub</button>
+								</a>
+								<a href="https://home.domdit.com/" target="_blank">
+									<button>🌐 Live Demo</button>
+								</a>
+							</div>
+							<div style="clear:both;"></div>
+						</div>
+						<hr>
+
+						<!-- Korabo -->
+						<div class="portfolio-item">
+							<div class="game-thumbnail-container">
+								<img src="./assets/img/thumbnails/korabo.png" alt="">
+							</div>
+							<div class="game-description-container">
+								<u><h3>Korabo</h3></u>
+								<b>Description:</b> Collaborative planning application. Create a prospective event and select a date range in which the event may take place. Share the event with friends/coworkers to provide the days and times they are available. This was built in order to solve the issue of coordinating the hectic schedules of my band members. <br><br>
+								<b>Technology:</b> Python, Django, JavaScript
+								<br>
+								<br>
+								<a href="https://git.domdit.com/dominic/korabo" target="_blank">
+									<button>🐙 GitHub</button>
+								</a>
+							</div>
+							<div style="clear:both;"></div>
+						</div>
+						<hr>
+
+						<!-- Asteroids -->
+						<div class="portfolio-item">
+							<div class="game-thumbnail-container">
+								<img src="./assets/img/thumbnails/asteroids.png" alt="">
+							</div>
+							<div class="game-description-container">
+								<u><h3>Asteroids</h3></u>
+								<b>Description:</b> Asteroids port with a few extra features like power ups and a space ship that shoots homing missiles at you. <br><br>
+								<b>Technology:</b> p5.js, JavaScript
+								<br>
+								<br>
+								<a href="https://git.domdit.com/dominic/asteroids" target="_blank">
+									<button>🐙 GitHub</button>
+								</a>
+								<a href="https://asteroids.domdit.com/" target="_blank">
+									<button>🌐 Live Demo</button>
+								</a>
+							</div>
+							<div style="clear:both;"></div>
+						</div>
+						<hr>
+
+						<!-- Sokobanya -->
+						<div class="portfolio-item">
+							<div class="game-thumbnail-container">
+								<img src="./assets/img/thumbnails/sokobanya.png" alt="">
+							</div>
+							<div class="game-description-container">
+								<u><h3>Sokobanya</h3></u>
+								<b>Description:</b> A puzzle game where you are an old man pushing coal onto burners to keep your sauna hot! <br><br>
+								<b>Technology:</b> JavaScript
+								<br>
+								<br>
+								<a href="https://git.domdit.com/dominic/sokobanya" target="_blank">
+									<button>🐙 GitHub</button>
+								</a>
+								<a href="https://sokobanya.domdit.com/" target="_blank">
+									<button>🌐 Live Demo</button>
+								</a>
+							</div>
+							<div style="clear:both;"></div>
+						</div>
+						<hr>
+
+						<!-- Forum -->
+						<div class="portfolio-item">
+							<div class="game-thumbnail-container">
+								<img src="./assets/img/thumbnails/cwr.png" alt="">
+							</div>
+							<div class="game-description-container">
+								<u><h3>CWR Forum</h3></u>
+								<b>Description:</b> Forum software I made for one of the online communities I am a part of. Includes profile management, full-fledged forum, admin management pages to control user membership status. <br><br>
+								<b>Technology:</b> Python, Django, JavaScript
+								<br>
+								<br>
+								<a href="https://git.domdit.com/dominic/cwr" target="_blank">
+									<button>🐙 GitHub</button>
+								</a>
+							</div>
+							<div style="clear:both;"></div>
+						</div>
+						<hr>
+
+						<!-- Chord Tone -->
+						<div class="portfolio-item">
+							<div class="game-thumbnail-container">
+								<img src="./assets/img/thumbnails/chordtone.png" alt="">
+							</div>
+							<div class="game-description-container">
+								<u><h3>Chord Tone Map Generator</h3></u>
+								<b>Description:</b> Generates a guitar fretboard populated with notes applicable for improvisation over user-provided chords. Advanced improvisation over complex chords made simple. <br><br>
+								<b>Technology:</b> Python, Flask, JavaScript
+								<br>
+								<br>
+								<a href="https://git.domdit.com/dominic/chord_tone" target="_blank">
+									<button>🐙 GitHub</button>
+								</a>
+								<a href="https://chordtone.domdit.com/" target="_blank">
+									<button>🌐 Live Demo</button>
+								</a>
+							</div>
+							<div style="clear:both;"></div>
+						</div>
+						<hr>
+
+						<!-- Pysokoban -->
+						<div class="portfolio-item">
+							<div class="game-thumbnail-container">
+								<img src="./assets/img/thumbnails/pysokoban.png" alt="">
+							</div>
+							<div class="game-description-container">
+								<u><h3>Pysokoban</h3></u>
+								<b>Description:</b> Similar to Sokobanya above: This is a Python port of the same game. All of the gameplay takes place in the terminal. This version includes 500+ more levels! <br><br>
+								<b>Technology:</b> Python
+								<br>
+								<br>
+								<a href="https://git.domdit.com/dominic/pysokoban" target="_blank">
+									<button>🐙 GitHub</button>
+								</a>
+							</div>
+							<div style="clear:both;"></div>
+						</div>
+						<hr>
+
+						<!-- Shrinkin Minkin Website -->
+						<div class="portfolio-item">
+							<div class="game-thumbnail-container">
+								<img src="./assets/img/thumbnails/minkin-site.png" alt="">
+							</div>
+							<div class="game-description-container">
+								<u><h3>Shrinkin-Minkin Website</h3></u>
+								<b>Description:</b> Website I made for my band. There is some interesting functionality under the hood like: Autogenerating link-trees, newsletter subscription and pages for advertising new releases without enforced ads (interrupting our music) from social media sites. <br><br>
+								<b>Technology:</b> Python, Django, JavaScript
+								<br>
+								<br>
+								<a href="https://git.domdit.com/dominic/shrinkinminkin/src/branch/master/shrinkinminkin" target="_blank">
+									<button>🐙 GitHub</button>
+								</a>
+								<a href="https://www.shrinkinminkin.com/" target="_blank">
+									<button>🌐 Live Demo</button>
+								</a>
+							</div>
+							<div style="clear:both;"></div>
+						</div>
+						<hr>
+
+						<!-- Webring -->
+						<div class="portfolio-item">
+							<div class="game-thumbnail-container">
+								<img style="background-color:black;" src="./assets/img/thumbnails/tilde-webring.png" alt="">
+							</div>
+							<div class="game-description-container">
+								<u><h3>NoJS Webring</h3></u>
+								<b>Description:</b> Simple webring that does not require users to add JavaScript to their page. Instead, the webring host handles the JavaScript, and the users simply need to add a block of HTML code. This allows for users who like to keep a minimal website free from bulky JavaScript and calling CDNs. Currently used by at least 2 live webrings (that I know of).<br><br>
+								<b>Technology:</b> JavaScript
+								<br>
+								<br>
+								<a href="https://git.domdit.com/dominic/nojs-webring" target="_blank">
+									<button>🐙 GitHub</button>
+								</a>
+								<a href="https://tilde.green/~jigong/tilde-ring/" target="_blank">
+									<button>🌐 Live Demo</button>
+								</a>
+							</div>
+							<div style="clear:both;"></div>
+						</div>
+						<hr>
+
+
+						<!-- Pong -->
+						<div class="portfolio-item">
+							<div class="game-thumbnail-container">
+								<img src="./assets/img/thumbnails/pong.png" alt="">
+							</div>
+							<div class="game-description-container">
+								<u><h3>Pong</h3></u>
+								<b>Description:</b> You know I had to do it. One of my first coding projects, PONG!<br><br>
+								<b>Technology:</b> p5.js, JavaScript
+								<br>
+								<br>
+								<a href="https://pong.domdit.com/" target="_blank">
+									<button>🌐 Live Demo</button>
+								</a>
+							</div>
+							<div style="clear:both;"></div>
+						</div>
+						<hr>
+
+						<!-- Alambi -->
+						<div class="portfolio-item">
+							<div class="game-thumbnail-container">
+								<img src="./assets/img/thumbnails/alambi.png" alt="">
+							</div>
+							<div class="game-description-container">
+								<u><h3>Alambi</h3></u>
+								<b>Description:</b>Alambi is a blogging engine made with the Python micro-framework Flask. Provides a simple and elegant blogging solution with complete customization of colors and layout. <br><br>
+								<b>Technology:</b> Python, Flask
+								<br>
+								<br>
+								<a href="https://github.com/domdit/Alambi" target="_blank">
+									<button>🐙 GitHub</button>
+								</a>
+							</div>
+							<div style="clear:both;"></div>
+						</div>
+						<hr>
+
+						<!-- Buleku -->
+						<div class="portfolio-item">
+							<div class="game-thumbnail-container">
+								<img src="./assets/img/thumbnails/buleku.png" alt="">
+							</div>
+							<div class="game-description-container">
+								<u><h3>Buleku - Manchu/English/Chinese Dictionary</h3></u>
+								<b>Description:</b> The first online Manchu Dictionary. This was used extensively by my classmates and I for a few years during my time at university. Manchu is a dead language and there were no online dictionaries at the time. Now there are a few reputable ones that I would recommend over this. I am still very proud of this project because it proved to me that I <i>can</i> become a software developer. This is truly my first ever project, made over 6 years ago (excluding the silly geocities sites I made in the early 2000s). <br><br>
+								<b>Technology:</b> JavaScript
+								<br>
+								<br>
+								<a href="https://github.com/domdit/buleku" target="_blank">
+									<button>🐙 GitHub</button>
+								</a>
+							</div>
+							<div style="clear:both;"></div>
+						</div>
+					</div>
 					</div>
 				</div>
 
@@ -241,6 +557,18 @@
 						</div>
 					</div>
 				</div>
+
+			</div>
+			<div class="container">
+				<div class="nav-bar">
+					<center>
+						<button onclick="contact.hide(); resume.hide(); games.hide(); portfolio.show(); dialog.hide()">💼 View Portfolio</button>
+						<button onclick="contact.hide(); portfolio.hide(); games.hide(); resume.show();dialog.hide();">📄 Download Resume</button>
+						<button onclick="resume.hide(); games.hide(); portfolio.hide(); contact.show(); dialog.hide();">📧 Contact Me</button>
+						<button onclick="contact.hide(); resume.hide(); portfolio.hide(); games.show(); dialog.hide()">🕹️ Play Games</button>
+					</center>
+			</div>
+
 			</div>
 		</div>