diff --git a/README.md b/README.md
index 201678d..f2f27ee 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,2 @@
 # thatalex.dev
-This is th repository for [my website](https://thatalex.dev). Feel free to browse the code! (not live yet, so if you can read you get a sneak peak ;))
\ No newline at end of file
+This is the repository for [my website](https://thatalex.dev)!
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 6bf2a16..bf7160e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,8 +14,9 @@
         "eslint": "8.22.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.3.0",
+        "react-router-dom": "^6.4.3",
         "react-scripts": "5.0.1",
+        "socket.io-client": "^4.5.3",
         "web-vitals": "^2.1.4"
       }
     },
@@ -3078,6 +3079,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
+      "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3178,6 +3187,11 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -6700,6 +6714,46 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.3.tgz",
+      "integrity": "sha512-aXPtgF1JS3RuuKcpSrBtimSjYvrbhKW9froICH4s0F3XQWLxsKNxqzG39nnvQZQnva4CMvUK63T7shevxRyYHw==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz",
+      "integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
@@ -8500,14 +8554,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/history": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
-      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.7.6"
-      }
-    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -14009,23 +14055,29 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
-      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
+      "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
       "dependencies": {
-        "history": "^5.2.0"
+        "@remix-run/router": "1.0.3"
+      },
+      "engines": {
+        "node": ">=14"
       },
       "peerDependencies": {
         "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
-      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
+      "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
       "dependencies": {
-        "history": "^5.2.0",
-        "react-router": "6.3.0"
+        "@remix-run/router": "1.0.3",
+        "react-router": "6.4.3"
+      },
+      "engines": {
+        "node": ">=14"
       },
       "peerDependencies": {
         "react": ">=16.8",
@@ -14848,6 +14900,32 @@
         "node": ">=8"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.3.tgz",
+      "integrity": "sha512-I/hqDYpQ6JKwtJOf5ikM+Qz+YujZPMEl6qBLhxiP0nX+TfXKhW4KZZG8lamrD6Y5ngjmYHreESVasVCgi5Kl3A==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.2.3",
+        "socket.io-parser": "~4.2.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
+      "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -16767,6 +16845,14 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -18881,6 +18967,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
+      "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -18955,6 +19046,11 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -21558,6 +21654,31 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
     },
+    "engine.io-client": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.3.tgz",
+      "integrity": "sha512-aXPtgF1JS3RuuKcpSrBtimSjYvrbhKW9froICH4s0F3XQWLxsKNxqzG39nnvQZQnva4CMvUK63T7shevxRyYHw==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "8.2.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+          "requires": {}
+        }
+      }
+    },
+    "engine.io-parser": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz",
+      "integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg=="
+    },
     "enhanced-resolve": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
@@ -22852,14 +22973,6 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
-    "history": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
-      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
-      "requires": {
-        "@babel/runtime": "^7.7.6"
-      }
-    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -26655,20 +26768,20 @@
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
     "react-router": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
-      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
+      "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
       "requires": {
-        "history": "^5.2.0"
+        "@remix-run/router": "1.0.3"
       }
     },
     "react-router-dom": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
-      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
+      "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
       "requires": {
-        "history": "^5.2.0",
-        "react-router": "6.3.0"
+        "@remix-run/router": "1.0.3",
+        "react-router": "6.4.3"
       }
     },
     "react-scripts": {
@@ -27274,6 +27387,26 @@
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
     },
+    "socket.io-client": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.3.tgz",
+      "integrity": "sha512-I/hqDYpQ6JKwtJOf5ikM+Qz+YujZPMEl6qBLhxiP0nX+TfXKhW4KZZG8lamrD6Y5ngjmYHreESVasVCgi5Kl3A==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.2.3",
+        "socket.io-parser": "~4.2.0"
+      }
+    },
+    "socket.io-parser": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
+      "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      }
+    },
     "sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -28733,6 +28866,11 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
+    "xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 8761940..9e69f85 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,9 @@
     "eslint": "8.22.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "socket.io-client": "^4.5.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/public/index.html b/public/index.html
index fc88c3f..28ddc49 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,7 +27,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600;700&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..8ce858b
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import {Routes,BrowserRouter,Route} from 'react-router-dom';
+import {NavBar,Footer} from "./Components";
+import {Redirector} from './Utilities';
+import {HomePage,AboutPage,NotFound} from "./Pages";
+
+const pages = [
+    {
+        "slug": "home",
+        "path": "/",
+        "display": "Home"
+    },
+    {
+        "slug": "about",
+        "path": "/about",
+        "display": "About"
+    }
+]
+
+export class App extends React.Component {
+    renderPageLinks() {
+        return pages.map((page) => {
+            return <a href={page.path} key={page.slug} rel={"noreferrer"} target={"_self"}><li className={"nav-links"}>{page.display}</li></a>
+        })
+    }
+
+    render() {
+        return (
+           <div id={"container"}>
+               <NavBar pages={this.renderPageLinks()} />
+                <BrowserRouter>
+                    <Routes>
+                        <Route path={"/"} element={<HomePage />} />
+                        <Route path={"/about"} element={<AboutPage />} />
+                        <Route path={"/capy"} element={<Redirector url={"https://www.youtube.com/watch?v=oLsVrshvOaI"} />} />
+                        <Route path={"*"} element={<NotFound />} />
+                    </Routes>
+                </BrowserRouter>
+               <Footer />
+           </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/Components.jsx b/src/Components.jsx
new file mode 100644
index 0000000..06fad5e
--- /dev/null
+++ b/src/Components.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { socket } from './Services';
+
+export class NavBar extends React.Component {
+    render() {
+        return (
+            <div id={"nav"}>
+                <ul style={{ paddingLeft:"0px" }} className={"nav-items"}>
+                    {this.props.pages}
+                </ul>
+                <hr style={{width:"300px"}} />
+            </div>
+        )
+    }
+}
+
+export class Footer extends React.Component {
+    render() {
+        return (
+            <div id={"footer"}>
+                <p>Website by <a href={"https://github.com/zevhr/pause"} target={"_blank"} rel={"noreferrer"}>Alex</a></p>
+                <div className={"footeritems"}>
+                    <SocialMedia />
+                </div>
+            </div>
+        )
+    }
+}
+
+export class IFrame extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            d: null,
+            userSetVolume: null
+        }
+
+        socket.emit("spotify", {"event":"listen"});
+        socket.on("api_update", async (message) => {
+            if (message) await this.setState({ d: message })
+        })
+    }
+
+    render() {
+        if (!this.state.d) return (
+            <div />
+        )
+
+        return (
+            <div id={"iframe"} style={{width:"50%",top:"10%"}}>
+                <div id="player" className={"player centered horizontally"}>
+                    <span className={"songinfo"}>
+                        { this.state.d ? <React.Fragment><p>{this.state.d.TITLE}<br />{this.state.d.ARTIST}</p><p>{this.state.d.POSITION} \\ {this.state.d.DURATION}</p></React.Fragment> : <p>Uh oh! Something went wrong.</p>}
+                    </span>
+                </div>
+            </div>
+        )
+    }
+}
+
+export class SocialMedia extends React.Component {
+    render() {
+        return (
+            <div className={"social"}>
+                <a href={"https://twitter.com/zstreamss"} target={"_blank"} rel={"noreferrer"}>
+                    <i className="fa fa-twitter-square" aria-hidden="true"></i>
+                </a>
+                <a href={"https://github.com/azpha"} target={"_blank"} rel={"noreferrer"}>
+                    <i className="fa fa-github-square" aria-hidden="true"></i>
+                </a>
+                <a href={"https://linkedin.com/in/thatalex"} target={"_blank"} rel={"noreferrer"}>
+                    <i className="fa fa-linkedin-square" aria-hidden="true"></i>
+                </a>
+                <a href={"mailto:hi@thatalex.dev"} target={"_blank"} rel={"noreferrer"}>
+                    <i className="fa fa-envelope" aria-hidden="true"></i>
+                </a>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/Pages.jsx b/src/Pages.jsx
new file mode 100644
index 0000000..beb0dec
--- /dev/null
+++ b/src/Pages.jsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import {IFrame, SocialMedia} from "./Components";
+
+export class HomePage extends React.Component {
+    render() {
+        return (
+            <div id={"home"}>
+                <div id={"profile"} className={"centered horizontally vertically"}>
+                    <img width={"100px"} src={"https://cdn.medal.tv/assets/img/medal-with-bg.png"} />
+                    <h1>Alex</h1>
+                    <p>QA @ <a href={"https://medal.tv"}>Medal.tv</a>, JS/Java Dev</p>
+                    <SocialMedia />
+                </div>
+            </div>
+        )
+    }
+}
+
+export class AboutPage extends React.Component {
+    render() {
+        return (
+            <div id={"about"} className={"centered horizontally vertically"} style={{
+                paddingTop:"10px",
+                padding:"10px",
+                textAlign: "center"
+            }}>
+                <h1>Hi, I'm Alex!</h1>
+                <p>I'm a JavaScript/Java/Python developer, currently working at Medal.tv as a Manual QA Tester!</p>
+                <h2>What do I like to do?</h2>
+                <p>Well, coding is one thing. I enjoy making random apps in any language, including this website!</p>
+                <p>I'm exploring the realm of test automation & getting more familiar with best practices.</p>
+                <p>I also enjoy listening to music a little too much. Like, it's bad.</p>
+                <hr style={{width:"300px"}} />
+                <h2>What am I listening to right now?</h2>
+                <p style={{}}><i>Want to screw with my music? <a href={"https://pause.thatalex.dev"} rel={"noreferrer"} target={"_blank"}>Use my 'Pause!' website!</a></i></p>
+                <IFrame />
+            </div>
+        )
+    }
+}
+
+export class NotFound extends React.Component {
+    componentDidMount() {
+        let keys = [];
+        let count = 0;
+
+        document.addEventListener("keydown", (e) => {
+            if (e.keyCode <= 90 && e.keyCode >= 48) {
+                keys.push(e.key);
+            }
+            if (e.key.toLowerCase() === "backspace") {
+                keys.pop();
+            } else if (keys.join('') === "capybara") {
+                if (count >= 5) {
+                    window.location.href = "/capy";
+                } else {
+                    document.getElementById("lawd").style.display = "block";
+                    document.getElementById("anim").style.display = "block";
+
+                    setTimeout(() => {
+                        document.getElementById("lawd").style.display = "none";
+                        document.getElementById("anim").style.display = "none";
+                        keys = [];
+                        count++;
+                    }, 3000)
+                }
+            }
+        })
+    }
+
+    render() {
+        return (
+            <div id={"error"} className={"centered horizontally vertically"} style={{bottom:"10%", lineHeight:"0.5"}}>
+                <h1>Well, this is awkward..</h1>
+                <p>You've landed on a page that just doesn't exist.</p>
+                <p>You should, like, <a href={"#"} onClick={() => window.history.back()}>head back now..</a></p>
+
+                <span id={"lawd"} style={{ display: "none", color:"red" }}><p>oh lawd... oh lawd he comin!</p></span>
+                <div id={"anim"} style={{ display: "none" }}>
+                    <img style={{ transform: "scaleX(-1)" }} alt={"capy"} src={"https://c.tenor.com/AMMqaJ99koYAAAAC/capybara-walk.gif"} />
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/Services.jsx b/src/Services.jsx
new file mode 100644
index 0000000..4217cb1
--- /dev/null
+++ b/src/Services.jsx
@@ -0,0 +1,2 @@
+import { io } from 'socket.io-client';
+export const socket = io("https://api.zephmakes.tech");
\ No newline at end of file
diff --git a/src/Utilities.jsx b/src/Utilities.jsx
new file mode 100644
index 0000000..e689547
--- /dev/null
+++ b/src/Utilities.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import {NotFound} from './Pages';
+
+export class Redirector extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            redirectTo: props.url,
+            success: null
+        }
+    }
+
+    async componentDidMount() {
+        if (this.state.redirectTo) {
+            window.location.href = this.state.redirectTo;
+            this.state.success = true;
+        }
+        else await this.setState({success:false});
+        console.log(this.state)
+    }
+
+    render() {
+        return (
+            <div id={"redirector"}>
+                {!this.state.success ? <NotFound /> : null}
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/App.jsx b/src/components/App.jsx
deleted file mode 100644
index dcbd499..0000000
--- a/src/components/App.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { Route, Routes } from 'react-router-dom';
-
-// components/resources
-import { NavBar } from './Nav';
-import { Footer, NotFound } from './PageComponents'
-
-// pages
-import { Home } from './Pages/Home';
-import { Contact } from './Pages/Contact';
-
-export class App extends React.Component {
-    render() {
-        return (
-            <div id={"container"}>
-                <NavBar/>
-                <Routes>
-                    <Route path="/" element={<Home />}></Route>
-                    <Route path="/contact" element={<Contact />}></Route>
-                    <Route path={"*"} element={<NotFound />}></Route>
-                </Routes>
-                <Footer/>
-            </div>
-        )
-    }
-}
\ No newline at end of file
diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
deleted file mode 100644
index 12804cd..0000000
--- a/src/components/Nav.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { pages } from '../index';
-import { Link } from 'react-router-dom';
-
-export class NavBar extends React.Component {
-    list = pages.map((page, i) => {
-        return <li className={"listitem button"} key={"page_" + page.key}>
-            <Link to={page.path}>{page.display}</Link>
-        </li>
-    })
-
-    render() {
-        return (
-            <div id="navbar">
-                <ul className="pagelist">
-                    {this.list}
-                </ul>
-            </div>
-        )
-    }
-}
\ No newline at end of file
diff --git a/src/components/PageComponents.jsx b/src/components/PageComponents.jsx
deleted file mode 100644
index 7b04ca4..0000000
--- a/src/components/PageComponents.jsx
+++ /dev/null
@@ -1,269 +0,0 @@
-import React from 'react';
-
-// components
-import { Href, QueryStringObject } from "./Utils";
-
-export class ShowcaseBar extends React.Component {
-    render() {
-        return (
-            <div id={"bar"}>
-                <div
-                    className={this.props.align === "right" ? "showcase_content align-showcase-right" : "showcase_content align-showcase-left"}>
-                    {this.props.image ? <React.Fragment>
-                    <span id={"bar-img"} style={{verticalAlign:"right", display: "inline-block", float:this.props.alignImage}}>
-                        <img src={this.props.image} alt={"Showcase"} />
-                    </span>
-                    </React.Fragment> : <React.Fragment></React.Fragment>}
-                    <h1 style={{display:"inline-block"}}>{this.props.headline}</h1>
-                    <span id={"subheading"}><p>{this.props.subheading}</p></span>
-                </div>
-            </div>
-        )
-    }
-}
-
-export class ShowcaseColumns extends React.Component {
-    render() {
-        return (
-                <div style={{ maxHeight:"93vh", height:"40%" }} id={"bar-column"} className={"row"}>
-                    <div className={"column"}>
-                        <p className={"column-header"}>
-                            {this.props.column1.title}
-                        </p>
-                        <p className={"column-subheader"}>
-                            {this.props.column1.description}
-                        </p>
-                    </div>
-                    <div className={"column"}>
-                        <p className={"column-header"}>
-                            {this.props.column2.title}
-                        </p>
-                        <p className={"column-subheader"}>
-                            {this.props.column2.description}
-                        </p>
-                    </div>
-                    <div className={"column"}>
-                        <p className={"column-header"}>
-                            {this.props.column3.title}
-                        </p>
-                        <p className={"column-subheader"}>
-                            {this.props.column3.description}
-                        </p>
-                    </div>
-                </div>
-        )
-    }
-}
-
-export class Footer extends React.Component {
-    render() {
-        return (
-            <div id={"footer"}>
-                <div className={"fcontent"}>
-                    <p>Made with &lt;3 by <Href url={"https://github.com/zevhr"} blank={true} content={"Alex"} /></p>
-                    <div className={"socials"}>
-                        <Href url={"https://github.com/zevhr"} blank={true} content={<i className="fa fa-github item" aria-hidden="true"></i>} />
-                        <Href url={"https://twitter.com/zstreamss"} blank={true} content={<i className="fa fa-twitter item" aria-hidden="true"></i>} />
-                        <Href url={"https://github.com/zevhr"} blank={true} content={<i className="fa fa-spotify item" aria-hidden="true"></i>} />
-                    </div>
-                </div>
-            </div>
-        )
-    }
-}
-
-export class ContactForm extends React.Component {
-    sendResponse(obj) {
-        console.log(obj)
-        if (!obj.name || !obj.message || !obj.email) {
-            document.getElementById("notification").innerText = "ensure all fields are filled out"
-            setTimeout(() => {
-                document.getElementById("notification").innerText = "";
-            }, 5000)
-        } else {
-            fetch("https://api.zephmakes.tech/v2/tools/contact", {
-                method: 'post',
-                headers: {
-                    'content-type': 'application/json'
-                },
-                body: JSON.stringify({
-                    email: obj.email,
-                    subject: obj.name,
-                    message: obj.message
-                })
-            })
-                .then(response => {
-                    if (response.ok) window.location.href = "/?ref=contact"
-                    else {
-                        document.getElementById("notification").innerText = "something went wrong, server returned status code " + response.status
-                        setTimeout(() => {
-                            document.getElementById("notification").innerText = "";
-                        }, 5000)
-                    }
-                })
-                .catch(err => {
-                    document.getElementById("notification").innerText = "something went wrong!"
-                    setTimeout(() => {
-                        document.getElementById("notification").innerText = "";
-                    }, 5000)
-                })
-        }
-    }
-
-    render() {
-        return (
-            <div className={"form"}>
-                <span className={"field-item"}>
-                    <input type={"text"} className={"fields"} id="name" name={"name"} placeholder={"Name.."} />
-                </span>
-                <span className={"field-item"}>
-                    <input type={"email"} className={"fields"} id={"email"} name={"email"} placeholder={"Email.."} />
-                </span>
-                <br />
-                <br />
-                <span>
-                    <textarea id={"message"} name={"message"} style={{ textAlign: "center" }} className={"fields message"} placeholder={"Message.."}></textarea>
-                </span>
-
-                <button
-                    type={"button"}
-                    id={"submit-button"}
-                    onClick={() => this.sendResponse({
-                        "email": document.getElementById("email").value,
-                        "name": document.getElementById("name").value,
-                        "message": document.getElementById("message").value
-                    })}
-                >Submit</button>
-                <p id={"notification"}></p>
-            </div>
-        )
-    }
-}
-
-export class NotiModal extends React.Component {
-    componentDidMount() {
-        let div = document.getElementById("modal_container");
-        setTimeout(() => {
-            div.style.display = "none";
-        },10000)
-    }
-
-    render() {
-        return (
-            <div id={"modal_container"}>
-                <div id={"modal"}>
-                    <p className={"modal_header"}>{this.props.headline}</p>
-                    <p className={"modal_subheading"}>{this.props.subheading}</p>
-                </div>
-            </div>
-        )
-    }
-}
-
-export class NotFound extends React.Component {
-    componentDidMount() {
-        let keys = [];
-        let count = 0;
-
-        document.addEventListener("keydown", (e) => {
-            if (e.keyCode <= 90 && e.keyCode >= 48) {
-                keys.push(e.key);
-            }
-            if (e.key.toLowerCase() === "backspace") {
-                keys.pop();
-            } else if (keys.join('') === "capybara") {
-                if (count >= 5) {
-                    window.location.href = "/capy";
-                } else {
-                    document.getElementById("lawd").style.display = "block";
-                    document.getElementById("anim").style.display = "block";
-
-                    setTimeout(() => {
-                        document.getElementById("lawd").style.display = "none";
-                        document.getElementById("anim").style.display = "none";
-                        keys = [];
-                        count++;
-
-                        console.log("count: " + count)
-                    }, 3000)
-                }
-            }
-        })
-    }
-
-    render() {
-        return (
-            <div style={{ backgroundColor: "black", height:"90vh", textAlign: "center", color:"white" }} id={"404"}>
-                <img width={"350"} alt={"jeremi"} src={"https://im3.ezgif.com/tmp/ezgif-3-b699b91275.gif"}/>
-                <span style={{ fontSize: "20px" }}>
-                    <h3>well that's not good.</h3>
-                    <p>this page doesn't exist. you should get outta here pal, before things get bad</p>
-                </span>
-
-                <span id={"lawd"} style={{ display: "none" }}><p>oh lawd... oh lawd he comin!</p></span>
-                <div id={"anim"} style={{ display: "none" }}>
-                    <img style={{ transform: "scaleX(-1)" }} alt={"capy"} src={"https://c.tenor.com/AMMqaJ99koYAAAAC/capybara-walk.gif"} />
-                </div>
-            </div>
-        )
-    }
-}
-
-export class MedalPlayer extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            clip: null
-        }
-    }
-
-    componentDidMount() {
-        fetch("https://developers.medal.tv/v1/latest?userId=215577&limit=1", {
-            method: 'get',
-            headers: {
-                'content-type': "application/json",
-                'accept': "application/json",
-                'authorization': 'pub_RwznDA6FJLbPmRMSBH57iJetpujJUu6a'
-            }
-        }).then(async response => {
-            let j = await response.json();
-            await this.setState({
-                clip: j.contentObjects[0]
-            })
-        })
-    }
-
-    playerRenderer() {
-        if (this.state.clip) {
-            return (
-                <div id={"player"} className={"center"}>
-                    <div id={"iframe"}>
-                        <iframe
-                            width={"640"}
-                            height={"360"}
-                            style={{maxWidth: "100vw"}}
-                            title={"MedalPlayer"}
-                            src={this.state.clip.directClipUrl}
-                            frameBorder={"0"}
-                            allow={"autoplay"}
-                            allowFullScreen
-                        >
-                        </iframe>
-                    </div>
-                    <p className={"cliptitle"}>{this.state.clip.contentTitle} -- recorded with <span className={"medaltv"}>Medal.tv</span></p>
-                </div>
-            )
-        } else {
-            return (
-                <div id={"player"}>
-                    <p>wasn't able to get response</p>
-                </div>
-            )
-        }
-    }
-
-    render() {
-        if (this.state.clip !== null) return this.playerRenderer()
-    }
-}
\ No newline at end of file
diff --git a/src/components/Pages/Contact.jsx b/src/components/Pages/Contact.jsx
deleted file mode 100644
index 85eb3ca..0000000
--- a/src/components/Pages/Contact.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { ShowcaseBar, ContactForm } from "../PageComponents";
-
-export class Contact extends React.Component {
-    render() {
-        return (
-            <div id={"container"}>
-                <ShowcaseBar headline={"you want to contact me?"} subheading={"at least take me to dinner first"} />
-                <div id={"contact"}>
-                    <h1 style={{ textAlign: "center", color: "white" }}>hit my line, like the cool kids say</h1>
-                    <ContactForm />
-                </div>
-            </div>
-        )
-    }
-}
\ No newline at end of file
diff --git a/src/components/Pages/Home.jsx b/src/components/Pages/Home.jsx
deleted file mode 100644
index 74d9609..0000000
--- a/src/components/Pages/Home.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-
-// components
-import { ShowcaseBar,ShowcaseColumns,NotiModal,MedalPlayer } from '../PageComponents';
-import { QueryStringObject } from "../Utils";
-
-export class Home extends React.Component {
-    componentDidMount() {
-        console.log(QueryStringObject("ref"))
-    }
-
-    render() {
-        return (
-            <div id={"home_page"}>
-                <ShowcaseBar headline={"hi, i'm alex!"} subheading={"professional smooth brain, nodejs buillier, medal.tv whiffer"} align={"left"} />
-                <ShowcaseBar headline={"lotta cool stuff"} subheading={"what am i doin? well, workin at Medal + making stuff like this"} align={"right"} image={"https://cdn.medal.tv/assets/img/new-medal-logo-small.png"} alignImage={"left"} />
-                <ShowcaseColumns
-                    column1={
-                        {
-                            title: "wow cool stuff i've been workin on extra long too",
-                            description: "look at me go, super fast. anyway so i was like and then but he and she and they and lololoolollolol"
-                        }
-                    }
-                    column2={
-                        {
-                            title: "hooooly this is cool stuff",
-                            description: "wow why am i offcentered"
-                        }
-                    }
-                    column3={
-                        {
-                            title: "columns! pretty cool, right? like i said before?",
-                            description: "The Tsunami wave crashed against the raised houses and broke the pilings as if they were toothpicks. wowowowowoo wowowwowoow wowowowowo"
-                        }
-                    }
-                    />
-
-                {/*<MedalPlayer/>*/}
-
-                { QueryStringObject("ref") === "contact"
-                ? <React.Fragment>
-                        <NotiModal headline={"contact success!"} subheading={"i sent your message :)"} />
-                    </React.Fragment>
-                : ""
-                }
-            </div>
-        )
-    }
-}
\ No newline at end of file
diff --git a/src/components/Utils.jsx b/src/components/Utils.jsx
deleted file mode 100644
index f95781f..0000000
--- a/src/components/Utils.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-
-export class Href extends React.Component {
-    render() {
-        return (
-            <a
-                href={this.props.url}
-                target={this.props.blank ? "_blank" : "_self"}
-                rel={"noreferrer"}
-            >{this.props.content}</a>
-        )
-    }
-}
-
-export function QueryStringObject(string) {
-    let params = new URLSearchParams(window.location.search);
-
-    if (params.get(string)) return params.get(string);
-    else return false;
-}
\ No newline at end of file
diff --git a/src/index.jsx b/src/index.jsx
index 336fda5..7fd16d4 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,33 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom'
 
 // components/global styling
-import { App } from './components/App';
-import './styling/anims.css';
-import './styling/main.css';
-import './styling/forms.css';
-
-// "sitemap" for react components
-export const pages = [
-    {
-        "display": "Home",
-        "path": "/",
-        "key": "home"
-    },
-    {
-        "display": "Contact",
-        "path": "/contact",
-        "key": "contact"
-    }
-]
+import { App } from './App';
+import './main.css';
 
 // react 18 compliance
 const root = ReactDOM.createRoot(document.getElementById("root"))
 root.render(
-    <React.StrictMode>
-        <BrowserRouter>
-            <App d={pages} />
-        </BrowserRouter>
-    </React.StrictMode>
+    <App />
 )
\ No newline at end of file
diff --git a/src/main.css b/src/main.css
new file mode 100644
index 0000000..ab27b9c
--- /dev/null
+++ b/src/main.css
@@ -0,0 +1,143 @@
+body,html {
+    background-color:black;
+    color:white;
+    font-family: 'Nunito Sans', sans-serif;
+    -ms-overflow-style:none;
+    scrollbar-width:none;
+}
+
+body::-webkit-scrollbar {
+    display:none;
+}
+
+#anim {
+    animation-duration: 5s;
+    animation-name: goRight;
+    animation-iteration-count: initial;
+    left: -200px;
+    position: absolute;
+}
+
+.nav-items ul {
+    list-style-type:none;
+    list-style-position:inside;
+}
+
+.nav-items li {
+    display:inline-block;
+    padding:10px;
+    font-size:25px;
+}
+
+#nav {
+    text-align:center;
+}
+
+.nav-links:hover {
+    animation-name: hover;
+    animation-duration:0.5s;
+    animation-fill-mode:forwards;
+}
+
+.player {
+    background:black;
+    width:fit-content;
+    line-height:1;
+    border-color:white;
+    border-style:solid;
+    border-width:5px;
+    text-align:center;
+    padding:10px;
+    border-radius:10px;
+}
+
+.songinfo {
+    color:white;
+    padding:0;
+    margin:0;
+}
+
+.player img {
+    padding:10px 0;
+}
+
+a:visited,a {
+    color:white;
+}
+
+.centered {
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items:center;
+    position:absolute;
+    z-index:-1;
+}
+
+.horizontally {
+    margin-left:auto;
+    margin-right:auto;
+    left:0;
+    right:0;
+}
+
+.vertically {
+    margin-top:0;
+    margin-bottom:0;
+    top:0;
+    bottom:0;
+}
+
+#profile {
+    bottom:5%;
+    font-size:20px;
+    line-height:0;
+}
+
+.social {
+    padding:10px;
+    font-size:30px;
+}
+
+.social a {
+    padding:10px 8px;
+}
+
+#footer {
+    text-align:center;
+    color:white;
+    background-color:#121212;
+    padding:20px;
+    position:fixed;
+    bottom:0;
+    left:0;
+    right:0;
+    line-height:0.1;
+}
+
+#about {
+    line-height:0;
+    bottom:30%;
+}
+
+@media only screen and (max-width:705px) {
+    #about {
+        line-height:1;
+        bottom:20%;
+    }
+}
+
+@keyframes hover {
+    from { opacity:1; }
+    to { opacity:0.5; }
+}
+
+@keyframes goRight {
+    from {
+        transform: translate(-250px,0);
+    }
+
+    to {
+        transform: translate(150vw,0);
+    }
+}
\ No newline at end of file
diff --git a/src/styling/anims.css b/src/styling/anims.css
deleted file mode 100644
index 6e26c42..0000000
--- a/src/styling/anims.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@keyframes hover {
-    75% { opacity: 0.5 }
-    100% { opacity: 1; }
-}
\ No newline at end of file
diff --git a/src/styling/forms.css b/src/styling/forms.css
deleted file mode 100644
index 08ef0a4..0000000
--- a/src/styling/forms.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.form {
-    display:table;
-    text-align:center;
-    margin:auto;
-    padding:20px;
-    background-color:#cfcfcf;
-    border-radius:30px;
-}
-
-.fields {
-    display: table-cell;
-    background-color:black;
-    border-radius:50px;
-    outline:none;
-    caret-color:white;
-    color:white;
-}
-
-.fields::placeholder {
-    color:white;
-}
-
-.fields input[type=text] {
-    padding:0 50px;
-}
-
-.message {
-    /*max-width:50%;*/
-    resize:vertical;
-    width:100%;
-    max-height:200px;
-}
-
-.field-item {
-    padding:0 20px;
-}
\ No newline at end of file
diff --git a/src/styling/main.css b/src/styling/main.css
deleted file mode 100644
index 596d210..0000000
--- a/src/styling/main.css
+++ /dev/null
@@ -1,203 +0,0 @@
-html, body {
-    margin:0;
-    padding:0;
-    background-color:#3E3E3E;
-    font-family: 'IBM Plex Sans', sans-serif;
-    -ms-overflow-style:none;
-    scrollbar-width:none;
-}
-
-body::-webkit-scrollbar {
-    display:none;
-}
-
-/* nav styling */
-#navbar {
-    text-align:center;
-    background-color:#525459;
-}
-
-#navbar li {
-    display:inline-block;
-    padding: 10px 10px;
-    font-size:20px;
-}
-
-#navbar ul {
-    margin: 0;
-    padding:0;
-    list-style-type:none;
-}
-
-.listitem:hover {
-    animation-name: hover;
-    animation-duration:0.5s;
-}
-
-#bar {
-    background-color:black;
-    position:relative;
-    max-height:40vh;
-    max-width:100vw;
-    color:white;
-    vertical-align:top;
-}
-
-.showcase_content {
-    padding:50px 15vw !important;
-}
-
-.showcase_content p {
-    font-size:20px;
-}
-
-#subheading {
-    max-width:100px;
-}
-
-.align-showcase-left {
-    text-align:left;
-}
-
-.align-showcase-right {
-    text-align:right;
-}
-
-#anim {
-    animation-duration: 5s;
-    animation-name: goRight;
-    animation-iteration-count: initial;
-    left: -200px;
-    position: absolute;
-}
-
-#bar * {
-    padding:0;
-    margin:0;
-}
-
-@media screen and (min-width: 992px) {
-    .column {
-        width: 50%;
-        float:none;
-    }
-}
-
-@media screen and (min-width: 600px) {
-    .row {
-        padding-left:19%;
-    }
-
-    .column {
-        width: 75%;
-        float:none;
-    }
-}
-
-@media screen and (min-width:1100px) {
-    .column {
-        width: 25%;
-        float: left;
-    }
-}
-
-.column {
-    height:510px;
-    background-color:gray;
-    border:3px black solid;
-}
-
-.column-header {
-    float:left;
-    width:95%;
-    font-size:25px;
-    padding:0 1vw;
-    position:relative;
-}
-
-.column-subheader {
-    padding: 0 1vw;
-}
-
-#player {
-    position:relative;
-    padding-top:10px;
-    padding-bottom:10vh;
-}
-
-.cliptitle {
-    color:white;
-}
-
-.medaltv {
-    color:orange;
-}
-
-#contact {
-    padding-bottom:50px;
-}
-
-a {
-    color:white;
-    text-decoration:none;
-}
-
-a:hover {
-    color:#81A2A1;
-    animation:fadein;
-}
-
-#footer {
-    background-color:black;
-    max-height:40vh;
-    max-width:100vw;
-    color:white;
-    vertical-align:top;
-    text-align:center;
-    padding:10px;
-    bottom:0;
-    position:fixed;
-    width:100%;
-    z-index:10;
-}
-
-.fcontent {
-    padding-bottom:10px;
-}
-
-.item {
-    font-size:30px;
-    padding:0 10px;
-}
-
-#modal {
-    position:fixed;
-    z-index:10;
-    bottom:0;
-    left:0;
-    height:25%;
-    background-color:black;
-    color:white;
-    padding:2vh 2vw;
-    border-top-right-radius:30%;
-}
-
-.modal_header {
-    padding-left:10px;
-}
-
-.center {
-    margin-left: auto;
-    margin-right:auto;
-    text-align:center;
-}
-
-@keyframes goRight {
-    from {
-        transform: translate(-250px,0);
-    }
-
-    to {
-        transform: translate(150vw,0);
-    }
-}
\ No newline at end of file