diff --git a/package.json b/package.json index bef44d3..6b88670 100755 --- a/package.json +++ b/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", diff --git a/src/GameProjects.jsx b/src/GameProjects.jsx index 1862dad..5678101 100644 --- a/src/GameProjects.jsx +++ b/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, }, diff --git a/src/GraphicsBlog.jsx b/src/GraphicsBlog.jsx new file mode 100644 index 0000000..0b17d63 --- /dev/null +++ b/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 ( + +
+ +

+ + + + + 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. + + + + To Do: + + + + Give meshes their own relative location. + + + + Run a marching square implementation to generate a mesh for a + chunk based on test data. + + + + Handle loading chunks asynchrounously as the game runs. + + + + Add a noise algorithm to vary the city scape marching square + generation. + + + + Create mesh data library to make the marching square + algorithm generate something that looks like a city. + (May require a method of importing models) + + + + Fancy lighting (Potentially bake some shadows into a chunks + tuxture during the generaton phase). + + + + Design and create an interesting movement system for the world created. + + + + Look into potential implementation of mono-rails and + suspended trains as a stretch goal. + + + + +

+ + {this.content.reverse().map((project) => { + return ( + + + + + + + {project.content} + + + + + + + + ); + })} + + + + ); + }; +} +export default GraphicsBlog; diff --git a/src/Header.jsx b/src/Header.jsx index cf09fbf..2de881c 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -29,14 +29,23 @@ class Header extends Component { Warwick New - + + + {" "} + + ); diff --git a/src/Home.jsx b/src/Home.jsx index 6173eae..d6d1909 100644 --- a/src/Home.jsx +++ b/src/Home.jsx @@ -16,6 +16,7 @@ class Home extends Component { +

); } diff --git a/src/Ramble.jsx b/src/Ramble.jsx index b689afb..9cce1cc 100644 --- a/src/Ramble.jsx +++ b/src/Ramble.jsx @@ -15,32 +15,38 @@ class Ramble extends Component { return (

+

- - 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.

- 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.

- 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. + +

+ + Here's a demo of the project I took before before we moved on.

diff --git a/src/index.jsx b/src/index.jsx index 24284b5..7e93c2f 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -25,6 +25,10 @@ class App extends Component { import("./Ramble").then((module) => module.default) } /> + + import("./GraphicsBlog").then((module) => module.default) + } + /> import("./404Page").then((module) => module.default) } diff --git a/src/theme.js b/src/theme.js index 8772120..94d7911 100644 --- a/src/theme.js +++ b/src/theme.js @@ -22,7 +22,7 @@ const theme = createTheme({ main: '#046865', }, background: { - default: '#f8ffeb', + default: '#f0ffd6', }, error: { main: '#e53d00', diff --git a/static/images/GraphicsBlog/blog1.png b/static/images/GraphicsBlog/blog1.png new file mode 100644 index 0000000..e121e1b Binary files /dev/null and b/static/images/GraphicsBlog/blog1.png differ diff --git a/static/images/GraphicsBlog/blog3.png b/static/images/GraphicsBlog/blog3.png new file mode 100644 index 0000000..4c73a6f Binary files /dev/null and b/static/images/GraphicsBlog/blog3.png differ diff --git a/static/images/NewGraphics.png b/static/images/NewGraphics.png new file mode 100644 index 0000000..aa6796a Binary files /dev/null and b/static/images/NewGraphics.png differ diff --git a/static/video/graphics_blog/blog2.webm b/static/video/graphics_blog/blog2.webm new file mode 100644 index 0000000..380e2b2 Binary files /dev/null and b/static/video/graphics_blog/blog2.webm differ