Fixed greeter video position.

src/Greeting.jsx

@@ -18,11 +18,11 @@ class Greeting extends Component {
         <div
           style={{
             position: "absolute",
-            width: "100%",
-            left: "50%",
-            right: "50%",
-            top: "25%",
-            height: "50%",
+            width: "103%",
+            left: "49%",
+            right: "49%",
+            top: "30%",
+            height: "45%",
             objectFit: "cover",
             transform: "translate(-50%,-50%)",
             zIndex: "-1",

src/UniGraphics.jsx

@@ -0,0 +1,70 @@
+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 />
+        <p />
+        <Container maxWidth="md">
+          <Card>
+            <CardHeader title="Ramble" />
+            <CardContent>
+              <Typography varient="p">
+                Ramble was a web project I created during my master's degree to
+                create a startup. In this project, I was the CTO and built a
+                website that allowed users to stream their podcasts live and
+                accept call-ins in a similar vein to talk shows! I learnt the
+                entire javascript web development stack from React to audio
+                streaming to DevOps in order to make it a reality.
+              </Typography>.
+              <p />
+              <Typography varient="p">
+                It also had chatroom functionality with the ability to
+                re-stream to audiences much like other apps that came out in
+                the time since, such as Clubhouse.
+              </Typography>
+              <p />
+              <Typography varient="p">
+                During the project's lifespan of just under two years, I mostly
+                worked on creating the streaming functionality of the project
+                and managing how the project was designed to function behind
+                the hood when it was deployed. I learned a ton about how web
+                deployment works during this time allowing me to work on web
+                development modules in the Games Academy at Falmouth University
+                today.
+              </Typography>
+              <p />
+              <Typography varient="p">
+                Here's a demo of the project I took before we moved on.
+              </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/index.jsx

@@ -13,12 +13,8 @@ class App extends Component {
     return (
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <Background />
         <Router>
-          <AsyncRoute path="/" getComponent={() =>
-            import("./Home").then((module) => module.default)
-          }
-          />
+          <Home path="/" />
           <AsyncRoute path="/contact" getComponent={() =>
             import("./Contact").then((module) => module.default)
           }
@@ -27,6 +23,10 @@ class App extends Component {
             import("./Ramble").then((module) => module.default)
           }
           />
+          <AsyncRoute path="/uni-graphics" getComponent={() =>
+            import("./UniGraphics").then((module) => module.default)
+          }
+          />
           <AsyncRoute path="/graphics-blog" getComponent={() =>
             import("./GraphicsBlog").then((module) => module.default)
           }
@@ -36,6 +36,7 @@ class App extends Component {
           }
           />
         </Router>
+        <Background />
       </ThemeProvider>
     );
   }

static/javascript/background.js

@@ -8,8 +8,6 @@ canvas.style.cssText = `
     top:0;
     z-index:-99999;
     `
-console.log("HEY");
-
 // set it's size
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;