Added Blog to website.

src/GameProjects.jsx

@@ -13,6 +13,7 @@ import {
 } from "@material-ui/core";
 import Monq from "../static/images/Monq.jpg";
 import Graphics from "../static/images/Graphics.png";
+import NewGraphics from "../static/images/NewGraphics.png";
 
 class GameProjects extends Component {
   constructor(props) {
@@ -24,16 +25,30 @@ class GameProjects extends Component {
         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.`,
+university friends. However we over scoped when it came to having an
+interesting platformer in a single year. This paired with a lack of design
+focus and writing put too much emphasis on the previously mentioned time
+mechanics without adequately designed levels to show them off nor create a
+solid hook to keep people interested in the game.`,
         buttonText: "Learn More",
         buttonLink: "https://d-tail-entertainment.itch.io/monq",
       },
       {
-        header: "Graphics",
+        header: "Current Graphics Project",
+        subheader: "Happening alongside Assistent Lecturer - Falmouth University",
+        image: NewGraphics,
+        imageAltText: "Generated terrain",
+        content: `I'm currently working on a another graphics project as this
+is the area of computing I want to get back into. I plan on
+implementing much more complex generated terrain and other features
+such as including a physics engine for a more complex character
+controller and an entity system so I can implement other methods of
+terrain traversal.`,
+        buttonText: "Read Blog",
+        buttonLink: "/graphics-blog",
+      },
+      {
+        header: "University Graphics Project",
         subheader: "Bsc (hons) Computing for Games - Falmouth University",
         image: Graphics,
         imageAltText: "Generated terrain",

src/GraphicsBlog.jsx

@@ -0,0 +1,112 @@
+import { h, render, Component } from "preact";
+import {
+  Grid,
+  Container,
+  Paper,
+  Card,
+  CardHeader,
+  CardMedia,
+  CardActions,
+  CardContent,
+  Typography,
+  Button,
+} from "@material-ui/core";
+import Header from "./Header";
+
+import Blog1 from "../static/images/GraphicsBlog/blog1.png";
+const Blog2 = new URL("../static/video/graphics_blog/blog2.webm", import.meta.url);
+import Blog3 from "../static/images/GraphicsBlog/blog3.png";
+
+class GraphicsBlog extends Component {
+  constructor(props) {
+    super(props);
+    this.content = [
+      {
+        header: "SDL/OpenGL boilerplate",
+        subheader: "Note: this blog is a copy of a forum thread",
+        mediaType: "img",
+        image: Blog1,
+        imageAltText: "Textured square",
+        content: `Welp, since no one else is using this channel I'ma start posting updates on my game engine project as they come. Today I added textures to my game engine. Next up refactoring... But then camera movement (Or strangely enough world movement around camera).`,
+        buttonText: undefined,
+        buttonLink: undefined,
+      },
+      {
+        header: "Camera Movement",
+        subheader: "Note: this blog is a copy of a forum thread",
+        mediaType: "video",
+        image: Blog2,
+        imageAltText: "Textured square with camera movement",
+        content: `So, after a massive hiatus I got back into working on this
+        project again, and it's now officially 3D, with camera movement.  Next
+        is more complex meshes.`,
+        buttonText: undefined,
+        buttonLink: undefined,
+      },
+      {
+        header: "Multiple Meshes",
+        subheader: "Note: this blog is a copy of a forum thread",
+        mediaType: "img",
+        image: Blog3,
+        imageAltText: "2 textured squares",
+        content: `Now I have a mesh class it's pretty easy to make multiple
+        objects reusing textures and indecies 🙃. Next it's giving those meshes
+        their own relative position rather than hard coding every position on
+        every triangle point to move it.`,
+        buttonText: undefined,
+        buttonLink: undefined,
+      },
+    ];
+  }
+
+  render = () => {
+    return (
+      <span>
+        <Header />
+        <Container>
+          <p />
+          <Card>
+            <CardHeader title="Graphics Blog" />
+          </Card>
+          <p />
+          <Grid container spacing={3}>
+            {this.content.map((project) => {
+              return (
+                <Grid item xs="12" lg="6">
+                  <Card>
+                    <CardHeader
+                      title={project.header}
+                      subheader={project.subheader}
+                    />
+                    <CardMedia
+                      component={project.mediaType}
+                      image={project.image}
+                      alt={project.imageAltText}
+                      muted
+                      loop
+                      autoplay
+                      controls
+                    />
+                    <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>
+      </span>
+    );
+  };
+}
+export default GraphicsBlog;

src/Greeting.jsx

@@ -61,14 +61,17 @@ class Greeting extends Component {
             <CardContent>
               <Typography variant="h1">Welcome</Typography>
               <Typography variant="body1">
-                Hi, My name is Warwick and I'm a Fullstack Web Developer with an
+                Hi, My name is Warwick and I'm a Computing based  Associate
+                Lecturer at the Games Academy in Falmouth University with an
                 academeic background in Computing for Games and
                 Entrepreneurship.
               </Typography>
-              <Typography variant="subtitle1">Availability</Typography>
+              <Typography variant="h5">Availability</Typography>
               <Typography variant="body2">
-                I'm currently looking for work if you think my skills may be
-                relevant to you. My CV and previous projects can be found below.
+                I'm currently looking for an oppertunity to grow my knowledge
+                in graphics and simulation. If you think my skills may be
+                relevant to you, my CV and previous projects can be found
+                below.
               </Typography>
             </CardContent>
             <CardActions>

src/Header.jsx

@@ -29,14 +29,23 @@ class Header extends Component {
             <Typography style={{ flex: 1 }}>Warwick New</Typography>
           </Link>
           <Box />
+          <span style={{ marginLeft: "auto" }} >
+            <Button
+              variant="contained"
+              href="/graphics-blog"
+              color="secondary"
+            >
+              Graphics Blog
+            </Button>
+            {" "}
             <Button
               variant="contained"
               href="/contact"
               color="secondary"
-            style={{ marginLeft: "auto" }}
             >
               Contact Me
             </Button>
+          </span>
         </Toolbar>
       </AppBar>
     );

src/index.jsx

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