My Office

This is a location-based narrative about the structure of my office. It should hopefully shed some light on the habits of a computer scientist and the organized chaos that involves this type of lifestyle.

Jensen
Mathew
Maxwell
image/svg+xml

Instructions

Please click on parts of the image to reveal information!

Technical Explanation

This project was achieved using object mapping of Scalable Vector Graphics (SVG files). I had to manually define each of the regions within the picture and then apply mouseover and mouseexit functions for the overlay (as well as the transparent highlighting). Lastly, I tied all click events to event listeners and have a JavaScript function to rewrite the card title and blurb. I then tied the avatar icons to click events in the same fashion. Also, note how the entire page is responsive! (Try changing the screen size)

Reflection

After our class feedback, I was shocked to see how everyone was instantly able to tell a lot about my personality just by viewing the narrative. I decided to help improve that vision by adding in the viewpoints of my son and fiancee. It's incredible to see how a location can be interpretted in so many different ways!