client/src/css/App.css

@@ -1,9 +1,7 @@
 header {
   height: 4vh;
   width: 100%;
-  /* background-color: var(--cyan); */
+  background-color: var(--cyan);
-  background-color: var(--orange);
-  /* background-color: #BE3144; */
   text-align: center;
   font-size: calc(7px + 2vmin);
   color: var(--black)
@@ -14,7 +12,7 @@ footer {
   bottom: 0;
   min-height: 10vh;
   width: 100%;
-  background-color: var(--orange);
+  background-color: var(--dark-gray);
   align-items: center;
 }
 
@@ -41,9 +39,9 @@ footer {
 }
 
 .navlink.active {
-  color: var(--medium-gray);
+  color: var(--primary-color);
   border-bottom: 5px solid var(--dark-gray);
-  /* background-color: var(--shadow); */
+  background-color: var(--shadow);
 }
 
 .background {
@@ -52,7 +50,7 @@ footer {
 }
 
 .foreground {
-  background-color: var(--uncertain-gray);
+  background-color: var(--lighter-gray);
   height: inherit;
   /* width: 90vw; */
   margin-left: 15%;
@@ -69,9 +67,6 @@ footer {
   /* margin-left: 1vw; */
   position: relative;
   left: 5%;
-  background-color: var(--light-orange);
-  border-radius: 10px;
-  border: 1px solid var(--dark-gray);
 }
 
 .user-controls {

client/src/css/Home.css

@@ -14,29 +14,10 @@
   color: white;
 } */
 
-.home {
-  /* left: 50%; */
-  /* transform: translate(1%, 0%); */
-}
-
 p {
   text-align: center;
   /* background-color: orange; */
   max-width: 40vw;
   margin: auto;
   margin-top: 15px;
-}
-
-.card {
-  background-color: var(--primary-color);
-  padding: 5px;
-  margin: auto;
-  margin-top: 2vh;
-  margin-bottom: 2vh;
-  width: 75%;
-  border-radius: 35px;
-}
-
-h3 {
-  margin-top: 1vh;
 }

client/src/css/index.css

@@ -1,10 +1,12 @@
 :root {
+  --discord-color: rgb(88, 101, 242);
+  --discord-color-darker: rgb(63, 73, 179);
   --primary-font: "Whitney","Helvetica Neue","Helvetica","Arial",sans-serif;
   --primary-color: rgb(238, 238, 238);
-  /* --dark-gray: rgb(36, 37, 38); */
+  --gbot-blue: rgb(2, 116, 204);
-  --dark-gray: #2F3C4F;
+  --gbot-orange: rgb(206, 82, 0);
-  /* --lighter-gray: rgb(172, 172, 172); */
+  --dark-gray: rgb(36, 37, 38);
-  --lighter-gray: #506F86;
+  --lighter-gray: rgb(172, 172, 172);
   --dark-blue: rgb(40, 44, 52);
   --cyan: rgb(96, 191, 255);
   --black: rgb(0,0,0);
@@ -12,11 +14,6 @@
   --dark-cyan: rgb(0, 128, 202);
   --shadow: rgba(0, 0, 0, 0.2);
   --light-shadow: rgba(0, 0, 0, 0.1);
-  --medium-gray: rgb(99, 99, 99);
-  --pink: rgb(255, 175, 255);
-  --uncertain-gray: #a9b0b1;
-  --orange: #DE703C;
-  --light-orange: #FBB040
 }
 
 body {
@@ -77,8 +74,4 @@ code {
 iframe {
   margin: auto;
   margin-top: 10px;
-}
-
-a {
-  color: var(--navy-blue);
 }

client/src/pages/Home.js

@@ -1,21 +1,12 @@
 /* eslint-disable react/no-unescaped-entities */
 import '../css/Home.css';
 import React from 'react';
-import { Helmet } from 'react-helmet';
 
 const Home = () => {
   return (
     <div className="home">
 
-      <Helmet>
+      <section>
-        <title>About me</title>
-        <meta
-          name="description"
-          content="Page where I upload clips n stuff"
-        />
-      </Helmet>
-
-      <section className='card shadow'>
         <h3> Hi! </h3>
 
         <p>
@@ -25,7 +16,6 @@ const Home = () => {
         <p>
           I like to volunteer some of my free time in online communities both as a moderator as well as a bot developer and maintainer.
           My longest running project is a Discord bot named <a href='https://galactic.corgi.wtf'>Galactic</a> that I was invited to join in 2016 and have been maintaining and developing since.
-          A bunch of my projects are available on my Github, though a bunch of them are also in private repositories for various reasons.
         </p>
 
         <p>
@@ -38,14 +28,26 @@ const Home = () => {
         </p>
       </section>
       
-      <section className='card shadow'>
+      <section>
         <h3> While you're here... </h3>
         <p>
-          Check out these <br />
+          If you have about 15 minutes, see the video on the left. If you have more time, see the one on the right.
-          <a href='https://youtu.be/CoFjbnvkmQ0'>https://youtu.be/CoFjbnvkmQ0</a> <br />
-          <a href='https://youtu.be/HnZSaKYmP2s'>https://youtu.be/HnZSaKYmP2s</a> <br />
         </p>
-        
+        <div className='flex-container'>
+          <iframe 
+            width="640" height="360"
+            src="https://www.youtube.com/embed/CoFjbnvkmQ0"
+            title="YouTube video player" frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen />
+
+          <iframe
+            width="640" height="360"
+            src="https://www.youtube.com/embed/HnZSaKYmP2s"
+            title="YouTube video player" frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen />
+        </div>
 
       </section>
 

server/src/client/ServerClient.js

@@ -89,8 +89,7 @@ class Client extends EventEmitter {
                     'script-src': ["'self'", "'unsafe-inline'"],
                     'style-src': ["'self'", "'unsafe-inline'"],
                     'img-src': ["'self'", "*.discord.com"],
-                    'media-src': ["'self'"],
+                    'media-src': ["'self'"]
-                    'frame-src': ["youtube.com", "www.youtube.com"]
                 }
             }
         }));
@@ -142,12 +141,11 @@ class Client extends EventEmitter {
         });
 
         this.app.use((req, res, next) => {
-            const now = Date.now();
             this.logger.debug(`New request to path ${req.path} || Route: ${req.route}`);
             res.once('finish', () => {
                 this.logger.debug(`Request to ${req.path} finished`);
                 const path = req.route?.path || req.path;
-                this.logger.debug(`response done at path ${path} - ${res.statusCode}, took ${Date.now() - now}ms`);
+                this.logger.debug(`response done at path ${path} - ${res.statusCode}`);
             });
             // console.log(req.headers)
             // if (req.cookies) console.log(req.cookies);

server/src/client/endpoints/Home.js

@@ -32,7 +32,6 @@ class Home extends Endpoint {
 
     async get(req, res) {
 
-        res.set('Cross-Origin-Resource-Policy', 'cross-origin');
         const home = path.resolve(this.client.baseDirectory, '../client/build/index.html');
         res.sendFile(home);