this site

If you want the explanation for why I made this site, check /aboutsite. This page is dedicated to the how.

Overview

For hosting this site, I decided to go with neocities, since it has a built-in editor which would make deploying code simple. Everything on this site I coded myself in HTML, CSS and JavaScript, except for the sparkle cursor, which is a script from here. I started by working on index.html, the homepage, so I could have a template for my CSS. After I got the CSS functional, everything else got coded.

HTML

The site is broken up by class, with each page being assigned a class corresponding to its purpose. For example, this page, and every other project page is given the “project” class, so the CSS can correspond. On the blog page, every blog is given a class for the tagging system JavaScript to work.

CSS

I’m not particularly skilled at graphic design, so for color palette, I broke out ol’ reliable, Catpuccin. I went with the Mocha variant, since it’s pretty, and dark mode is always nice. Also, I use it for the terminal theme on my laptop!

Anyways, the CSS is where all the framework that I laid in HTML really comes into play. Each page “class” designates accent color. For example, you’ll notice that the header reading “this site” is blue, but on other pages it might be pink or purple. That’s because of the classes! I did it this way so that I could fit all my styling in one stylesheet, thus avoiding redundancy. Yay :D

JavaScript

This site is pretty light on JS, but that doesn’t mean it’s completely devoid of it! To get the site to function as intended, I have two scripts that I use - one for the music player on /about, and one for the tagging system on my blog.

I’ll start with the latter, since it’s pretty straightforward. There are three functions, hideClass(), showSpecificClass(), and showEverything(). They all do what they say on the tin. hideClass() and showEverything() are both pretty straight forward, but showSpecificClass() is sort of interesting. It takes one input, the class that you want to show. It hides everything of the “box” class, which for the blog means every single blog entry. Then it takes the inputted class, and finds every entry in the code that matches it, and shows em. showEverything() clears the tags.

The second script operated the music player on the about page. When the page first loads, it sets “currentAudio” to null, so nothing is playing. Then, when the user clicks any of the play buttons on the page, it runs two functions playMusic() and iconToggle(). playMusic() pauses all other music from the beginning, and starts playing whatever song has been selected from the beginning. iconToggle() makes sure the play/pause icon correctly matches the song that’s playing.