Website Updates — Cameron Johnston

I have been extensively updating my website as of late. Over the past year I have learned a lot of js, html and css, which I wanted to have the opportunity to show off a bit of my new skills. The two pages I put a large amount of work into are the homepage, and the new programming page.

The Home Page V2.0

The homepage has been a work in progress for a while now. The original homepage just feature my headshot and a short bio along with some links to other pages on the website.

This previous page was not a very good landing page. Since I have such a wide variety of talents, a simple couple of paragraphs and a two year old picture were not going to cut it.

After some inspiration from a Fireship tutorial I wanted to add a little flair to the website. I took some cues from modern web design and wanted big blocks showing off my different skills. I landed on floating blocks of images with the name of category floating above each image with a blur effect on the images.

The first issue I had with implementing javascript on Squarespace was getting the script to initialize. I learned that there is a squarespace function that actives a script when the page load. Part of the problem is that when you navigate to a new page within a squarespace site, there is some javascript magic going on. The browser does not think a new page loaded. As a result “.onload” in js did not work. Luckily, squarespace provides that functionality.

For a little more flair, I added an animate on scroll effect stolen from the previously mentioned Fireship video. I used intersect observing to change the class of each section when they get into the viewport.

Now my website is looking cool on first look. Everyone who goes to my website will be impressed and think I am the world’s best web programmer.

You know me, I can’t resist adding randomization elements. I identified a few sections that could have multiple images/videos that could be representative of said section. “Composer”, “Video Artist”, “Sound Artist” and “Laptop Performer” all have a number of images/videos that randomize on load. I am thinking that this will give the appearance of a more active site, especially for those frequenting the site. (Such as people researching me for positions/applications). I am working on getting more headshots in the near future, which I will implement on the site in a similar way.

At this point, interacting with each section did nothing. Obviously, it would make sense to click on the object and it will take you to the relevant page. I added an <a> to each section linking to a relevant page. It was at this point I realized that there is not really a good place on my website showing off my programming. Because of this I decided to make a programming page on the site to do just that. I will get more detail on that process below.

Since I added interactive elements to each section, I figured a highlight on hover effect would be something effective. I also decided to add rounded corners and to remove the blur on hover. I also added a rounded background to the section text. The effect is something I am really proud of.

Here you may notice some of the glitches that have popped up in the process of updating the website. The corners of each of the sections become unrounded for a moment after the hover ends before the rounding returns. I have done a ton of troubleshooting but I am not sure what the reason is. I figure it is a small enough visual glitch that it hopefully will not be noticed.

Another issue arises when the user hovers over the center text of each section disables the hover for the section. Thinking of how the CSS is laid out, I do not think it will be possible to fix the glitch with how I have the hover effect working. I will have to add and remove the class via js instead, so it continue to works while the mouse is over the whole image, including the text.

The Programming Page

As previously mentioned, a needed a place to write a little bit about my programming background. I did not have an existing page before this website update.

Something that was been ruminating in my mind of a while is to display my most recent commit on website using the GitHub API. I have been a GitHub fanatic as of late. A great way to keep track of my current projects, and to put them on display as I am working on them.

To be frank, I stole the idea from Ottomated, a twitch streamer and programming genius. On a stream where he was discussing ways to update his website, he showed off a latest commit section of his website. I thought it was genius and wanted to copy it for my own website.

Since I was already calling the API and reading through all my commits, I figured adding my total number of commits and total number of repositories will be easy to add. This will be a great way to show the total bulk of my programming work and show my programming skills on the programming page itself (more on this later).

An issue with this API call is that it takes forever for the commits to load. I am unsure if that is an issue with my code or with the API itself. The “loading…” text takes at least five seconds to load into the call. I am torn on the loading text itself. Would it be better if the text isn’t there, so users do not realize there is something missing. Or is the surprise of the appearing text poor website design? For now, it stays. I think in the future I will build a far more intricate page and I will hide the loading through fancy animation and page functions.

5 second load time

On that note, I do think the programming page needs a little more… pizazz. The auto-updating text is cool, but not super visually impressive. I want to WOW visitors of my site. I believe the way to do that will be to implement p5.js on the page. I do have some practice on building p5.js on squarespace. You can see a sample here. What should this design look like? A fancy background maybe? I will think about that later. With this p5.js implementation, however, I can accomplish hiding the API call.

Version Control Woes

If you are currently not a GitHub stan, you will be after trying to build a website using the Squarespce script block. There is no version control. Every time I want to save an edit of the script, I need to leave the script editor on squarespace and then click save. Additionally, scripts do not load on the editing page. To see the updates, I need to navigate to the page on the actual website. To make any updates, I need to do the reverse. With this in mind, there is no version control. So if I break a page on the site, there will be no way to roll back.

To solve this problem, I had to start copy and pasting big code milestones into VS code and making commits to my website-code repo. At the very least, this system will keep track and present the work I have done on the website so far. I keep separate HTML files for each page I have custom code so as I add pages I can easily add additional files.

Thoughts for the Future

I started my journey in js and website programming with p5.js. I originally intended to implement a lot more p5.js but CSS provides a lot of the functionality I was planning on building anyway. Still, p5.js can give me a nice visual element that my site could use.

Additionally, RNBO is something I should really get into. Allegedly, David and I have been tasked with building an updated version of PIE website. Our original proposal involved using RNBO to demonstrate max patches on the web. For this project, I am still allegedly still apart of, I have been developing a visual component for RNBO that emulates the look and feel of Max using p5.js. I actually made decent progress and a lot of objects are actually implemented fairly well. I have not built a connection between RNBO and p5.js yet, but if I recall correctly, I have the framework to do so ready to go.

Since I am unsure when that project is going to continue, I should use it on my website as a way to show off my max patches, and p5.js skills and as a sample for the PIE project (if that does in fact continue). Most of the RNBO work I have seen is either VSTs, using the default javascript example, or on hardware projects. I have not seen too much work in custom js, and additionally making it a Max-like interface will make Max people real happy.

I have too many project ideas. They just never stop and never finish anything I want to do.