How I made this

Some parts of this website go back about 9 years, starting with the javascript game City Slicer, which still includes work from around that time. I made the site back then with notepad, and no other tools.

The original site was just html, but I had upgraded to packing the site using Vite last year. The Vite website was completed at the end of my 3D modelling career, and it included the 3D portfolio THREE.js canvas that I created with the help of an 8 hour tutorial, after losing my job in 3D.

The Next.js application you see before you today was converted from an html website with the help of copilot ai. The primary goal of the 3D canvas was to showcase some of my 3D work as well as my web design skills. It seems kind of pointless now which is why I feel the need to clarify what was created pre-AI. We’re going to need a word to define that period of time that is now over. I almost wrote pre-singularity.

Now that the singularity is here I feel like I don’t really need to explain how I created the rest of the website, as you’re better off asking the AI. That’s how I built it, that, and a combination of my rudimentary computer science experience. It even taught me how to set up a server for comments, which might seem small to you but is huge for me. My understanding usually goes as far as points and lines but the addition of github copilot to my programming practice has removed these limits of my understanding, and I’m not sure that I’m even using it right.

For more nitty gritty details, the background is a .js canvas, the css makes the magic nav bar and buttons. The ask page is simply Gemini with some added prompts to use html formatting, which is parsed into react components. This is the core of non-deterministic programming, as I am asking the AI to produce code for me that then runs, although very rudimentary code. In the near future techniques like this will be used to generate apps using prompts, I'm sure someone is already doing this.

On the subject of CSS, I never realised it’s potential until working with copilot. I came from a physics background into programming and was always comfortable with an updating game-loop for animation, so when it came to animating in CSS I stuck to the basics because the system didn’t really make sense to me, but now I’ve realised how powerful it is and relatively simple to use, if you have an AI assistant to help you with the differences between flex boxes and blocks.

Converting everything to react while learning the language was a daunting task but I think it really helped me to learn faster, and I doubt I would have been able to do it without copilot, at least not so quickly. I doubt I ever would have gained an understanding of what react is without copilot. The react application contains THREE.js, multiple 2D canvases, and all of my old web pages, some of which I remade from scratch.

Currently the "stack" is React, Apache, Vercel, Google Cloud.

The Blog section is the only part that is entirely new, apart from the ask page , and that is 3 react pages. 1 main page, 1 category page, and 1 Blog Post page that accesses the blogs from multiple .json files, plus a comment form component and a comment section component both made from scratch, one of which reads comments from a .json file and the other which submits comments to the server.

If you’d like to read more about how I made specific things, you can read about them here!: