Coding Work
Generative Coding
Perpetual Rainbow
"Perpetual Rainbow" is a program created using p5.js the online version of the visual coding program "Processing", a JavaScript library. It is created by using a class of points that constantly move and are updated, between which multiple lines are drawn repetitively. These lines can be influence by sound or by user input, and will go on to create beautiful generative rainbows that will disappear but will return in a new shape, just as beautiful, vibrant, and unique as before.
*Please note that the voice activation does not work in the embed. Please view the original code on the p5.js website here
CodePen
I enjoy coding random things on CodePen! Here are a couple of my creations. Please visit my CodePen profile to view all my work.
Google Search dupe
A dupe of Google Search made for CS50 Web Programming's Project 0. View the full project walkthrough video here.
Volunteer Sign Up
A quick mock sign-up form created based of Daily UI's daily prompts.
Time Progress Tracker
A bar graph showing percentage of day/week/month progress, created as a widget for a Notion template.
Calculator
A basic calculator using HTML, CSS, and Javascript.
Website Coding
Networked Imagination Laboratory
I coded the new website for the Networked Imagination Laboratory at McMaster University from scratch. Working with the laboratory's director, I created a responsive website that advertized all aspects of the lab and was responsive as well as accessible. View the Networked Imagination Laboratory website here.
For the style of the website, the director of the Networked Imagination Laboratory wished for a colourful version of the 70s hacker theme.
To bring this theme a little closer to home I followed the style of the software that the NIL's Cybernetic Orchestra used. This software was quite basic, with
white boxes encompassing each person's code space and a green colour to the font. This style converted quite easily to a website, and brought in the main function
of the laboratory, to be a home for the Cybernetic Orchestra. Working with the client through sessions where we would meet for feedback, we ended up with this.
The director also wished for the website to be as accessible as possible, leading to the clean lines and fonts
used. The website code is appropriately tagged, and the images are either marked decorative or have the appropriate descriptive text.
The equipment page displays all equipment available in the Networked Imagination Laboratory. It includes both a visual layout, and a full list. The list is colour coded to match with the shapes in the visual layout, to simplify viewing. The visual layout uses Javascript to allow users to mouse over shapes in the SVG and view exactly what item is where. This has the added benefit of adding another method other than colour coding for visitors to connect shapes to objects. The visual layout is marked as decorative to allow screen readers to be directed to the list instead, to avoid unnecessary information.
The Orchestra page of the website is meant to display the NIL's Cybernetic Orchestra's previous work. It includes embeds of video and audio of their album, as well as a diary of their past performances, with links where they exist. The embeds allow visitors to view the work in page, preventing the added work of opening other sites and keeping the visitor engaged, rather than sending them away. Again, the page was styled after the program used by the Cybernetic Orchestra, with the album being in a box similar to how each orchestra member would have their designated box.
Portfolio Website
This website was coded by myself using HTML, CSS, and JavaScript, and is hosted on GitHub Pages! To view the source code please click here.
Futher Website Design
I have designed multiple websites that were not converted to code, but rather created in Figma. To view these websites please visit the Design Page.
WordPress
I have designed a basic WordPress portfolio website to demonstrate proficiency. Unfortunately, the WordPress free plan is very limited in what it allows users to create. This page shows my ability to work with WordPress's interface, and if given a higher plan I would be able to create a high quality website.