new site things!

2024 12 18

in order to stave off my inner demons, ive been spending a lot of time working on websites. I've done a lot of things for other people's websites, including fixing OC Transpo's new launch site for O-Train lines 2 and 4, which, as of writing, is still broken in production. Awesome.

Most of this has been private stuff for my portfolio, but on a particularly bad day, i decided to make some fun new themes for my personal site. A couple days later, I also decided to make a theme inspired by Unbeatable's HUD. Unbeatable being a early access rhythmn game that is supposed to fully come out in 2025. Currently, you can see these themes on my home page, and on my page about fighting games, respectively. I've been calling the first one "sparkly", which I'll use to disambiguate between them.

I don't feel done with either theme, but I do feel comfortable saying that at least the sparkly theme feels like it's in a finished state. And either way, there are cool things to talk about, including what I did and why, how I did them, and additions and changes I am interested in making.

what i did and why

sparkly

Sparkly is a kind of theme I've always wanted to make before, but have always between intimidated by the level of commitment required.

It requires a lot of subtle decorations that need to match the overall aesthetic while simultaneously not being overwhelming. The colours used in both the site itself and the decorations are also really important. The reason my generic orange background image for most of my site is designed the way it is is because I wanted to cheat adding little decorations by just adding a bunch in the background and then repeating that across the whole page.

A part of it is also making the actual main details on the site be visually interesting and presented in a 2 dimensional way. So I rewrote my homepage to be less verbose and put some things on aside. i think it worked really well, but it probably wouldn't look very good or read well if I wanted to add more text. Although, in a webblog last month, I briefly mentioned that I've started being more interested in making webpages that are complete initially and not meant to gain new information.

In order to do decorations, I took a lot of details I liked from other sites, and put them together with my own interests. I layered several backgrounds together, one of which is semi transperant and has a panning animation. It's kinda amazing how much this does to make the page look more interesting, like, if one of the images fail to load it becomes immediately obvious how much they're adding to the aesthetic. At some point I wanna try and make a background like this using abstract shapes and see if it works the same, or making something procedural.

One of those background images is actually a foreground image, with the sparkles. It's a fullscreen image of a bunch of sparkle effects, and since all the background images are set to display: fixed, it means the sparkles add nice decorations to the whole page really easily. it also creates some neat parallax that i like. i also really like this approach to background decorations (single fullscreen image that doesnt scroll or repeat, and remains fixed), since it completely avoids needing a background that properly repeats, while adding a lot of depth to the site.

with actual page elements, i tried to make make visual anchors that draw attention around the page and make the page easier to read and navigate subconsiously. this is one of the reasons why I've begun to prefer standalone webpages that dont have lots of things on it, because it's a lot easier to guide the reader this way. in reality, though, i think its probably something i should decide on a page-by-page basis. since a page like this webblog probably doesn't need quick navigation, as the kind of entity that would want to view this page would probably want to engage with the text in its entirety, rather than skimming over it.

with the wiggling stat boxes and the associated image, i wanted something to bring eyes down to the main intro, and i used the border on the special interests header to create a delineation that tells brain you only need to read the three paragraphs above it for the basic intro. with my original homepage, I noticed it was really hard for brain to identify the most important information quickly, which would make people less likely to read it. The stat box and the image also just helps break the page up and makes everything seem more bite sized than it actually is. In addition, the border around special interests make it feel more important and easier to locate, which was also something I really wanted. I put auxillary information underneath these, cus it helped balance the page, and also because if someone is scrolling there, it means they're probably interested in the information there.

On mobile, I made the image and wiggling boxes go between the first and second paragraph, since otherwise it wouldn't be doing anything to break things up into smaller chunks or drawing attention downwards. I still feel like it's a lot less succesful on mobile, but I guess that makes sense, since I made the decision I did with desktop in mind, and then adapted that to mobile without making structural changes.

I imagine this is something you're taught in design school, but I kinda just am aware of it subconsiously. i don't even realise im designing things in this way until i reflect on it. it usually goes like "something feels 'off' here, lets try [this thing] to see if i like it more". it's more of something i feel rather than a consious decision. im probably like this because of how much photography i do lol. Although, now that I understand this about myself, I can probably streamline how I go about design and figure out some shortcuts to finding something I like.

beyond the layout itself, I put a lot of thought into shadows and background details and and borders. I've found that even small changes with these can make a huge difference in how much i like how a page looks. for example,

Here, the purple drop shadow makes it a lot more exciting and visually interesting, while also not clashing with the rest of the aesthetic. It somehow makes the entire signboard feel more colourful even though its a flat colour. But look closely, there's also a faint halo around it. I went back and forth on adding it for a bit but decided it added a lot without taking anything away, so i kept it. The shadows also make it look a lot better when the header is overlayed with other elements, which happens on large screen sizes if your browser supports it.

I put these kinds of smaller touch up details on all links, the navbar border, and the main box. There's a bunch of other in the same vein that I don't really feel like mentioniing.

Also, if you wonder the reason why you can't select the header text, it's because it's a psuedo element and not actually a text element. I did this just cus I didn't feel like making a new class or styling box so I just added a psuedo element onto the existing header. this caused problems for accessibility later down the line, and I had to add a invisible piece of text for screenreaders into the header. The whole header itself is kinda hacked together but I really like it, and honestly, the ability not to select that does make it feel better in certain contexts.

nav bar

So, the navigation here is completely different from the one on the original page, and a part of this style was meant to try and challenge me to make a different style of nav that I haven't before.

I don't know if anyone has noticed, but basically everytime i make a new thing from scratch, i try to style the nav in a different way.

But all of these have always felt like the theming has been through the links themselves, even when I've made navbars nested in a header. For this theme, I wanted to make the text as simple as possible, and instead focus on styling the box around it. A small part of this was also because it was easier in my head, and since I thought it would be more fitting for the subconsious navigation and general page aesthetic.

I think I pulled this off pretty well, although I don't have much to say about the desktop version.

The mobile nav is a drop down menu, which is also different from what I've done traditionally. I do this so that the nav doesn't take up a lot of a screen unless you click it. I had a lot of ideas for how I wanted the menu to expand, but I decided to just have the box expand to show the links inside of it, since i thought it was pretty and easy. Something I didn't realise about this, though, is that CSS animations are really CPU intensive when shifting lots of elements, especially if there are lots of shadows and stuff to recalculate. it isn't too noticeable, since you probably won't be scrolling while it's animating, but it is kinda annoying. I could probably fix this by putting the box on its own layer over top of the rest of the document or removing the shadows, but I really like how it looks with the shadows and pushing everything else around. My regular mobile nav dropdown for the rest of my site do these things, and it has almost no lag at all.

with regards to performance in general, for some reason the backgrounds cause a big problem on firefox android. it might also with other browsers but the other ones i looked at didn't have the issue. Getting rid of or optimising the background animations help, and so does getting rid of the blending and stuff, but it isn't signficant enough for me to feel comfortable sacrficing all that. getting rid of the sparkly foreground did help a lot but again, it was way more extreme to remove than i was comfortable. I want to add a reduce motion toggle button, and a part of the reason why is as a bandage solution to the site lagging. I could probably also pre render the animations but I don't really wanna do that.

if i do reduce motion, i think ill still keep the open and close animation for the nav menu on mobile, since i think it is okay and makes it more accessible, not less.

in general, there is a fair amount more going on with this site behind the scenes than other pages on my personal site. a big example of that is the layering going on. there are some things I am happy with, and some things that aren't.

Making this allowed me rewrite all my CSS from scratch, and I tried to streamline and simplify it as much as possible from what I've learned in the last three years. For example, the page styling only changes once to accomodate smaller screen sizes which is when the screen is below 500px, and half of the code in that is just to enable the mobile nav. this means that i made most of the site in a way that made it do changes for me.

I do have some other style changes at different screen sizes to make small adjustments to elements positioned absolutely, since I can't rely on them scaling relatively. I tried to avoid this as much as possible, and so only a few of those elements actually need to be taken care of actively, but i don't know enough yet to avoid it entirely for things like the character. In the near future, I plan on updating the page to get the main box and the header no longer be absolute, since Im fairly confident I can get it to work with only minimal adjustments, and I want to try and avoid adding something so major if I don't need it. Im trying really hard to streamline the styling and only have what I need, so that I don't cause problems later. for example: the margins on the main box behave differently in different browsers

I think the character adds a lot to the page and I think i wanna explore idea likes that much more extensively in the future. I really like how i added them. Something I really wanna do is make some variations of this theme, like colours and icons and layouts, and one of my favourite ideas is changing how decorations like the character function. I wanna try and make something easily repeatable without being boring, to reduce the burden. I wanna find a way to adapt a sparkly and bright theme like this into longer documents, without being exhausting, cus I really like it and wanna use it elsewhere.

with regards to variations, I am considering making a dark theme. Most of the pages on my site have a dark mode variant, and i want my homepage to fit into that, but I don't really have any idea for how to adapt it, and I am very aware that it will be an enormous amount of effort.

As I mentioned in that webblog from last month, finding a colour palette and general theme is one of the core aspects of designing a webpage, and I think its distinctly separate from actually styling and designing the layout and user interface. Palettes and general themes are really hard and can take days to land on something that works, and can require loads of different drafts. The thing with human colour perception is that colours look completely different depending on context, so if you change one thing, you need to go back and evaluate if the rest of the colours still work. I got really lucky and mostly just lifted colours from elsewhere and accidentally fell onto a palette that worked alright. I did make some decisions to try and make the colour palette work better with the way i used the colours, but i didnt really have to pick any of the colours out myself.

Im kinda hesitant to make a dark theme cus I would want to make a new colour palette, and have different background images, and that would be an enormous amount of work for something I don't even know will make sense with the theme.

My new homepage also gets the priviledge of becoming the second page on my (personal) website to have any javascript. The only reason the first page uses javascript is because my server doesn't have PHP and I don't feel like installing it, and the new homepage uses it for accessibility. Now that my personal webpages have collapsable nav menus, I need to set an accessibility attribute to indicate whether or not its expanded or not, and the only way I know of to do that is by using javascript.

there would probably be a lot more scripting on my site if i could use php and not javascript to be honest. i should get on that. im not super huge on scripting in general if the user can't see it, since my joy comes from visual design, but i also just do not like javascript specifically. why is it like that.

expanding on the accessibility thing, I made a active effort to make this page feature complete with regards to accessibility. i usually avoid adding accessibility features on my personal website because of how messy my code is, or just because theres simply lots of stuff on the page, where adding things like alt text attributes would take literal hours and be really unhealthy for me. Ultimately though, i know my personal website is mainly for myself and no one else, and making it accessible would make it worse for me. Since the new home page took a scorched earth and streamlined approach, though, I could add accessibility features on top pretty easily. a lot of it was done automatically since I have just gotten better at writing accessible HTML and CSS in the last 3 years, but it was also pretty easy cus the page is pretty small. at the end of it though, I'm just really proud of the new page, and actively want to share it with as many people as possible, and so i feel a lot of desire to make it more accessible.

To be clear, all of my pages have always been fairly accessible, since I've always written semantic HTML, and the pages are also fairly low tech, so there's not much that could break the default accessibility. The main difference with this new page was adding accessibility-only features like ARIA labels, and paying close attention to the site outline and how it functions.

unbeatable page

This page was made speciifcally for the aesthetic idea I had, and wasn't ever intended to actually be used on a general content page.

I decided to try and adapt it anyways to my fighting game page, which I wanted to flesh out more anyways. but i definitel;y dont think it fits as is.

the page navigation is fixed to the bottom of the screen and is meant to look like a heads up display in a game, and its animated using a SVG distortion mask. It's really bad for performance and i dont know how to change it but i almost certainly can. Using a mask to handle the animation was my very first idea and I had actually no idea if it would work at all, and I'm happy to know that it works pretty much as well as I expected for the effect.

I put some animation around the buttons themsevles, including when theyre hovered, and i think it looks pretty good and adds a lot.

i orginally made this style for a speciic one-off art page and so it doesn't really work well on the longer one, at least as is

conclusion

doing websites has definitely become a hyperfixation, and is how i've been managing my mental health. when i said "to manage my inner demons" at the beginning, i meant that seriously. it's... a little misleading, because it's moreso someone else's inner demons that im bearing the brunt of the consequences for, but the sentiment that it's for my mental health is genuine.

i can't say it's been the healthiest coping mechanism, since it's involved isolating myself a lot and neglecting caring for myself. It makes me feel bad at the end of the day when I realise that all I've done is make websites.

I've definitely got a lot better about streamlining webdesign and identifying how to do it with as little burden as possible, though. So future websites should take less work. It's also given me an opportunity to completely rewrite the homepage's CSS to match that.