theme changes

client/src/css/App.css

@@ -1,7 +1,9 @@
 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)
@@ -12,7 +14,7 @@ footer {
   bottom: 0;
   min-height: 10vh;
   width: 100%;
-  background-color: var(--dark-gray);
+  background-color: var(--orange);
   align-items: center;
 }
 
@@ -39,9 +41,9 @@ footer {
 }
 
 .navlink.active {
-  color: var(--primary-color);
+  color: var(--medium-gray);
   border-bottom: 5px solid var(--dark-gray);
-  background-color: var(--shadow);
+  /* background-color: var(--shadow); */
 }
 
 .background {
@@ -50,7 +52,7 @@ footer {
 }
 
 .foreground {
-  background-color: var(--lighter-gray);
+  background-color: var(--uncertain-gray);
   height: inherit;
   /* width: 90vw; */
   margin-left: 15%;
@@ -67,6 +69,9 @@ 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,6 +14,11 @@
   color: white;
 } */
 
+.home {
+  /* left: 50%; */
+  /* transform: translate(1%, 0%); */
+}
+
 p {
   text-align: center;
   /* background-color: orange; */
@@ -21,3 +26,17 @@ p {
   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,12 +1,10 @@
 :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);
-  --gbot-blue: rgb(2, 116, 204);
+  /* --dark-gray: rgb(36, 37, 38); */
-  --gbot-orange: rgb(206, 82, 0);
+  --dark-gray: #2F3C4F;
-  --dark-gray: rgb(36, 37, 38);
+  /* --lighter-gray: rgb(172, 172, 172); */
-  --lighter-gray: rgb(172, 172, 172);
+  --lighter-gray: #506F86;
   --dark-blue: rgb(40, 44, 52);
   --cyan: rgb(96, 191, 255);
   --black: rgb(0,0,0);
@@ -14,6 +12,11 @@
   --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 {
@@ -75,3 +78,7 @@ iframe {
   margin: auto;
   margin-top: 10px;
 }
+
+a {
+  color: var(--navy-blue);
+}

client/src/pages/Home.js

@@ -1,12 +1,21 @@
 /* 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">
 
-      <section>
+      <Helmet>
+        <title>About me</title>
+        <meta
+          name="description"
+          content="Page where I upload clips n stuff"
+        />
+      </Helmet>
+
+      <section className='card shadow'>
         <h3> Hi! </h3>
 
         <p>
@@ -16,6 +25,7 @@ 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>
@@ -28,26 +38,14 @@ const Home = () => {
         </p>
       </section>
       
-      <section>
+      <section className='card shadow'>
         <h3> While you're here... </h3>
         <p>
-          If you have about 15 minutes, see the video on the left. If you have more time, see the one on the right.
+          Check out these <br />
+          <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,7 +89,8 @@ 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"]
                 }
             }
         }));
@@ -141,11 +142,12 @@ 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}`);
+                this.logger.debug(`response done at path ${path} - ${res.statusCode}, took ${Date.now() - now}ms`);
             });
             // console.log(req.headers)
             // if (req.cookies) console.log(req.cookies);

server/src/client/endpoints/Home.js

@@ -32,6 +32,7 @@ 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);