Making a Website That Looks Like a Piece of Master System Box Art for Some Reason.
Part 4: The Final Chapter
An absolute banger to round out the final part in my series of articles where I talk about my website like it’s the second coming of Cheezus. My first Sonic game and my first Yuzo Koshiro soundtrack. If you’ve played videogames for any length of time you’ve probably heard Yuzzy K (as no one calls him) so really there’s no need for another lame introduction from me. The end.
AAAAannnnyways, we finally made it to the end of my series of articles on why I “done” a funny looking website that looks like some Master System box art. Why did it take so long to write about something I’ve already done? Did I learn any amazing coding techniques? Were the real websites the ones we met along the way? The answer to all (read: none) of these questions can be found below.
So, um, it works! And it looks pretty much as I originally imagined. Is it particularly user friendly? Well, not really. It’s certainly “esoteric” or “shite” in for want of a better word but the process was largely painless. I create-react-app’d my way to success basically. My codebase is messy as chuff, particularly my css file which I ignorantly thought would be pretty spick and span and soon ballooned into a tragic mess of properties and selectors. Please, no one look at it and judge me harshly. Note to self for the future: never assume that styling your page is going to be easy.
In addition, in the future I think slapping a proper database on the backend will help me update my projects quicker. At the moment all the data for the projects is stored in a quick and dirty JSON which is nice and all but when I add a new project, I have to edit the JSON and push the whole project to GitHub again. Not a very efficient workflow I gots going on there. So, of course, there’s still some tinkering to be done in the future.
Other than that, the only real extra piece of flair I was chuffed with was a modal I added to show a little more information about finished projects from the scrollable window on the far left:
There were a few libraries around for making modals in react but in the end I ended up using a react toggle state to create a little pop up from scratch. Read all about the process of doing it here. Neat and tidy.
And that’s that I suppose. It was fun. It took far longer than it should and it took me even longer to write these articles. But, at the end of the day, you go to bed. Not really got much else to write. The finished website can be found heeeeeerrrrrreee:
Here’s a thought though; wouldn’t it be lovely if I made a dark mode version of the site?
It’d probably look something like that I suppose. Something to think about. Until next time!
