Added animated background and fixed Graphics blog page.

src/Background.jsx

@@ -0,0 +1,19 @@
+import { h, render, Component } from "preact";
+const background = new URL("../static/javascript/background.js", import.meta.url);
+
+class Background extends Component {
+  componentDidMount() {
+    const script = document.createElement("script");
+    script.src = background;
+    script.async = true;
+    document.body.appendChild(script);
+  }
+  render() {
+    return (
+      <span>
+      </span>
+    );
+  }
+}
+
+export default Background;

src/GraphicsBlog.jsx

@@ -10,7 +10,6 @@ import {
   Typography,
   Button,
   List,
-  ListSubheader,
   ListItemIcon,
   ListItem,
   Link,
@@ -78,9 +77,9 @@ class GraphicsBlog extends Component {
                 windows and OpenGL to render the meshes.
               </Typography>
               <List dense>
-                <ListSubHeader>
+              <Typography variant="p" >
                   To Do:
-                </ListSubHeader>
+              </Typography>
                 <ListItem>
                   <ListItemIcon><ArrowRightIcon /></ListItemIcon>
                   Give meshes their own relative location.

src/index.jsx

@@ -3,6 +3,7 @@ import Router from "preact-router";
 import AsyncRoute from "preact-async-route";
 import { ThemeProvider } from "@material-ui/core/styles";
 import CssBaseline from "@material-ui/core/CssBaseline";
+import Background from "./Background"
 import Home from "./Home";
 import theme from "./theme";
 import "fontsource-roboto";
@@ -12,6 +13,7 @@ class App extends Component {
     return (
       <ThemeProvider theme={theme}>
         <CssBaseline />
+        <Background />
         <Router>
           <AsyncRoute path="/" getComponent={() =>
             import("./Home").then((module) => module.default)

static/javascript/background.js

@@ -0,0 +1,88 @@
+// create background element
+let canvas = document.createElement("canvas");
+document.body.appendChild(canvas);
+canvas.style.cssText = `
+    background: #f0ffd6;
+    position:fixed;
+    left:0;
+    top:0;
+    z-index:-99999;
+    `
+console.log("HEY");
+
+// set it's size
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+let context = canvas.getContext('2d');
+
+// this will be populated and used later
+drawableObjectList = [];
+
+// this is the object that'll look cool
+class Point {
+    constructor() {
+        this.x = Math.random() * window.innerWidth;
+        this.y = Math.random() * window.innerHeight;
+
+        this.dx = (Math.random()) - 0.5;
+        this.dy = (Math.random()) - 0.5;
+    }
+    draw() {
+        context.fillStyle = "#00a878"
+        context.strokeStyle = "#00a878"
+        // find and draw links
+        drawableObjectList.forEach((point) => {
+            if (point.x > this.x - 100 && point.x < this.x + 100 &&
+                point.y > this.y - 100 && point.y < this.y + 100) {
+                context.beginPath()
+                context.moveTo(this.x, this.y)
+                context.lineTo(point.x, point.y)
+                context.stroke();
+            }
+        });
+
+        // draw point
+        context.beginPath();
+        context.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
+        context.fill();
+        context.stroke();
+
+        // move point
+        this.x += this.dx;
+        this.y += this.dy;
+
+        // keep point in bounds
+        if (this.x > window.innerWidth || this.x < 0) {
+            this.dx *= -1
+        }
+        if (this.y > window.innerHeight || this.y < 0) {
+            this.dy *= -1
+        }
+    }
+}
+
+// populate element array
+for (let i = 0; i < 100; i++) {
+    drawableObjectList.push(new Point());
+}
+
+function loop() {
+    // Loop and clear frame
+    requestAnimationFrame(loop);
+    context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+
+    // Draw objects.
+    drawableObjectList.forEach((point) => {
+        point.draw();
+    });
+
+    // Handle page size change
+    if (canvas.width != window.innerWidth) {
+        canvas.width = window.innerWidth;
+    }
+    if (canvas.height != window.innerHeight) {
+        canvas.height = window.innerHeight;
+    }
+}
+loop();