Merge branch 'master' of warwicknew.xyz:portfolio

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

@@ -13,34 +13,49 @@ 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) {
     super(props);
     this.content = [
+      {
+        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: "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.`,
+        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: "Graphics",
+        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
-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.`,
+        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: undefined,
         buttonLink: undefined,
       },

src/GraphicsBlog.jsx

@@ -0,0 +1,169 @@
+import { h, render, Component } from "preact";
+import {
+  Grid,
+  Container,
+  Card,
+  CardHeader,
+  CardMedia,
+  CardActions,
+  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";
+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: `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: `The project is now officially 3D, with camera movement. Next
+        up 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" />
+            <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.reverse().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/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/Home.jsx

@@ -16,6 +16,7 @@ class Home extends Component {
         <Container maxWidth="md">
           <WebProjects />
         </Container>
+        <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
-                create a startup.
+                Ramble was a web project I created during my master's degree to
+                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
-                the ability to re-stream to audiences much like other apps that
-                came out in the time since, such as clubhouse. These high
-                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.
+                It also 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">
-                Due to the projects reliance on software as a service projects
-                and it's part ownership of an incubator program, I'm
-                unfortunately unable to leave a demo running of the
-                functionality we had created. So here's a video of it in action
-                I took just before the shutoff.
+                During the project's lifespan of just under two years, I acted
+                as CTO. 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 before we moved on.
               </Typography>
               <p />
               <div>

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)
           }

src/theme.js

@@ -22,7 +22,7 @@ const theme = createTheme({
       main: '#046865',
     },
     background: {
-      default: '#f8ffeb',
+      default: '#f0ffd6',
     },
     error: {
       main: '#e53d00',