Created a Uni-Graphics page.

src/GameProjects.jsx

@@ -33,6 +33,7 @@ class GameProjects extends Component {
         implement vehicles and other methods of terrain traversal.`,
         buttonText: "Read Blog",
         buttonLink: "/graphics-blog",
+        newtab: false
       },
       {
         header: "Monq",
@@ -48,6 +49,7 @@ class GameProjects extends Component {
         puzzle design and texture generation through shaders.`,
         buttonText: "Learn More",
         buttonLink: "https://d-tail-entertainment.itch.io/monq",
+        newtab: true
       },
       {
         header: "University Graphics Project",
@@ -65,8 +67,9 @@ class GameProjects extends Component {
         I especially enjoyed how deep I jumped into C++ to improve its memory
         footprint returning to this project in my final year of university,
         leaning more about pointers and memory management.`,
-        buttonText: undefined,
+        buttonText: "Learn More",
-        buttonLink: undefined,
+        buttonLink: "/uni-graphics",
+        newtab: false
       },
     ];
   }
@@ -98,7 +101,7 @@ class GameProjects extends Component {
                   </CardContent>
                   <CardActions>
                     <Button
-                      target="_blank"
+                      target={project.newtab ? "_blank" : ""}
                       href={project.buttonLink}
                       color="primary"
                     >

src/Greeting.jsx

@@ -18,13 +18,13 @@ class Greeting extends Component {
         <div
           style={{
             position: "absolute",
-            width: "103%",
+            width: "100%",
             left: "49%",
             right: "49%",
             top: "30%",
-            height: "45%",
+            height: "60%",
             objectFit: "cover",
-            transform: "translate(-50%,-50%)",
+            transform: "translate(-49%,-50%)",
             zIndex: "-1",
           }}
         >

src/Ramble.jsx

@@ -27,7 +27,7 @@ class Ramble extends Component {
                 accept call-ins in a similar vein 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>.
+              </Typography>
               <p />
               <Typography varient="p">
                 It also had chatroom functionality with the ability to

src/UniGraphics.jsx

@@ -1,16 +1,17 @@
 import { h, render, Component } from "preact";
 import Header from "./Header";
 import {
+  Button,
   Container,
   Card,
   CardHeader,
   CardContent,
   Typography,
 } from "@material-ui/core";
-const rambleDemoWebm = new URL("../static/video/ramble_demo/ramble.webm", import.meta.url);
+const graphicsDemoMp4 = new URL("../static/video/uni_graphics_demo/uni-graphics.mp4", import.meta.url);
-const rambleDemoMp4 = new URL("../static/video/ramble_demo/ramble.mp4", import.meta.url);
+const graphicsDemoBuild = new URL("../static/builds/UniGraphics-Win64.zip", import.meta.url);
 
-class Ramble extends Component {
+class UniGraphics extends Component {
   render() {
     return (
       <span>
@@ -18,35 +19,26 @@ class Ramble extends Component {
         <p />
         <Container maxWidth="md">
           <Card>
-            <CardHeader title="Ramble" />
+            <CardHeader title="University Graphics Project" />
             <CardContent>
               <Typography varient="p">
-                Ramble was a web project I created during my master's degree to
+                I made this project for a module at uni. It's a terrain map
-                create a startup. In this project, I was the CTO and built a
+                based on Perlin noise with flat face lighting, It was the first
-                website that allowed users to stream their podcasts live and
+                project where I picked up a lot of the 3D maths used in games
-                accept call-ins in a similar vein to talk shows! I learnt the
+                and learned about simulation. It was my first project using
-                entire javascript web development stack from React to audio
+                GLSL with C++ and also the project I optimised for an
-                streaming to DevOps in order to make it a reality.
+                optimiseation module in my final year. Getting deep into
-              </Typography>.
+                learning more about memory management and Object-Oriented
-              <p />
+                design.
-              <Typography varient="p">
-                It also had 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">
-                During the project's lifespan of just under two years, I mostly
+                Here's a build and a video demo: &#8194;
-                worked on creating the streaming functionality of the project
+                <Button
-                and managing how the project was designed to function behind
+                  variant="contained"
-                the hood when it was deployed. I learned a ton about how web
+                  color="primary"
-                deployment works during this time allowing me to work on web
+                  href={graphicsDemoBuild}
-                development modules in the Games Academy at Falmouth University
+                >Win64-Build.zip</Button>
-                today.
-              </Typography>
-              <p />
-              <Typography varient="p">
-                Here's a demo of the project I took before we moved on.
               </Typography>
               <p />
               <div>
@@ -55,8 +47,7 @@ class Ramble extends Component {
                   height: "auto",
                   objectFit: "cover",
                 }}>
-                  <source src={rambleDemoMp4} type="video/mp4" />
+                  <source src={graphicsDemoMp4} type="video/mp4" />
-                  <source src={rambleDemoWebm} type="video/webm" />
                 </video>
               </div>
             </CardContent>
@@ -67,4 +58,4 @@ class Ramble extends Component {
   }
 }
 
-export default Ramble;
+export default UniGraphics;