From ad62a7804ed595fe472c390bc580c2ff7c8c6e7a Mon Sep 17 00:00:00 2001
From: Johnathon Slightham <slighthamj@gmail.com>
Date: Thu, 12 May 2022 21:34:01 -0400
Subject: [PATCH] Updated Website

---
 package-lock.json                   |  36 +-
 public/index.html                   |  10 +-
 src/App.vue                         |   2 +
 src/components/ProfileComponent.vue |   6 +-
 src/views/CodeServer.vue            |   4 +-
 src/views/Home.vue                  |   2 -
 src/views/Work.vue                  | 732 +++++++++++++++-------------
 src/views/Zork.vue                  |   2 +-
 tailwind.config.js                  |   5 +
 9 files changed, 421 insertions(+), 378 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 09fba11..6ab5dab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3365,9 +3365,9 @@
       }
     },
     "node_modules/async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "dev": true,
       "dependencies": {
         "lodash": "^4.17.14"
@@ -7521,9 +7521,9 @@
       }
     },
     "node_modules/log-update/node_modules/ansi-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -7887,9 +7887,9 @@
       }
     },
     "node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
     "node_modules/minipass": {
@@ -14614,9 +14614,9 @@
       "dev": true
     },
     "async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.14"
@@ -17706,9 +17706,9 @@
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+          "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
           "dev": true
         },
         "cli-cursor": {
@@ -17982,9 +17982,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
     "minipass": {
diff --git a/public/index.html b/public/index.html
index 3e5a139..5ccef4d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,11 +5,17 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Johnathon Slightham</title>
+    <style>
+      html {
+        background: #111827;
+
+      }
+    </style>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>Sorry, but my website was written with the Vue framework, and thus requires JavaScript enabled! Please enable JavaScript in order to view my website.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
diff --git a/src/App.vue b/src/App.vue
index a9e4885..d58cb3c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,5 @@
 <template>
+ <div class="md:container md:mx-auto">
   <div class="text-gray-400 bg-gray-900 body-font app">
     <header class="text-gray-400 bg-gray-900 body-font">
       <div
@@ -79,6 +80,7 @@
       <router-view />
     </transition>
   </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/components/ProfileComponent.vue b/src/components/ProfileComponent.vue
index 4612244..9f88358 100644
--- a/src/components/ProfileComponent.vue
+++ b/src/components/ProfileComponent.vue
@@ -13,12 +13,14 @@
       "
     >
       <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 md:mb-0 mb-10">
+      <center>
         <img
           class="object-cover object-center rounded"
           style="max-height: 350px;"
           alt="hero"
           :src="profile"
         />
+        </center>
       </div>
       <div
         class="
@@ -36,9 +38,9 @@
           Johnathon Slightham
         </h1>
         <p class="mb-8 leading-relaxed">
-          I am a computer engineering student at the University of Waterloo. I have a passion for machine learning, and love working on open source projects.
+          I am an undergraduate student studying Computer Engineering at the University of Waterloo. I love open source projects, and working on useful applications that are used by the public. The majority of my work so far has been in Full-Stack development, with a focus on Back End develoment. I also have a passion for machine learning, which I am currently working towards developing my skills in.
           <br><br>
-          Browse my website to check out some of my projects or connect with me!
+          Browse my website to check out some of my projects or connect with me. I am always open to working on new projects!
         </p>
         <div class="flex justify-center">
           <router-link to="/resume">
diff --git a/src/views/CodeServer.vue b/src/views/CodeServer.vue
index 1a43dad..802b173 100644
--- a/src/views/CodeServer.vue
+++ b/src/views/CodeServer.vue
@@ -121,7 +121,7 @@ export default {
   methods: {
     async runCode() {
       this.data = [];
-      let res = await fetch("http://localhost:8000/run/run", {
+      let res = await fetch("http://jslightham.com:8000/run/run", {
         method: "POST",
         headers: {
           Accept: "application/json",
@@ -152,7 +152,7 @@ export default {
       return highlight(code, languages.js); // languages.<insert language> to return html with markup
     },
     async getLanguages() {
-      let res = await fetch("http://localhost:8000/run/languages");
+      let res = await fetch("http://jslightham:8000/run/languages");
       this.languages = await res.json();
     },
   },
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a3cd16b..5a11b52 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
     <ProfileComponent></ProfileComponent>
-  </div>
 </template>
 
 <script>
diff --git a/src/views/Work.vue b/src/views/Work.vue
index c9623c0..d56a0b2 100644
--- a/src/views/Work.vue
+++ b/src/views/Work.vue
@@ -1,371 +1,401 @@
 <template>
-  <section class="text-gray-400 bg-gray-900 body-font overflow-hidden">
-    <div class="container px-5 py-24 mx-auto">
-        <p>Check out some of my projects! I'm not yet done setting up each project on my VPS yet, so not every project is hosted.</p>
-        <br>
-      <div class="-my-8 divide-y-2 divide-gray-800">
+    <section class="text-gray-400 bg-gray-900 body-font overflow-hidden">
+      <div class="container px-5 py-24 mx-auto">
+          <p>Check out some of my projects! I'm not yet done setting up each project on my VPS yet, so not every project is hosted.</p>
+          <br>
+          
+        <div class="-my-8 divide-y-2 divide-gray-800">
         <div class="py-8 flex flex-wrap md:flex-nowrap">
-          <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-            <span class="font-semibold title-font text-white">Vue, TailwindCSS</span>
-            <span class="mt-1 text-gray-500 text-sm">March 2022</span>
+            <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span class="font-semibold title-font text-white">Unity, C#</span>
+              <span class="mt-1 text-gray-500 text-sm">April 2022</span>
+            </div>
+            <div class="md:flex-grow">
+              <h2 class="text-2xl font-medium text-white title-font mb-2">
+                Row Game
+              </h2>
+              <p class="leading-relaxed">
+                Worked with a team to create a 2D game in unity for a Game Jam.
+              </p>
+              <a href="https://canarybenn.itch.io/row" class="text-blue-400 inline-flex items-center mt-4"
+                >Play on itch.io
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </a>
+            </div>
           </div>
-          <div class="md:flex-grow">
-            <h2 class="text-2xl font-medium text-white title-font mb-2">
-              Personal Website
-            </h2>
-            <p class="leading-relaxed">
-              Used VueJS, and TailwindCSS to build a personal website to showcase my work experience and projects. 
-            </p>
-            <a href="https://github.com/jslightham/jslightham.github.io" class="text-blue-400 inline-flex items-center mt-4"
-              >View on GitHub
-              <svg
-                class="w-4 h-4 ml-2"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M5 12h14"></path>
-                <path d="M12 5l7 7-7 7"></path>
-              </svg>
-            </a>
+          <div class="py-8 flex flex-wrap md:flex-nowrap">
+            <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span class="font-semibold title-font text-white">Vue, TailwindCSS</span>
+              <span class="mt-1 text-gray-500 text-sm">March 2022</span>
+            </div>
+            <div class="md:flex-grow">
+              <h2 class="text-2xl font-medium text-white title-font mb-2">
+                Personal Website
+              </h2>
+              <p class="leading-relaxed">
+                Used VueJS, and TailwindCSS to build a personal website to showcase my work experience and projects. 
+              </p>
+              <a href="https://github.com/jslightham/jslightham.github.io" class="text-blue-400 inline-flex items-center mt-4"
+                >View on GitHub
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </a>
+            </div>
           </div>
-        </div>
-        <div
-          class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
-        >
-          <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-            <span class="font-semibold title-font text-white">NodeJS, Express, Docker</span>
-            <span class="mt-1 text-gray-500 text-sm">March 2022</span>
+          <div
+            class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
+          >
+            <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span class="font-semibold title-font text-white">NodeJS, Express, Docker</span>
+              <span class="mt-1 text-gray-500 text-sm">March 2022</span>
+            </div>
+            <div class="md:flex-grow">
+              <h2 class="text-2xl font-medium text-white title-font mb-2">
+                REST Remote Code Server
+              </h2>
+              <p class="leading-relaxed">
+                Built a RESTful API that can compile and run code on a remote server in isolated docker containers. Easily add support for any language that can be compiled and run from a bash script.
+              </p>
+              <router-link to="/codeserver">
+              <a class="text-blue-400 inline-flex items-center mt-4"
+                >See Project
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </a>
+              </router-link>
+            </div>
           </div>
-          <div class="md:flex-grow">
-            <h2 class="text-2xl font-medium text-white title-font mb-2">
-              REST Remote Code Server
-            </h2>
-            <p class="leading-relaxed">
-              Built a RESTful API that can compile and run code on a remote server in isolated docker containers. Easily add support for any language that can be compiled and run from a bash script.
-            </p>
-            <router-link to="/codeserver">
-            <a class="text-blue-400 inline-flex items-center mt-4"
-              >See Project
-              <svg
-                class="w-4 h-4 ml-2"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M5 12h14"></path>
-                <path d="M12 5l7 7-7 7"></path>
-              </svg>
-            </a>
-            </router-link>
+          <div
+            class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
+          >
+            <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span class="font-semibold title-font text-white">NodeJS, Express, MongoDB</span>
+              <span class="mt-1 text-gray-500 text-sm">Oct 2021</span>
+            </div>
+            <div class="md:flex-grow">
+              <h2 class="text-2xl font-medium text-white title-font mb-2">
+                Kno-Logic API
+              </h2>
+              <p class="leading-relaxed">
+                  Built a backend with a REST interface for a news aggregation project. Assisted with integration into the frontend react native applicaton.
+              </p>
+              <a href="https://github.com/jslightham/kno-logic-api" class="text-blue-400 inline-flex items-center mt-4"
+                >View on GitHub
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </a>
+            </div>
           </div>
-        </div>
-        <div
-          class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
-        >
-          <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-            <span class="font-semibold title-font text-white">NodeJS, Express, MongoDB</span>
-            <span class="mt-1 text-gray-500 text-sm">Oct 2021</span>
+          <div
+            class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
+          >
+            <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span class="font-semibold title-font text-white">Java, NodeJS</span>
+              <span class="mt-1 text-gray-500 text-sm">Aug 2021</span>
+            </div>
+            <div class="md:flex-grow">
+              <h2 class="text-2xl font-medium text-white title-font mb-2">
+                Brute Forced War Game
+              </h2>
+              <p class="leading-relaxed">
+                An experiment to learn using crowdsourced computing and multithreaded programming in Java to brute force a solution.
+              </p>
+              <a href="https://github.com/jslightham/brute-forced-war-game" class="text-blue-400 inline-flex items-center mt-4"
+                >View on GitHub
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </a>
+            </div>
           </div>
-          <div class="md:flex-grow">
-            <h2 class="text-2xl font-medium text-white title-font mb-2">
-              Kno-Logic API
-            </h2>
-            <p class="leading-relaxed">
-                Built a backend with a REST interface for a news aggregation project. Assisted with integration into the frontend react native applicaton.
-            </p>
-            <a href="https://github.com/jslightham/kno-logic-api" class="text-blue-400 inline-flex items-center mt-4"
-              >View on GitHub
-              <svg
-                class="w-4 h-4 ml-2"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M5 12h14"></path>
-                <path d="M12 5l7 7-7 7"></path>
-              </svg>
-            </a>
+          <div
+            class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
+          >
+            <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span class="font-semibold title-font text-white">Unity, C#</span>
+              <span class="mt-1 text-gray-500 text-sm">Jul 2021</span>
+            </div>
+            <div class="md:flex-grow">
+              <h2 class="text-2xl font-medium text-white title-font mb-2">
+                Zero Waste Game
+              </h2>
+              <p class="leading-relaxed">
+                A group project where we created a multiplayer space exploration game in Unity. This game is currently hosted in a private repository, thus I cannot provide a link.
+              </p>
+            </div>
           </div>
-        </div>
-        <div
-          class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
-        >
-          <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-            <span class="font-semibold title-font text-white">Java, NodeJS</span>
-            <span class="mt-1 text-gray-500 text-sm">Aug 2021</span>
+          <div
+            class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
+          >
+            <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span class="font-semibold title-font text-white">NodeJS, Vue, TensorflowJS, Websockets</span>
+              <span class="mt-1 text-gray-500 text-sm">Feb 2021</span>
+            </div>
+            <div class="md:flex-grow">
+              <h2 class="text-2xl font-medium text-white title-font mb-2">
+                Multiplayer Stick Figure Game
+              </h2>
+              <p class="leading-relaxed">
+                A project for a hackathon, where my group created a multiplayer game. The game's input was the user's camera that used TensorflowJS to place a realtime virtual representation of them in the game. The player's positions were synchronized via websockets, which allowed games such as soccer and volleyball to be played virtually.
+              </p>
+              <a href="https://github.com/jslightham/multiplayer-stickfigure-game" class="text-blue-400 inline-flex items-center mt-4"
+                >View on GitHub
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </a>
+            </div>
           </div>
-          <div class="md:flex-grow">
-            <h2 class="text-2xl font-medium text-white title-font mb-2">
-              Brute Forced War Game
-            </h2>
-            <p class="leading-relaxed">
-              An experiment to learn using crowdsourced computing and multithreaded programming in Java to brute force a solution.
-            </p>
-            <a href="https://github.com/jslightham/brute-forced-war-game" class="text-blue-400 inline-flex items-center mt-4"
-              >View on GitHub
-              <svg
-                class="w-4 h-4 ml-2"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M5 12h14"></path>
-                <path d="M12 5l7 7-7 7"></path>
-              </svg>
-            </a>
+          <div
+            class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
+          >
+            <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span class="font-semibold title-font text-white">NodeJS, Vue, Handbrake, FFMPEG, Video.js, MongoDB</span>
+              <span class="mt-1 text-gray-500 text-sm">Dec 2020</span>
+            </div>
+            <div class="md:flex-grow">
+              <h2 class="text-2xl font-medium text-white title-font mb-2">
+                NodeJS Video Streamer
+              </h2>
+              <p class="leading-relaxed">
+                A simple clone project of the popular video sharing website YouTube. Automatically transcodes uploads, modern video player (Video.js), video and audio streaming from NodeJS backend, automatic thumbnail generation through FFmpeg, comment &amp; like system, and metadata storage in MongoDB.
+              </p>
+              <a href="https://github.com/jslightham/NodeJS-Video-Streamer" class="text-blue-400 inline-flex items-center mt-4"
+                >View on GitHub
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </a>
+            </div>
           </div>
-        </div>
-        <div
-          class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
-        >
-          <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-            <span class="font-semibold title-font text-white">Unity, C#</span>
-            <span class="mt-1 text-gray-500 text-sm">Jul 2021</span>
+          <div
+            class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
+          >
+            <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span class="font-semibold title-font text-white">HTML, Javascript</span>
+              <span class="mt-1 text-gray-500 text-sm">Jun 2020</span>
+            </div>
+            <div class="md:flex-grow">
+              <h2 class="text-2xl font-medium text-white title-font mb-2">
+                Collision Simulator
+              </h2>
+              <p class="leading-relaxed">
+                A javascript canvas collision simulation in 2D for a combined high school Physics and Computer Science final project.
+              </p>
+              <a href="https://jslightham.github.io/Collision-Simulator/" class="text-blue-400 inline-flex items-center mt-4"
+                >See Project
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </a>
+            </div>
           </div>
-          <div class="md:flex-grow">
-            <h2 class="text-2xl font-medium text-white title-font mb-2">
-              Zero Waste Game
-            </h2>
-            <p class="leading-relaxed">
-              A group project where we created a multiplayer space exploration game in Unity. This game is currently hosted in a private repository, thus I cannot provide a link.
-            </p>
+          <div
+            class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
+          >
+            <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span class="font-semibold title-font text-white">Vue, Bootstrap, NodeJS, Express, MongoDB</span>
+              <span class="mt-1 text-gray-500 text-sm">Jun 2020</span>
+            </div>
+            <div class="md:flex-grow">
+              <h2 class="text-2xl font-medium text-white title-font mb-2">
+                MEVN Attendance System
+              </h2>
+              <p class="leading-relaxed">
+                A group project for a school project, where we created an attendance system in MongoDB. 
+              </p>
+              <a href="https://github.com/jslightham/MEVN-Attendance-Tracker" class="text-blue-400 inline-flex items-center mt-4"
+                >View on GitHub
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </a>
+            </div>
           </div>
-        </div>
-        <div
-          class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
-        >
-          <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-            <span class="font-semibold title-font text-white">NodeJS, Vue, TensorflowJS, Websockets</span>
-            <span class="mt-1 text-gray-500 text-sm">Feb 2021</span>
+          <div
+            class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
+          >
+            <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span class="font-semibold title-font text-white">Java</span>
+              <span class="mt-1 text-gray-500 text-sm">2019-2020</span>
+            </div>
+            <div class="md:flex-grow">
+              <h2 class="text-2xl font-medium text-white title-font mb-2">
+                MC Plugins
+              </h2>
+              <p class="leading-relaxed">
+                Built a few Java edition Minecraft plugins to learn how to.
+              </p>
+              <a href="https://github.com/jslightham/MC-Plugins" class="text-blue-400 inline-flex items-center mt-4"
+                >View on GitHub
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </a>
+            </div>
           </div>
-          <div class="md:flex-grow">
-            <h2 class="text-2xl font-medium text-white title-font mb-2">
-              Multiplayer Stick Figure Game
-            </h2>
-            <p class="leading-relaxed">
-              A project for a hackathon, where my group created a multiplayer game. The game's input was the user's camera that used TensorflowJS to place a realtime virtual representation of them in the game. The player's positions were synchronized via websockets, which allowed games such as soccer and volleyball to be played virtually.
-            </p>
-            <a href="https://github.com/jslightham/multiplayer-stickfigure-game" class="text-blue-400 inline-flex items-center mt-4"
-              >View on GitHub
-              <svg
-                class="w-4 h-4 ml-2"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M5 12h14"></path>
-                <path d="M12 5l7 7-7 7"></path>
-              </svg>
-            </a>
+          <div
+            class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
+          >
+            <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span class="font-semibold title-font text-white">Firebase, Google Cloud, Keybase, NodeJS</span>
+              <span class="mt-1 text-gray-500 text-sm">Sep 2019</span>
+            </div>
+            <div class="md:flex-grow">
+              <h2 class="text-2xl font-medium text-white title-font mb-2">
+                Translate Bot
+              </h2>
+              <p class="leading-relaxed">
+                A project for a hackathon that won the best use of google cloud award. This project translated conversations in real time within the keybase application into a language that the user selects.
+              </p>
+              <a href="https://devpost.com/software/translatebot" class="text-blue-400 inline-flex items-center mt-4"
+                >View on Devpost
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </a>
+            </div>
           </div>
-        </div>
-        <div
-          class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
-        >
-          <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-            <span class="font-semibold title-font text-white">NodeJS, Vue, Handbrake, FFMPEG, Video.js, MongoDB</span>
-            <span class="mt-1 text-gray-500 text-sm">Dec 2020</span>
-          </div>
-          <div class="md:flex-grow">
-            <h2 class="text-2xl font-medium text-white title-font mb-2">
-              NodeJS Video Streamer
-            </h2>
-            <p class="leading-relaxed">
-              A simple clone project of the popular video sharing website YouTube. Automatically transcodes uploads, modern video player (Video.js), video and audio streaming from NodeJS backend, automatic thumbnail generation through FFmpeg, comment &amp; like system, and metadata storage in MongoDB.
-            </p>
-            <a href="https://github.com/jslightham/NodeJS-Video-Streamer" class="text-blue-400 inline-flex items-center mt-4"
-              >View on GitHub
-              <svg
-                class="w-4 h-4 ml-2"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M5 12h14"></path>
-                <path d="M12 5l7 7-7 7"></path>
-              </svg>
-            </a>
-          </div>
-        </div>
-        <div
-          class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
-        >
-          <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-            <span class="font-semibold title-font text-white">HTML, Javascript</span>
-            <span class="mt-1 text-gray-500 text-sm">Jun 2020</span>
-          </div>
-          <div class="md:flex-grow">
-            <h2 class="text-2xl font-medium text-white title-font mb-2">
-              Collision Simulator
-            </h2>
-            <p class="leading-relaxed">
-              A javascript canvas collision simulation in 2D for a combined high school Physics and Computer Science final project.
-            </p>
-            <a href="https://jslightham.github.io/Collision-Simulator/" class="text-blue-400 inline-flex items-center mt-4"
-              >See Project
-              <svg
-                class="w-4 h-4 ml-2"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M5 12h14"></path>
-                <path d="M12 5l7 7-7 7"></path>
-              </svg>
-            </a>
-          </div>
-        </div>
-        <div
-          class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
-        >
-          <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-            <span class="font-semibold title-font text-white">Vue, Bootstrap, NodeJS, Express, MongoDB</span>
-            <span class="mt-1 text-gray-500 text-sm">Jun 2020</span>
-          </div>
-          <div class="md:flex-grow">
-            <h2 class="text-2xl font-medium text-white title-font mb-2">
-              MEVN Attendance System
-            </h2>
-            <p class="leading-relaxed">
-              A group project for a school project, where we created an attendance system in MongoDB. 
-            </p>
-            <a href="https://github.com/jslightham/MEVN-Attendance-Tracker" class="text-blue-400 inline-flex items-center mt-4"
-              >View on GitHub
-              <svg
-                class="w-4 h-4 ml-2"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M5 12h14"></path>
-                <path d="M12 5l7 7-7 7"></path>
-              </svg>
-            </a>
-          </div>
-        </div>
-        <div
-          class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
-        >
-          <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-            <span class="font-semibold title-font text-white">Java</span>
-            <span class="mt-1 text-gray-500 text-sm">2019-2020</span>
-          </div>
-          <div class="md:flex-grow">
-            <h2 class="text-2xl font-medium text-white title-font mb-2">
-              MC Plugins
-            </h2>
-            <p class="leading-relaxed">
-              Built a few Java edition Minecraft plugins to learn how to.
-            </p>
-            <a href="https://github.com/jslightham/MC-Plugins" class="text-blue-400 inline-flex items-center mt-4"
-              >View on GitHub
-              <svg
-                class="w-4 h-4 ml-2"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M5 12h14"></path>
-                <path d="M12 5l7 7-7 7"></path>
-              </svg>
-            </a>
-          </div>
-        </div>
-        <div
-          class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
-        >
-          <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-            <span class="font-semibold title-font text-white">Firebase, Google Cloud, Keybase, NodeJS</span>
-            <span class="mt-1 text-gray-500 text-sm">Sep 2019</span>
-          </div>
-          <div class="md:flex-grow">
-            <h2 class="text-2xl font-medium text-white title-font mb-2">
-              Translate Bot
-            </h2>
-            <p class="leading-relaxed">
-              A project for a hackathon that won the best use of google cloud award. This project translated conversations in real time within the keybase application into a language that the user selects.
-            </p>
-            <a href="https://devpost.com/software/translatebot" class="text-blue-400 inline-flex items-center mt-4"
-              >View on Devpost
-              <svg
-                class="w-4 h-4 ml-2"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M5 12h14"></path>
-                <path d="M12 5l7 7-7 7"></path>
-              </svg>
-            </a>
-          </div>
-        </div>
-        <div
-          class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
-        >
-          <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-            <span class="font-semibold title-font text-white">Java</span>
-            <span class="mt-1 text-gray-500 text-sm">Jun 2019</span>
-          </div>
-          <div class="md:flex-grow">
-            <h2 class="text-2xl font-medium text-white title-font mb-2">
-              Zork
-            </h2>
-            <p class="leading-relaxed">
-              A group project where we recreated the classic text based adventure game Zork in Java, with some extra functionality. 
-            </p>
-            <router-link to="/zork">
-            <a class="text-blue-400 inline-flex items-center mt-4"
-              >See Project
-              <svg
-                class="w-4 h-4 ml-2"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M5 12h14"></path>
-                <path d="M12 5l7 7-7 7"></path>
-              </svg>
-            </a>
-            </router-link>
+          <div
+            class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
+          >
+            <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span class="font-semibold title-font text-white">Java</span>
+              <span class="mt-1 text-gray-500 text-sm">Jun 2019</span>
+            </div>
+            <div class="md:flex-grow">
+              <h2 class="text-2xl font-medium text-white title-font mb-2">
+                Zork
+              </h2>
+              <p class="leading-relaxed">
+                A group project where we recreated the classic text based adventure game Zork in Java, with some extra functionality. 
+              </p>
+              <router-link to="/zork">
+              <a class="text-blue-400 inline-flex items-center mt-4"
+                >See Project
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </a>
+              </router-link>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </section>
+    </section>
 </template>
 
 <script>
diff --git a/src/views/Zork.vue b/src/views/Zork.vue
index d9c761e..d175f39 100644
--- a/src/views/Zork.vue
+++ b/src/views/Zork.vue
@@ -58,7 +58,7 @@ export default {
     if (!this.loaded) {
       this.loaded = true;
       console.log("Here");
-      this.socket = io.connect("localhost:4000");
+      this.socket = io.connect("jslightham:4000");
       this.runCode();
     }
   },
diff --git a/tailwind.config.js b/tailwind.config.js
index c3d7982..eacf137 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,11 @@ module.exports = {
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {
+    container: {
+      center: true,
+
+      padding: '5rem',
+    },
     extend: {},
   },
   plugins: [],