Beyond the Door

Studio

Interaction

Beyond the Door

Beyond the Door is an explorative interactive website using HTML, CSS, and Javascript.

Typography
Cart 345 — Fall 2016

Visit the website here

Let's Bounce

Let's Bounce

Let’s Bounce is a 2D-platform game made using Processing and Illustrator.

Creative Computation
Cart 253 — Fall 2016

Click here to visit the site

Photography Archive (Final Project)

Photography Archive (Final Project)

A personal photography archive site made using HTML & CSS.

Creative Computing & Network Cultures
Cart 211 — Fall 2016

Click here to visit the site

Montreal Explained App

Montreal Explained App

Link to final app (mobile only)

Cart 351 — Fall 2017

Data Visualization

Data Visualization

Click here to view the website

I decided to take a silly approach in this project. Listening to the popular 2005 hit “Remember the Name” by Fort Minor, a song that later became a meme and whose lyrics have now lost all serious meaning, I sorted its opening lines into an arrangement of dark, minimalist, and moody looking graphs. I made three separate conceptually contrasting visualizations of this data that can be viewed on rotation upon clicking an icon in the top left corner. In the first two graphs, hovering over a specific instance of data highlights all of the pertaining information. In the third data visualization, a square shrinks and grows upon hovering over a line of data.
This is the first project I completed using Javascript, and was a learning experience. Each HTML page consists of its own unique CSS and JS page. The HTML holds placeholder information and the general structure of the webpage. The CSS simply handles the colours of the content, and some of the opening and selection transitions. The information and its quantities are all written in Javascript as variables. The size of the bars and positions of the lines and text are all relative to the size of the graphs, by calculating the width or height of the chart / 100, and then * the percent of the information. When the user hovers over text, the lines and bars are highlighted as well, using a for loop and arrays.

Cart 351 — Fall 2017