added phobos section

This commit is contained in:
2025-10-05 21:35:43 -04:00
parent 2ef3aae0fb
commit 0dc17093b9
5 changed files with 99 additions and 28 deletions

View File

@@ -29,7 +29,6 @@ declare module '$env/static/private' {
export const SHELL: string; export const SHELL: string;
export const npm_command: string; export const npm_command: string;
export const SESSION_MANAGER: string; export const SESSION_MANAGER: string;
export const WINDOWID: string;
export const npm_config_userconfig: string; export const npm_config_userconfig: string;
export const QT_SCREEN_SCALE_FACTORS: string; export const QT_SCREEN_SCALE_FACTORS: string;
export const COLORTERM: string; export const COLORTERM: string;
@@ -77,7 +76,6 @@ declare module '$env/static/private' {
export const INIT_CWD: string; export const INIT_CWD: string;
export const CHROME_DESKTOP: string; export const CHROME_DESKTOP: string;
export const KDE_SESSION_UID: string; export const KDE_SESSION_UID: string;
export const ALACRITTY_SOCKET: string;
export const npm_lifecycle_script: string; export const npm_lifecycle_script: string;
export const VSCODE_GIT_ASKPASS_EXTRA_ARGS: string; export const VSCODE_GIT_ASKPASS_EXTRA_ARGS: string;
export const npm_config_npm_version: string; export const npm_config_npm_version: string;
@@ -99,6 +97,7 @@ declare module '$env/static/private' {
export const LC_MEASUREMENT: string; export const LC_MEASUREMENT: string;
export const XDG_VTNR: string; export const XDG_VTNR: string;
export const XDG_SESSION_ID: string; export const XDG_SESSION_ID: string;
export const MANAGERPIDFDID: string;
export const npm_config_user_agent: string; export const npm_config_user_agent: string;
export const ROCM_PATH: string; export const ROCM_PATH: string;
export const npm_execpath: string; export const npm_execpath: string;
@@ -116,13 +115,11 @@ declare module '$env/static/private' {
export const BROWSER: string; export const BROWSER: string;
export const PATH: string; export const PATH: string;
export const npm_config_node_gyp: string; export const npm_config_node_gyp: string;
export const ALACRITTY_LOG: string;
export const ORIGINAL_XDG_CURRENT_DESKTOP: string; export const ORIGINAL_XDG_CURRENT_DESKTOP: string;
export const DBUS_SESSION_BUS_ADDRESS: string; export const DBUS_SESSION_BUS_ADDRESS: string;
export const npm_config_global_prefix: string; export const npm_config_global_prefix: string;
export const KDE_APPLICATIONS_AS_SCOPE: string; export const KDE_APPLICATIONS_AS_SCOPE: string;
export const MAIL: string; export const MAIL: string;
export const ALACRITTY_WINDOW_ID: string;
export const npm_node_execpath: string; export const npm_node_execpath: string;
export const npm_config_engine_strict: string; export const npm_config_engine_strict: string;
export const LC_NUMERIC: string; export const LC_NUMERIC: string;
@@ -162,7 +159,6 @@ declare module '$env/dynamic/private' {
SHELL: string; SHELL: string;
npm_command: string; npm_command: string;
SESSION_MANAGER: string; SESSION_MANAGER: string;
WINDOWID: string;
npm_config_userconfig: string; npm_config_userconfig: string;
QT_SCREEN_SCALE_FACTORS: string; QT_SCREEN_SCALE_FACTORS: string;
COLORTERM: string; COLORTERM: string;
@@ -210,7 +206,6 @@ declare module '$env/dynamic/private' {
INIT_CWD: string; INIT_CWD: string;
CHROME_DESKTOP: string; CHROME_DESKTOP: string;
KDE_SESSION_UID: string; KDE_SESSION_UID: string;
ALACRITTY_SOCKET: string;
npm_lifecycle_script: string; npm_lifecycle_script: string;
VSCODE_GIT_ASKPASS_EXTRA_ARGS: string; VSCODE_GIT_ASKPASS_EXTRA_ARGS: string;
npm_config_npm_version: string; npm_config_npm_version: string;
@@ -232,6 +227,7 @@ declare module '$env/dynamic/private' {
LC_MEASUREMENT: string; LC_MEASUREMENT: string;
XDG_VTNR: string; XDG_VTNR: string;
XDG_SESSION_ID: string; XDG_SESSION_ID: string;
MANAGERPIDFDID: string;
npm_config_user_agent: string; npm_config_user_agent: string;
ROCM_PATH: string; ROCM_PATH: string;
npm_execpath: string; npm_execpath: string;
@@ -249,13 +245,11 @@ declare module '$env/dynamic/private' {
BROWSER: string; BROWSER: string;
PATH: string; PATH: string;
npm_config_node_gyp: string; npm_config_node_gyp: string;
ALACRITTY_LOG: string;
ORIGINAL_XDG_CURRENT_DESKTOP: string; ORIGINAL_XDG_CURRENT_DESKTOP: string;
DBUS_SESSION_BUS_ADDRESS: string; DBUS_SESSION_BUS_ADDRESS: string;
npm_config_global_prefix: string; npm_config_global_prefix: string;
KDE_APPLICATIONS_AS_SCOPE: string; KDE_APPLICATIONS_AS_SCOPE: string;
MAIL: string; MAIL: string;
ALACRITTY_WINDOW_ID: string;
npm_node_execpath: string; npm_node_execpath: string;
npm_config_engine_strict: string; npm_config_engine_strict: string;
LC_NUMERIC: string; LC_NUMERIC: string;

View File

@@ -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", 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" 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() { export async function get_hooks() {

BIN
src/lib/phobos/demo.mp4 Normal file
View File

Binary file not shown.

View File

@@ -104,7 +104,7 @@
style="width: max-content;" style="width: max-content;"
alt="Zoomed out chunk generation" alt="Zoomed out chunk generation"
/> />
<p align="center">Prototype terrain sample</p> <p class="center">Prototype terrain sample</p>
</div> </div>
<p class="indent"> <p class="indent">
I am currently developing an underground-submarine openworld multiplayer I am currently developing an underground-submarine openworld multiplayer
@@ -158,7 +158,7 @@
reworking the tech tree. reworking the tech tree.
</p> </p>
<div align="center"> <div class="center">
<img <img
src="/src/lib/game/flying.webp" src="/src/lib/game/flying.webp"
style="width: 100%; max-width: 600px" style="width: 100%; max-width: 600px"
@@ -242,13 +242,13 @@
style="width: 10vw;" style="width: 10vw;"
alt="Testing Input Response" alt="Testing Input Response"
/> />
<p align="center">Testing Input Response</p> <p class="center">Testing Input Response</p>
<img <img
src="/src/lib/drone/top.jpg" src="/src/lib/drone/top.jpg"
style="width: 10vw;" style="width: 10vw;"
alt="Internal View" alt="Internal View"
/> />
<p align="center">Internal View</p> <p class="center">Internal View</p>
</div> </div>
<h1>Building a UAV</h1> <h1>Building a UAV</h1>
<p> <p>
@@ -311,7 +311,63 @@
</p> </p>
</div> </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> <h1>Work Experience</h1>
<ul> <ul>
<li> <li>
@@ -361,7 +417,7 @@
</ul> </ul>
</div> </div>
<div class="align-left card"> <div class="align-right card">
<h1>Volunteering</h1> <h1>Volunteering</h1>
<p> <p>
I volunteer within the Computer Science, Mathematics, and Statistics I volunteer within the Computer Science, Mathematics, and Statistics

View File

@@ -10,7 +10,8 @@ button {
border-radius: 0px; border-radius: 0px;
background-color: #222; background-color: #222;
border-width: 0; border-width: 0;
padding: 20px;; padding: 20px;
;
} }
.card { .card {
@@ -26,11 +27,13 @@ button {
border-style: solid; border-style: solid;
border-width: 0; border-width: 0;
} }
.align-right { .align-right {
float: right; float: right;
border-right-width: 0px; border-right-width: 0px;
border-left-width: 5px; border-left-width: 5px;
} }
.align-left { .align-left {
float: left; float: left;
border-right-width: 5px; border-right-width: 5px;
@@ -79,25 +82,43 @@ body {
/* https://css-tricks.com/snippets/css/typewriter-effect/ */ /* https://css-tricks.com/snippets/css/typewriter-effect/ */
.typed { .typed {
font-family: monospace; font-family: monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */ overflow: hidden;
border-right: .1em solid orangered; /* The typwriter cursor */ /* Ensures the content is not revealed until the animation */
white-space: nowrap; /* Keeps the content on a single line */ 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 */ /* margin: 0 auto; /* Gives that scrolling effect as the typing happens */
animation: animation:
typing 0.5s steps(16); typing 0.5s steps(16);
} }
.center {
text-align: center;
}
/* The typing effect */ /* The typing effect */
@keyframes typing { @keyframes typing {
from { width: 0 } from {
to { width: 110% } width: 0
}
to {
width: 110%
}
} }
/* The typewriter cursor effect */ /* The typewriter cursor effect */
@keyframes blink { @keyframes blink {
from, to { border-color: orangered}
50% { border-color: transparent; } from,
to {
border-color: orangered
} }
50% {
border-color: transparent;
}
}