added phobos section

2025-10-05 21:35:43 -04:00
parent 2ef3aae0fb
commit 0dc17093b9
5 changed files with 99 additions and 28 deletions
--- a/.svelte-kit/ambient.d.ts
+++ b/.svelte-kit/ambient.d.ts
@@ -29,7 +29,6 @@ declare module '$env/static/private' {
 	export const SHELL: string;
 	export const npm_command: string;
 	export const SESSION_MANAGER: string;
-	export const WINDOWID: string;
 	export const npm_config_userconfig: string;
 	export const QT_SCREEN_SCALE_FACTORS: string;
 	export const COLORTERM: string;
@@ -77,7 +76,6 @@ declare module '$env/static/private' {
 	export const INIT_CWD: string;
 	export const CHROME_DESKTOP: string;
 	export const KDE_SESSION_UID: string;
-	export const ALACRITTY_SOCKET: string;
 	export const npm_lifecycle_script: string;
 	export const VSCODE_GIT_ASKPASS_EXTRA_ARGS: string;
 	export const npm_config_npm_version: string;
@@ -99,6 +97,7 @@ declare module '$env/static/private' {
 	export const LC_MEASUREMENT: string;
 	export const XDG_VTNR: string;
 	export const XDG_SESSION_ID: string;
+	export const MANAGERPIDFDID: string;
 	export const npm_config_user_agent: string;
 	export const ROCM_PATH: string;
 	export const npm_execpath: string;
@@ -116,13 +115,11 @@ declare module '$env/static/private' {
 	export const BROWSER: string;
 	export const PATH: string;
 	export const npm_config_node_gyp: string;
-	export const ALACRITTY_LOG: string;
 	export const ORIGINAL_XDG_CURRENT_DESKTOP: string;
 	export const DBUS_SESSION_BUS_ADDRESS: string;
 	export const npm_config_global_prefix: string;
 	export const KDE_APPLICATIONS_AS_SCOPE: string;
 	export const MAIL: string;
-	export const ALACRITTY_WINDOW_ID: string;
 	export const npm_node_execpath: string;
 	export const npm_config_engine_strict: string;
 	export const LC_NUMERIC: string;
@@ -162,7 +159,6 @@ declare module '$env/dynamic/private' {
 		SHELL: string;
 		npm_command: string;
 		SESSION_MANAGER: string;
-		WINDOWID: string;
 		npm_config_userconfig: string;
 		QT_SCREEN_SCALE_FACTORS: string;
 		COLORTERM: string;
@@ -210,7 +206,6 @@ declare module '$env/dynamic/private' {
 		INIT_CWD: string;
 		CHROME_DESKTOP: string;
 		KDE_SESSION_UID: string;
-		ALACRITTY_SOCKET: string;
 		npm_lifecycle_script: string;
 		VSCODE_GIT_ASKPASS_EXTRA_ARGS: string;
 		npm_config_npm_version: string;
@@ -232,6 +227,7 @@ declare module '$env/dynamic/private' {
 		LC_MEASUREMENT: string;
 		XDG_VTNR: string;
 		XDG_SESSION_ID: string;
+		MANAGERPIDFDID: string;
 		npm_config_user_agent: string;
 		ROCM_PATH: string;
 		npm_execpath: string;
@@ -249,13 +245,11 @@ declare module '$env/dynamic/private' {
 		BROWSER: string;
 		PATH: string;
 		npm_config_node_gyp: string;
-		ALACRITTY_LOG: string;
 		ORIGINAL_XDG_CURRENT_DESKTOP: string;
 		DBUS_SESSION_BUS_ADDRESS: string;
 		npm_config_global_prefix: string;
 		KDE_APPLICATIONS_AS_SCOPE: string;
 		MAIL: string;
-		ALACRITTY_WINDOW_ID: string;
 		npm_node_execpath: string;
 		npm_config_engine_strict: string;
 		LC_NUMERIC: string;
--- a/.svelte-kit/generated/server/internal.js
+++ b/.svelte-kit/generated/server/internal.js
@@ -21,7 +21,7 @@ export const options = {
 		app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"utf-8\" />\n        <link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n        <link rel=\"stylesheet\" href=\"src/style.css\"\n        " + head + "\n    </head>\n    <body id=\"background\" data-sveltekit-preload-data=\"hover\">\n        <div class=\"background\">" + body + "</div>\n    </body>\n</html>\n\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
-	version_hash: "12nomjj"
+	version_hash: "1jkp56i"
 };

 export async function get_hooks() {
--- a/src/lib/phobos/demo.mp4
+++ b/src/lib/phobos/demo.mp4
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -104,7 +104,7 @@
 			style="width: max-content;"
 			alt="Zoomed out chunk generation"
 		/>
-		<p align="center">Prototype terrain sample</p>
+		<p class="center">Prototype terrain sample</p>
 	</div>
 	<p class="indent">
 		I am currently developing an underground-submarine openworld multiplayer
@@ -158,7 +158,7 @@
 		reworking the tech tree.
 	</p>

-	<div align="center">
+	<div class="center">
 		<img
 			src="/src/lib/game/flying.webp"
 			style="width: 100%; max-width: 600px"
@@ -242,13 +242,13 @@
 			style="width: 10vw;"
 			alt="Testing Input Response"
 		/>
-		<p align="center">Testing Input Response</p>
+		<p class="center">Testing Input Response</p>
 		<img
 			src="/src/lib/drone/top.jpg"
 			style="width: 10vw;"
 			alt="Internal View"
 		/>
-		<p align="center">Internal View</p>
+		<p class="center">Internal View</p>
 	</div>
 	<h1>Building a UAV</h1>
 	<p>
@@ -311,7 +311,63 @@
 	</p>
 </div>

-<div class="align-right card">
+<div id="Phobos" class="align-right card">
+	<h1>Phobos</h1>
+	<p>
+		One of the coolest things I've developed is a game, fully written in
+		assembly.<br /><br />
+		I say this because it is the perfect intersection of many things I enjoy;
+		low level programming, physics, space, simulation development, and game design.
+		Also small enough of a project that I could complete it in under a couple
+		of months, so another win. I even named the game based on the emulator, as
+		Phobos is a moon of Mars <br /><br />The instructions for this
+		assignment were very broad, to develop a platformer game in assembly.
+		This left a lot of room for creative freedom, especially due to the
+		loose definition of platformer. With infinite time I would have
+		developed a whole rocket simulator, and used the justification that the
+		launchpad was a platform.
+		<br />
+		<br /> On the technical side this was a very difficult project. There are
+		only about 16 variables actually usable in MIPS, and a lot of them are reserved
+		to specific logical controls under best practice. Then following the many
+		loops and recursive, real-time functionality required extensive and efficient
+		use of the stack. Ideally accessing a few bytes shouldn't strike the fear
+		of low framerates to mind, but the Mars-MIPS emulator I was using was far
+		from efficient.
+	</p>
+	<h3>Notable Features</h3>
+	<ul>
+		<li>Raycast collision detection and repositioning</li>
+		<li>Sub-pixel velocity and positioning</li>
+		<li>Awesome pixel graphics (the rocket shoots fire!)</li>
+		<li>High framerates (for a low-performance emulator)</li>
+		<li>Enemies shooting at you!</li>
+		<li>Loot pickups</li>
+	</ul>
+	<p>
+		Probably the most annoying part of this was that the emulator couldn't
+		handle simutaineous key inputs. Fortunately I have over a thousand hours
+		experience landing rockets on the <a
+			href="https://kerbalspaceprogram.fandom.com/wiki/Mun">Mün</a
+		>
+		so I was comfortable giving a few unique key inputs per second. I never imagined
+		this is something I would be proud, and I still don't think I am. However,
+		it works.<br /><br />At this point you may have realized I am a bit of a
+		space nerd. Enjoy this recording I made at 1am demonstrating the
+		features of my game to a TA, compressed to the point that the audio has
+		texture.
+	</p>
+	<video width="90%" controls>
+		<track kind="captions" />
+		<source src="src/lib/phobos/demo.mp4" type="video/mp4" />
+		Your browser does not support the video.
+	</video><br />
+	The
+	<a href="https://github.com/jjanella/Phobos">source code</a> is also available
+	for your enjoyment.
+</div>
+
+<div class="align-left card">
 	<h1>Work Experience</h1>
 	<ul>
 		<li>
@@ -361,7 +417,7 @@
 	</ul>
 </div>

-<div class="align-left card">
+<div class="align-right card">
 	<h1>Volunteering</h1>
 	<p>
 		I volunteer within the Computer Science, Mathematics, and Statistics
--- a/src/style.css
+++ b/src/style.css
@@ -10,7 +10,8 @@ button {
    border-radius: 0px;
    background-color: #222;
    border-width: 0;
-    padding: 20px;;
+    padding: 20px;
+    ;
 }

 .card {
@@ -26,11 +27,13 @@ button {
    border-style: solid;
    border-width: 0;
 }
+
 .align-right {
    float: right;
    border-right-width: 0px;
    border-left-width: 5px;
 }
+
 .align-left {
    float: left;
    border-right-width: 5px;
@@ -79,25 +82,43 @@ body {
 /* https://css-tricks.com/snippets/css/typewriter-effect/ */
 .typed {
    font-family: monospace;
-    overflow: hidden; /* Ensures the content is not revealed until the animation */
-    border-right: .1em solid orangered; /* The typwriter cursor */
-    white-space: nowrap; /* Keeps the content on a single line */
+    overflow: hidden;
+    /* Ensures the content is not revealed until the animation */
+    border-right: .1em solid orangered;
+    /* The typwriter cursor */
+    white-space: nowrap;
+    /* Keeps the content on a single line */
    /* margin: 0 auto; /* Gives that scrolling effect as the typing happens */

    animation:
-    typing 0.5s steps(16);
+        typing 0.5s steps(16);
+}
+
+.center {
+    text-align: center;
 }


 /* The typing effect */
@keyframes typing {
-    from { width: 0 }
-    to { width: 110% }
+    from {
+        width: 0
+    }
+
+    to {
+        width: 110%
+    }
 }

 /* The typewriter cursor effect */
@keyframes blink {
-    from, to { border-color: orangered}
-    50% { border-color: transparent; }
-}

+    from,
+    to {
+        border-color: orangered
+    }
+
+    50% {
+        border-color: transparent;
+    }
+}