Added a todo list to the Blog so there is some clue as to what I'm trying to make.

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.11.2",
     "@types/react": "^16.9.56",
     "fontsource-roboto": "^3.0.3",
     "hls.js": "^1.1.5",

src/GameProjects.jsx

@@ -19,20 +19,6 @@ 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. 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: "Current Graphics Project",
         subheader: "Happening alongside Assistent Lecturer - Falmouth University",
@@ -47,15 +33,29 @@ terrain traversal.`,
         buttonText: "Read Blog",
         buttonLink: "/graphics-blog",
       },
+      {
+        header: "Monq",
+        subheader: "D-tail Entertainment - Programmer",
+        image: Monq,
+        imageAltText: "Monq",
+        content: `This was my first time working in and creating a startup with
+        university friends. I mostly worked on ai aspects of the project as
+        well as working on some of the puzzle sections of the game. Though in
+        the doing it for real indie envirenment I had my hand in pretty much
+        every other programming aspect of the game also.`,
+        buttonText: "Learn More",
+        buttonLink: "https://d-tail-entertainment.itch.io/monq",
+      },
       {
         header: "University Graphics Project",
         subheader: "Bsc (hons) Computing for Games - Falmouth University",
         image: Graphics,
         imageAltText: "Generated terrain",
         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
+        scratch using OpenGL and was the project which I enjoyed the most
-bachelors degree. I especially enjoyed how deep I jumped into C++ to improve it's
+        during my bachelors degree. I especially enjoyed how deep I jumped into
-memory footprint returning to this project in my final year of university.`,
+        C++ to improve it's memory footprint returning to this project in my
+        final year of university.`,
         buttonText: undefined,
         buttonLink: undefined,
       },

src/GraphicsBlog.jsx

@@ -2,7 +2,6 @@ import { h, render, Component } from "preact";
 import {
   Grid,
   Container,
-  Paper,
   Card,
   CardHeader,
   CardMedia,
@@ -10,7 +9,12 @@ import {
   CardContent,
   Typography,
   Button,
+  List,
+  ListHeader,
+  ListItemIcon,
+  ListItem,
 } from "@material-ui/core";
+import ArrowRightIcon from '@material-ui/icons/ArrowRight';
 import Header from "./Header";
 
 import Blog1 from "../static/images/GraphicsBlog/blog1.png";
@@ -27,7 +31,9 @@ class GraphicsBlog extends Component {
         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).`,
+        content: `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,
       },
@@ -37,9 +43,8 @@ class GraphicsBlog extends Component {
         mediaType: "video",
         image: Blog2,
         imageAltText: "Textured square with camera movement",
-        content: `So, after a massive hiatus I got back into working on this
+        content: `The project is now officially 3D, with camera movement. Next
-        project again, and it's now officially 3D, with camera movement.  Next
+        up is more complex meshes.`,
-        is more complex meshes.`,
         buttonText: undefined,
         buttonLink: undefined,
       },
@@ -50,9 +55,9 @@ class GraphicsBlog extends Component {
         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
+        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.`,
+        every triangle point to move it 🙃.`,
         buttonText: undefined,
         buttonLink: undefined,
       },
@@ -67,10 +72,60 @@ class GraphicsBlog extends Component {
           <p />
           <Card>
             <CardHeader title="Graphics Blog" />
+            <CardContent>
+              <Typography variant="p" >
+                In this project I plan to generate a cyberpunk cityscape with
+                an infinite level of verticality to really give it a large
+                sense of scale.
+              </Typography>
+              <List dense>
+                <ListHeader>
+                  To Do:
+                </ListHeader>
+                <ListItem>
+                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
+                  Give meshes their own relative location.
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
+                  Run a marching square implementation to generate a mesh for a
+                  chunk based on test data.
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
+                  Handle loading chunks asynchrounously as the game runs.
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
+                  Add a noise algorithm to vary the city scape marching square
+                  generation.
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
+                  Create mesh data library to make the marching square
+                  algorithm generate something that looks like a city.
+                  (May require a method of importing models)
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
+                  Fancy lighting (Potentially bake some shadows into a chunks
+                  tuxture during the generaton phase).
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
+                  Design and create an interesting movement system for the world created.
+                </ListItem>
+                <ListItem>
+                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
+                  Look into potential implementation of mono-rails and
+                  suspended trains as a stretch goal.
+                </ListItem>
+              </List>
+            </CardContent>
           </Card>
           <p />
           <Grid container spacing={3}>
-            {this.content.map((project) => {
+            {this.content.reverse().map((project) => {
               return (
                 <Grid item xs="12" lg="6">
                   <Card>
@@ -88,7 +143,9 @@ class GraphicsBlog extends Component {
                       controls
                     />
                     <CardContent>
-                      <Typography variant="body1">{project.content}</Typography>
+                      <Typography variant="body1" >
+                        {project.content}
+                      </Typography>
                     </CardContent>
                     <CardActions>
                       <Button

src/Home.jsx

@@ -15,6 +15,7 @@ class Home extends Component {
           <WebProjects />
         </Container>
         <GameProjects />
+        <p />
       </span>
     );
   }

src/Ramble.jsx

@@ -15,32 +15,38 @@ class Ramble extends Component {
     return (
       <span>
         <Header />
+        <p />
         <Container maxWidth="md">
-
           <Card>
             <CardHeader title="Ramble" />
             <CardContent>
               <Typography varient="p">
-                Ramble was a web project I created during my masters to try to
+                Ramble was a web project I created during my master's degree to
-                create a startup.
+                create a startup. In this project I acted as CTO and built a
+                website that allowed users to stream their podcasts live and
+                accept call ins in a similar vain 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 was essentially a website with chatroom functionality with
+                It also chatroom functionality with the ability to re-stream to
-                the ability to re-stream to audiences much like other apps that
+                audiences much like other apps that came out in the time since,
-                came out in the time since, such as clubhouse. These high
+                such as clubhouse.
-                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
+                During the project's lifespan of just under two years, I acted
-                and it's part ownership of an incubator program, I'm
+                as CTO. I mostly worked on creating the streaming functionality
-                unfortunately unable to leave a demo running of the
+                of the project and managing how the project was designed to
-                functionality we had created. So here's a video of it in action
+                function behind the hood when it was deployed. I learned a ton
-                I took just before the shutoff.
+                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 before we moved on.
               </Typography>
               <p />
               <div>