Added game projects to the site. Forgot how few projects I can show off...

src/GameProjects.jsx

@@ -0,0 +1,88 @@
+import { h, render, Component } from "preact";
+import {
+  Grid,
+  Container,
+  Card,
+  CardHeader,
+  CardMedia,
+  CardActions,
+  CardContent,
+  Typography,
+  Button,
+} from "@material-ui/core";
+import Monq from "../static/images/Monq.jpg";
+
+class GameProjects extends Component {
+  constructor(props) {
+    super(props);
+    this.content = [
+      {
+        header: "Monq",
+        subheader: "D-tail Entertainment - Programmer",
+        image: Monq,
+        imageAltText: "Monq",
+        content: `Technically this was my first attempt at creating a startup with
+university friends. However we over scoped when it came to having an interesting
+platformer in a single year when it came to our USP of time mechanics and our
+artist's great work. This paired with a lack of design and writing put too much
+emphasis on the previously mentioned time mechanics without adequately designed
+levels to show that off nor create a hook to keep people interested in the game.`,
+        buttonText: "Learn More",
+        buttonLink: "https://d-tail-entertainment.itch.io/monq",
+      },
+      {
+        header: "Graphics",
+        subheader: "Bsc (hons) Computing for Games - Falmouth University",
+        image: undefined,
+        imageAltText: "Need up to date image",
+        content: `This is where I learned how to create a graphics engine from
+scratch using OpenGL and was the project which I enjoyed the most during my
+bachelors degree. I especially enjoyed how deep I jumped into C++ to improve it's
+memory footprint returning to this project in my final year of university.`,
+        buttonText: "Need link",
+        buttonLink: undefined,
+      },
+    ];
+  }
+
+  render = () => {
+    return (
+      <Container>
+        <p />
+        <Typography variant="h4">Game Projects</Typography>
+        <Grid container spacing={3}>
+          {this.content.map((project) => {
+            return (
+              <Grid item sm="12" md="6">
+                <Card>
+                  <CardHeader
+                    title={project.header}
+                    subheader={project.subheader}
+                  />
+                  <CardMedia
+                    style={{ height: 0, paddingTop: "25%" }}
+                    image={project.image}
+                    title={project.imageAltText}
+                  />
+                  <CardContent>
+                    <Typography variant="body1">{project.content}</Typography>
+                  </CardContent>
+                  <CardActions>
+                    <Button
+                      target="_blank"
+                      href={project.buttonLink}
+                      color="primary"
+                    >
+                      {project.buttonText}
+                    </Button>
+                  </CardActions>
+                </Card>
+              </Grid>
+            );
+          })}
+        </Grid>
+      </Container>
+    );
+  };
+}
+export default GameProjects;

src/index.jsx

@@ -5,6 +5,7 @@ import theme from "./theme";
 import Header from "./Header";
 import Greeting from "./Greeting";
 import WebProjects from "./WebProjects";
+import GameProjects from "./GameProjects";
 
 class App extends Component {
   render() {
@@ -14,13 +15,8 @@ class App extends Component {
         <Greeting />
         <Container maxWidth="md">
           <WebProjects />
-          <Typography variant="h1"> Hi </Typography>
-          <Button color="primary">Hello, world!</Button>
-          <Typography
-            component="div"
-            style={{ backgroundColor: "#cfe8fc", height: "100vh" }}
-          />
         </Container>
+        <GameProjects />
       </ThemeProvider>
     );
   }