Around September 2024, I had a messy game development portfolio website, and it didn't wholly reflect all of my abilities.
So, equipped with skills in HTML, CSS, and JavaScript from my training course, I took to making an interesting personal website.
I wanted to give myself a challenge, I love games, so this website is originally based around the Nintendo Switch UI.
This was a great first big project for me, at first there was challenge in attempting to replicate the switch's desolate UI.
Soon though, I realised that I couldn't just replicate it, as most agree that it's not actually very good... So I built upon it,
and made something that was fundamentally... Me.
Firstly, I was basing this website off of the Nintendo Switch UI as stated above. This proved an interesting challenge to get my website interface as similar as possible, and came with many challenges. I also had to be careful regarding copyright laws and not to directly use any assets that were owned by Nintendo, mainly fonts. However, I was able to use strictly fonts within the public domain. Later in my development, I further sought to make my own additions, and improve on Nintendo's design, as well as make it feel more like it showcased who I was.
When replicating the Switch's UI, I had to create something for the status it has in the top right on the home page, so I decided I would attempt to show my current status there. I successfully did this using a Discord API called Lanyard. Considering my status on Discord usually represents my current status on my computer this works very well, and if you check you can see what I'm doing right now! This was another big challenge as part of the process but the end result was incredibly satisfying.
It was important that I could show people such as yourself all of my handy work. People are busy, I don't want to waste your time! Everything you need to see can be found here. You can view my scripts, fetched directly from Github, you can play my games, and see my projects right in the pages of this website! No wasting time downloading or tab switching. The code viewer was the hardest, you can easily fetch from Github raw, but I wanted the text to be highlighted correctly, so I used Highlight.js for this.
This was by far the hardest part of developing this website. Every browser is different, every screen is a different size, and I don't have access to all of those devices in order to test them. The first big issue was portrait mode on phones... The Nintendo Switch UI is locked at landscape, so if I allowed for portrait, it would no longer be the same at all. The issue is, you can't lock screen orientation reliably on web browsers, so I came up with a simple solution where the user is notified to change orientation themself.