images and styling

.svelte-kit/ambient.d.ts

@@ -33,6 +33,7 @@ declare module '$env/static/private' {
 	export const COLORTERM: string;
 	export const XDG_CONFIG_DIRS: string;
 	export const npm_config_cache: string;
+	export const XDG_SESSION_PATH: string;
 	export const XDG_MENU_PREFIX: string;
 	export const TERM_PROGRAM_VERSION: string;
 	export const ICEAUTHORITY: string;
@@ -59,10 +60,8 @@ declare module '$env/static/private' {
 	export const XAUTHORITY: string;
 	export const VSCODE_GIT_ASKPASS_NODE: string;
 	export const MOTD_SHOWN: string;
-	export const GDM_LANG: string;
 	export const GTK2_RC_FILES: string;
 	export const HOME: string;
-	export const USERNAME: string;
 	export const LANG: string;
 	export const LC_PAPER: string;
 	export const XDG_CURRENT_DESKTOP: string;
@@ -70,6 +69,7 @@ declare module '$env/static/private' {
 	export const MEMORY_PRESSURE_WATCH: string;
 	export const WAYLAND_DISPLAY: string;
 	export const GIT_ASKPASS: string;
+	export const XDG_SEAT_PATH: string;
 	export const INVOCATION_ID: string;
 	export const MANAGERPID: string;
 	export const INIT_CWD: string;
@@ -78,7 +78,6 @@ declare module '$env/static/private' {
 	export const npm_lifecycle_script: string;
 	export const VSCODE_GIT_ASKPASS_EXTRA_ARGS: string;
 	export const XKB_DEFAULT_LAYOUT: string;
-	export const XDG_ACTIVATION_TOKEN: string;
 	export const npm_config_npm_version: string;
 	export const XDG_SESSION_CLASS: string;
 	export const LC_IDENTIFICATION: string;
@@ -89,6 +88,7 @@ declare module '$env/static/private' {
 	export const VSCODE_GIT_IPC_HANDLE: string;
 	export const QT_WAYLAND_RECONNECT: string;
 	export const KDE_SESSION_VERSION: string;
+	export const PAM_KWALLET5_LOGIN: string;
 	export const DISPLAY: string;
 	export const npm_lifecycle_event: string;
 	export const GSK_RENDERER: string;
@@ -98,8 +98,10 @@ declare module '$env/static/private' {
 	export const XDG_VTNR: string;
 	export const XDG_SESSION_ID: string;
 	export const npm_config_user_agent: string;
+	export const ROCM_PATH: string;
 	export const npm_execpath: string;
 	export const XDG_RUNTIME_DIR: string;
+	export const MKLROOT: string;
 	export const DEBUGINFOD_URLS: string;
 	export const npm_package_json: string;
 	export const LC_TIME: string;
@@ -113,7 +115,6 @@ declare module '$env/static/private' {
 	export const BROWSER: string;
 	export const PATH: string;
 	export const npm_config_node_gyp: string;
-	export const GDMSESSION: string;
 	export const ORIGINAL_XDG_CURRENT_DESKTOP: string;
 	export const DBUS_SESSION_BUS_ADDRESS: string;
 	export const npm_config_global_prefix: string;
@@ -162,6 +163,7 @@ declare module '$env/dynamic/private' {
 		COLORTERM: string;
 		XDG_CONFIG_DIRS: string;
 		npm_config_cache: string;
+		XDG_SESSION_PATH: string;
 		XDG_MENU_PREFIX: string;
 		TERM_PROGRAM_VERSION: string;
 		ICEAUTHORITY: string;
@@ -188,10 +190,8 @@ declare module '$env/dynamic/private' {
 		XAUTHORITY: string;
 		VSCODE_GIT_ASKPASS_NODE: string;
 		MOTD_SHOWN: string;
-		GDM_LANG: string;
 		GTK2_RC_FILES: string;
 		HOME: string;
-		USERNAME: string;
 		LANG: string;
 		LC_PAPER: string;
 		XDG_CURRENT_DESKTOP: string;
@@ -199,6 +199,7 @@ declare module '$env/dynamic/private' {
 		MEMORY_PRESSURE_WATCH: string;
 		WAYLAND_DISPLAY: string;
 		GIT_ASKPASS: string;
+		XDG_SEAT_PATH: string;
 		INVOCATION_ID: string;
 		MANAGERPID: string;
 		INIT_CWD: string;
@@ -207,7 +208,6 @@ declare module '$env/dynamic/private' {
 		npm_lifecycle_script: string;
 		VSCODE_GIT_ASKPASS_EXTRA_ARGS: string;
 		XKB_DEFAULT_LAYOUT: string;
-		XDG_ACTIVATION_TOKEN: string;
 		npm_config_npm_version: string;
 		XDG_SESSION_CLASS: string;
 		LC_IDENTIFICATION: string;
@@ -218,6 +218,7 @@ declare module '$env/dynamic/private' {
 		VSCODE_GIT_IPC_HANDLE: string;
 		QT_WAYLAND_RECONNECT: string;
 		KDE_SESSION_VERSION: string;
+		PAM_KWALLET5_LOGIN: string;
 		DISPLAY: string;
 		npm_lifecycle_event: string;
 		GSK_RENDERER: string;
@@ -227,8 +228,10 @@ declare module '$env/dynamic/private' {
 		XDG_VTNR: string;
 		XDG_SESSION_ID: string;
 		npm_config_user_agent: string;
+		ROCM_PATH: string;
 		npm_execpath: string;
 		XDG_RUNTIME_DIR: string;
+		MKLROOT: string;
 		DEBUGINFOD_URLS: string;
 		npm_package_json: string;
 		LC_TIME: string;
@@ -242,7 +245,6 @@ declare module '$env/dynamic/private' {
 		BROWSER: string;
 		PATH: string;
 		npm_config_node_gyp: string;
-		GDMSESSION: string;
 		ORIGINAL_XDG_CURRENT_DESKTOP: string;
 		DBUS_SESSION_BUS_ADDRESS: string;
 		npm_config_global_prefix: string;

.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: "1d3uu3c"
+	version_hash: "ott1tf"
 };
 
 export async function get_hooks() {

src/routes/+page.svelte

@@ -20,9 +20,24 @@
     <!-- <p>Computer nerd, gamer, mountain biker, adventurer, hard sci-fi enjoyer, ethics enjoyer, swimmer, jumper</p> -->
 </div>
 
-<div class="align-left card">
+<div id="Game" class="align-left card">
 	<h1>Subterstrike Game Development</h1>
-	<p class="indent">I am currently developing an underground-submarine openworld multiplayer physics inspired game. As a gamer and enjoyer of large, rich maps and depth to gameplay, I would really like to say thats what I started out trying to create. Instead, the story goes that I had this random idea for terrain manipulation. Games like Minecraft and Terraria use squares and cubes, which just feels boring in my opinion. I thought I could do something much more <i>visceral</i> As a sort of tech-demo/proof of concept I programmed a shape that could be modified by boolean geomerty operations, mainly union and subtract with a second polygon. This led to a very interesting, but quickly boring "game" to hop around in. However, since I could drill through and place prettymuch any shape I wanted to, it felt like I could "fly" through the land, much like a submarine "flies" through water.<br/><br/>I implemented some modularly built vehicles with use of graphs theory and object oriented programming, and terrain generation using cellular noise. The reason I used cellular noise is because if you look at the lines between cells, they form a network without dead ends. Then by applying an algorithm using a density function on depth I am able to fine tune the width and density of the caves without impacting their interconnectedness. By using this method chunks can generate completely independant of their neighbor, which is optimal.<br/><br/>"Multiplayer is the hardest part of game dev, maybe release that later" I have been told by a lot of people. However, as a hobby-server configurer and network security nerd, I thought I could take it on. I was right, however as a network security nerd I have more layers of firewalls than I do braincells. Every single time I have an issue with networking, its a firewall. Once I found which ports were blocked, yes multiplayer was easy.<br/><br/>The result? I could fly drilling vehicles through terrain, pop out of the ground or into random caves, mine materials, play hide and seek with friends, and even orbit the planet. One of the things important to me in this game was accurate phyiscs: thrust, torque, gravity, mass, all the fun stuff. While I am a physics minor, I am more importantly a heavy player of physics and rocket science games such as Kerbal Space Program. I was able to glide through AP physics simply because it <i>just part of the games world</i>, it included everything we would learn in the classroom. Realistic phyiscs also added to the depth of gameplay I was looking for.<br/><br/> After some formal computer science education, I discovered new ways to more efficiently implement many of the algorithms I had initially generated and rewrote them ...multiple times. Currently everything runs <i>buttery smooth</i> and framerates are high due to efficienct caching of unloaded chunks, multithreaded chunk generation, gpu accelerated compute shaders to modify chunk density, enhanced use of object oriented programing and graph algorithms to build massive modular vehicles, authoritative server networking to disable hackers, and other performance tweaks.<br/><br/> So this sounds amazing, wheres the game? Well, a game needs graphics, audio, a sound track. As much as I'd love to release it now, its unplayable for these reasons along with a few minor implementations left such as NPC's and reworking the tech tree. Currently I am contracting a graphical artist and sound designer. Alpha tests have been a lot of fun, and investors have appeared. The finish line is close.</p>
+	<div style="float: right; padding: 20px; width: 6vw;">
+		<img src="/src/lib/game/chunkfunc.webp" style="width: max-content;" alt="Zoomed out chunk generation"/>
+		<p align="center">
+			Prototype terrain sample zoomed far out
+		</p>
+	</div>
+	<p class="indent">
+		I am currently developing an underground-submarine openworld multiplayer physics inspired game. As a gamer and enjoyer of large, rich maps and depth to gameplay, I would really like to say thats what I started out trying to create. Instead, the story goes that I had this random idea for terrain manipulation. Games like Minecraft and Terraria use squares and cubes, which just feels boring in my opinion. I thought I could do something much more <i>visceral</i> As a sort of tech-demo/proof of concept I programmed a shape that could be modified by boolean geometry operations, mainly union and subtract with a second polygon. This led to a very interesting, but quickly boring "game" to hop around in. However, since I could drill through and place prettymuch any shape I wanted to, it felt like I could "fly" through the land, much like a submarine "flies" through water.<br/><br/>I implemented some modularly built vehicles with use of graphs theory and object oriented programming, and terrain generation using cellular noise. The reason I used cellular noise is because if you look at the lines between cells, they form a network without dead ends. Then by applying an algorithm using a density function on depth I am able to fine tune the width and density of the caves without impacting their interconnectedness. By using this method chunks can generate completely independent of their neighbor, which is optimal.<br/><br/>"Multiplayer is the hardest part of game dev, maybe release that later" I have been told by a lot of people. However, as a hobby-server configurer and network security nerd, I thought I could take it on. I was right, however as a network security nerd I have more layers of firewalls than I do braincells. Every single time I have an issue with networking, its a firewall. Once I found which ports were blocked, yes multiplayer was easy.<br/><br/>The result? I could fly drilling vehicles through terrain, pop out of the ground or into random caves, mine materials, play hide and seek with friends, and even orbit the planet. One of the things important to me in this game was accurate physics: thrust, torque, gravity, mass, all the fun stuff. While I am a physics minor, I am more importantly a heavy player of physics and rocket science games such as Kerbal Space Program. I was able to glide through AP physics simply because it <i>just part of the games world</i>, it included everything we would learn in the classroom. Realistic physics also added to the depth of gameplay I was looking for.<br/><br/> After some formal computer science education, I discovered new ways to more efficiently implement many of the algorithms I had initially generated and rewrote them ...multiple times. Currently everything runs <i>buttery smooth</i> and framerates are high due to efficient caching of unloaded chunks, multithreaded chunk generation, gpu accelerated compute shaders to modify chunk density, enhanced use of object oriented programing and graph algorithms to build massive modular vehicles, authoritative server networking to disable hackers, and other performance tweaks.<br/><br/> So this sounds amazing, where's the game? Well, a game needs graphics, audio, a sound track. As much as I'd love to release it now, its unplayable for these reasons along with a few minor implementations left such as NPC's and reworking the tech tree. Currently I am contracting a graphical artist and sound designer. Alpha tests have been a lot of fun, and investors have appeared. The finish line is close.
+	</p>
+
+	<div align="center">
+		<img src="/src/lib/game/flying.webp" style="width: max-content;" alt="Flying Vehicle"/>
+		<p>
+			A grid flying through caves, preceding graphics
+		</p>
+	</div>
 </div>
 
 <div class="align-right card">
@@ -31,7 +46,7 @@
 	<ul>
 		<li>
 			<h3>NGINX Reverse Proxy</h3>
-			<p>This server is the internets access to all of my other servers, and the glue holding them together. I was using IPTables breifly but have moved to NGINX to forward traffic from specified ports onto private servers connected to it.</p>
+			<p>This server is the internets access to all of my other servers, and the glue holding them together. I was using IPTables briefly but have moved to NGINX to forward traffic from specified ports onto private servers connected to it.</p>
 		</li>
 		<li>
 			<h3>Lightweight Server</h3>
@@ -45,28 +60,28 @@
 </div>
 
 <div id="UAV" class = "align-left card">
-	<div style="float: right; padding: 20px;">
+	<div style="float: right; padding: 20px; width: 10vw;">
 		<img src="/src/lib/drone/graphing.jpg" style="width: 10vw;" alt="Testing Input Response"/>
 		<p align="center">
-			Testing Input Response
+			Testing Input<br/>Response
 		</p>
 		<img src="/src/lib/drone/top.jpg" style="width: 10vw;" alt="Internal View"/>
 		<p align="center">
 			Internal View
 		</p>
 	</div>
-	<h1>Designed and Built a UAV</h1>
+	<h1>Building a UAV</h1>
 	<p>
 		I chose to build a drone from scratch for my AP Physics final project. We were given an open ended assignment to <i>build something cool</i> and I wanted a drone. My choice was much more ambitious than the course required, and took quite a while to complete.<br/><br/>
 		
-		For the drones frame I finally had an excuse to purchase a 3d printer. I modelled the frame and arms modularly to support future upgrades and replacements from damage, reducing the cost of operation. Initially I was using some 3d printed torodial propellers due to their higher efficiency and lower sounds usage. Due to safety concerns of the propellers not withstanding tension at higher RPMs and exploding I switched to arcylic propellers. A challenge in designing the frame was leaving enough room to contain the volume of the wires. I went with the Elegoo Neptune 3 as the printer was open-source and had a much better cost-to-utility than proprietary printers such as the Ender series. I am not sponsored I just really like the printer.<br/><br/>
+		For the drones frame I finally had an excuse to purchase a 3d printer. I modelled the frame and arms modularly to support future upgrades and replacements from damage, reducing the cost of operation. Initially I was using some 3d printed torodial propellers due to their higher efficiency and lower sounds usage. Due to safety concerns of the propellers not withstanding tension at higher RPMs and exploding I switched to some generic acrylic propellers I bought. A challenge in designing the frame was leaving enough room to contain the volume of the wires. I went with the Elegoo Neptune 3 as the printer was open-source and had a much better cost-to-utility than proprietary printers such as the Ender series. I am not sponsored I just really like the printer.<br/><br/>
 	</p>
 	<p>
 		The flight computer was the most difficult part to program. Using an ultrasonic distance sensor, gyroscope, and accelerometer the drone has enough information to probably never crash. The autopilot is implemented on an Arduino UNO using a <a href="https://en.wikipedia.org/wiki/Proportional%E2%80%93integral%E2%80%93derivative_controller">PID controller</a> for stabolization. The autopilot quality is currently impacted every time the drones mass distribution changes, which can be fixed with a reinforcement machine learning algorithm. For the higher level programming such as flight automation, video transmission and WiFi communications I used a Raspberry Pi Pico. There is also a 2.4GHz line of sight receiver for manual control. A future upgrade may contain a SIM card for near-infinite remote control connection, but drone regulations would make this difficult.<br/><br/>
 
-		The power system is the most physically challenging portion of the drone. The motors took 14.6 Volts, while the UNO microcontroller took 5 Volts, and the Pico and most sensors run at 3.3 Volts. All of the power to the motors ran through the power distribution board, which I modified to also output the lower voltages and used Bidirectional Logic Level Converters to shift between 3.3 and 5V signals where needed. A potentional flaw with having all the power coming from the same source is spikes in energy consumption to the motors may cause the microcomputers to receive too little power, which could be fixed with a capacitor. Luckily, I havn't experienced this yet as the 2C discharge rate on the 2.5Ah capacity battery is more than enough. Having a battery this big does mean it takes up about half the internal electronics volume and is half of the drones mass, but it can also maintain full throttle for half an hour making for long flights.<br/><br/>
+		The power system is the most physically challenging portion of the drone. The motors took 14.6 Volts, while the UNO microcontroller took 5 Volts, and the Pico and most sensors run at 3.3 Volts. All of the power to the motors ran through the power distribution board, which I modified to also output the lower voltages and used Bidirectional Logic Level Converters to shift between 3.3 and 5V signals where needed. A potential flaw with having all the power coming from the same source is spikes in energy consumption to the motors may cause the microcomputers to receive too little power, which could be fixed with a capacitor. Luckily, I haven't experienced this yet as the 2C discharge rate on the 2.5Ah capacity battery is more than enough. Having a battery this big does mean it takes up about half the internal electronics volume and is half of the drones mass, but it can also maintain full throttle for half an hour making for long flights.<br/><br/>
 
-		The motors I used were a bit overkill for a 1.1kg drone, as going past 20% throttle sends it shooting through the sky -- which is not a bad issue to have. Here's the technical numbers behind that: I have propellers with a 6cm radius on motors with a 2450KV rating (2450 rpm per volt) at peaking at 14.6 Volts. From this the tip speed is computer to be 225m/s under no load at max throttle, quite a lot more than what is safe or nessecary to get into the air.
+		The motors I used were a bit overkill for a 1.1kg drone, as going past 20% throttle sends it shooting through the sky -- which is not a bad issue to have. Here's the technical numbers behind that: I have propellers with a 6cm radius on motors with a 2450KV rating (2450 rpm per volt) at peaking at 14.6 Volts. From this the tip speed is computer to be 225m/s under no load at max throttle, quite a lot more than what is safe or necessary to get into the air.
 	</p>
 </div>
 
@@ -78,10 +93,10 @@
 			<p>Parkside Pool needed to automate their systems, and I had already worked as the head lifeaurd and Director of Operations so I knew exactly what needed to be done. We needed to automate:</p>
 			<ol>
 				 <li>Receiving swimming lesson applications and payments</li>
-				 <li>Design schedules based on many parameters include age, level, class size, siblings in adjacent classes, given availibility, and more soft requirements</li>
+				 <li>Design schedules based on many parameters include age, level, class size, siblings in adjacent classes, given availability, and more soft requirements</li>
 				 <li>Send swimming lesson application confirmations</li>
 			</ol>
-			<p>Implementing the reception and confirmation of lessons was striaghtforward enough with a Flask site using Stripe for payments, and Firebase service for sending confirmation emails. The difficult part was building the schedule, which is a form of the <a href="https://en.wikipedia.org/wiki/Nurse_scheduling_problem">NP-Hard Nurse Scheduling Problem</a>. As there were at max a few hundred students per schedule, I solved this using a recursive algorithm and scoring system to choose the best generated option.</p>
+			<p>Implementing the reception and confirmation of lessons was straightforward enough with a Flask site using Stripe for payments, and Firebase service for sending confirmation emails. The difficult part was building the schedule, which is a form of the <a href="https://en.wikipedia.org/wiki/Nurse_scheduling_problem">NP-Hard Nurse Scheduling Problem</a>. As there were at max a few hundred students per schedule, I solved this using a recursive algorithm and scoring system to choose the best generated option.</p>
 		</li>
 	</ul>
 </div>
@@ -93,7 +108,7 @@
 
 <!-- <p>Computer Science Student, Interested in Cyber Security, Networiking, Open source, and always learning something new</p>-->
 
-<!-- Game dev, servers experiements, cyberpatriot, linux, ai serversresume-->
+<!-- Game dev, servers experiments, cyberpatriot, linux, ai serversresume-->
 
 <script lang="ts">
     export function animateTyping(node: HTMLElement, texts: string[]) {

src/style.css

@@ -21,16 +21,16 @@ button {
     margin-bottom: 2rem;
     padding: 12px;
     background-color: #222;
+    padding-right: 40px;
+    padding-left: 40px;
 }
 .align-right {
     float: right;
     border-left: 0.8rem solid orangered;
-    padding-right: 20px;
 }
 .align-left {
     float: left;
     border-right: 0.8rem solid orangered;
-    padding-left: 20px;
 }
 
 .indent {
@@ -45,7 +45,7 @@ button {
 }
 
 body {
-    background-color: #000;
+    background-image: linear-gradient(180deg, #111, #333, #111);
     margin: 0px;
 }