Changed theme to something brighter.

postbuild.js

@@ -1,7 +1,18 @@
 const Path = require("path");
 const fs = require("fs");
 
-fs.copyFile("./static/video/index0.ts", "./dist/index0.ts", (err) => {
+fs.copyFile("./static/video/background_video/index0.ts",
+  "./dist/index0.ts", (err) => {
+    if (err) {
+      return
+      console.error("Video segments were not copied! \n",
+        err);
+    } else {
+      return console.error("Video segments successfully copied! \n");
+    }
+  });
+
+fs.copyFile("./static/video/background_video/index1.ts", "./dist/index1.ts", (err) => {
   if (err) {
     return console.error("Video segments were not copied! \n", err);
   } else {
@@ -9,43 +20,35 @@ fs.copyFile("./static/video/index0.ts", "./dist/index0.ts", (err) => {
   }
 });
 
-fs.copyFile("./static/video/index1.ts", "./dist/index1.ts", (err) => {
+fs.copyFile("./static/video/background_video/index2.ts", "./dist/index2.ts", (err) => {
   if (err) {
     return console.error("Video segments were not copied! \n", err);
   } else {
     return console.error("Video segments successfully copied! \n");
   }
 });
-
-fs.copyFile("./static/video/index2.ts", "./dist/index2.ts", (err) => {
+fs.copyFile("./static/video/background_video/index3.ts", "./dist/index3.ts", (err) => {
   if (err) {
     return console.error("Video segments were not copied! \n", err);
   } else {
     return console.error("Video segments successfully copied! \n");
   }
 });
-fs.copyFile("./static/video/index3.ts", "./dist/index3.ts", (err) => {
+fs.copyFile("./static/video/background_video/index4.ts", "./dist/index4.ts", (err) => {
   if (err) {
     return console.error("Video segments were not copied! \n", err);
   } else {
     return console.error("Video segments successfully copied! \n");
   }
 });
-fs.copyFile("./static/video/index4.ts", "./dist/index4.ts", (err) => {
+fs.copyFile("./static/video/background_video/index5.ts", "./dist/index5.ts", (err) => {
   if (err) {
     return console.error("Video segments were not copied! \n", err);
   } else {
     return console.error("Video segments successfully copied! \n");
   }
 });
-fs.copyFile("./static/video/index5.ts", "./dist/index5.ts", (err) => {
-  if (err) {
-    return console.error("Video segments were not copied! \n", err);
-  } else {
-    return console.error("Video segments successfully copied! \n");
-  }
-});
-fs.copyFile("./static/video/index6.ts", "./dist/index6.ts", (err) => {
+fs.copyFile("./static/video/background_video/index6.ts", "./dist/index6.ts", (err) => {
   if (err) {
     return console.error("Video segments were not copied! \n", err);
   } else {

src/Ramble.jsx

@@ -0,0 +1,64 @@
+import { h, render, Component } from "preact";
+import Header from "./Header";
+import {
+  Container,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+} from "@material-ui/core";
+const rambleDemoWebm = new URL("../static/video/ramble_demo/ramble.webm", import.meta.url);
+const rambleDemoMp4 = new URL("../static/video/ramble_demo/ramble.mp4", import.meta.url);
+
+class Ramble extends Component {
+  render() {
+    return (
+      <span>
+        <Header />
+        <Container maxWidth="md">
+
+          <Card>
+            <CardHeader title="Ramble" />
+            <CardContent>
+              <Typography varient="p">
+                Ramble was a web project I created during my masters to try to
+                create a startup.
+              </Typography>
+              <p />
+              <Typography varient="p">
+                It was essentially a website with chatroom functionality with
+                the ability to re-stream to audiences much like other apps that
+                came out in the time since, such as clubhouse. These high
+                profile alternatives to our product destroyed any forst to
+                market advantage we may have had slready secured a lot of
+                funding which we failed to procure leading us to choose to
+                abandon the project.
+              </Typography>
+              <p />
+              <Typography varient="p">
+                Due to the projects reliance on software as a service projects
+                and it's part ownership of an incubator program, I'm
+                unfortunately unable to leave a demo running of the
+                functionality we had created. So here's a video of it in action
+                I took just before the shutoff.
+              </Typography>
+              <p />
+              <div>
+                <video controls loop muted autoPlay={true} style={{
+                  width: "100%",
+                  height: "auto",
+                  objectFit: "cover",
+                }}>
+                  <source src={rambleDemoMp4} type="video/mp4" />
+                  <source src={rambleDemoWebm} type="video/webm" />
+                </video>
+              </div>
+            </CardContent>
+          </Card>
+        </Container>
+      </span>
+    );
+  }
+}
+
+export default Ramble;

src/VideoPlayer.jsx

@@ -1,7 +1,7 @@
 import { h, render, Component } from "preact";
 //import React from "react";
 import Hls from "hls.js";
-const PortfolioVideo = new URL("../static/video/index.m3u8", import.meta.url);
+const PortfolioVideo = new URL("../static/video/background_video/index.m3u8", import.meta.url);
 export default class VideoPlayer extends Component {
   state = {};
   //  componentDidUpdate() {
@@ -13,12 +13,12 @@ export default class VideoPlayer extends Component {
 
       hls.loadSource(url);
       hls.attachMedia(video);
-      hls.on(Hls.Events.MANIFEST_PARSED, function () {
+      hls.on(Hls.Events.MANIFEST_PARSED, function() {
         video.play();
       });
     } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
       video.src = url;
-      video.addEventListener("loadedmetadata", function () {
+      video.addEventListener("loadedmetadata", function() {
         video.play();
       });
     }

src/WebProjects.jsx

@@ -40,16 +40,9 @@ class WebProjects extends Component {
             </Typography>
           </CardContent>
           <CardActions>
-            <Button target="_blank" href="http://www.ramble.fm" color="primary">
+            <Button href="/ramble" color="primary">
               Learn More
             </Button>
-            <Button
-              target="_blank"
-              href="http://beta.ramble.fm"
-              color="secondary"
-            >
-              Try it!
-            </Button>
           </CardActions>
         </Card>
       </Container>

src/index.jsx

@@ -21,6 +21,10 @@ class App extends Component {
             import("./Contact").then((module) => module.default)
           }
           />
+          <AsyncRoute path="/ramble" getComponent={() =>
+            import("./Ramble").then((module) => module.default)
+          }
+          />
           <AsyncRoute default getComponent={() =>
             import("./404Page").then((module) => module.default)
           }

src/theme.js

@@ -14,15 +14,23 @@ const fg = { main: "#ebdbb2", contrastText: "#282828" };
 
 const theme = createTheme({
   palette: {
-    type: "dark",
-    primary: green,
-    secondary: aqua,
-    text: { primary: fg.main, sencondary: gray.main },
-    background: { default: bg_0h.main, paper: bg.main },
+    type: 'light',
+    primary: {
+      main: '#00a878',
     },
-  status: {
-    danger: red,
+    secondary: {
+      main: '#046865',
     },
+    background: {
+      default: '#f8ffeb',
+    },
+    error: {
+      main: '#e53d00',
+    },
+    warning: {
+      main: '#ffe900',
+    },
+  }
 });
 
 export default theme;