My Life as A Collegiate Athlete
One of my favorite assignments. An interactive image piece constructed completely out of HTML5 and CSS3 with also the incorporation of gifs. The assignment required us to have 20 something photos embedded somewhere inside the project. I’ve never been a fan of clutter so making sure that there wasn’t too much going on was high on my priority list. However, I liked the idea of a lot going on, but ultimately, there had to be some kind of organizational element in play. The idea of displaying Human Emotions seemed like an easy way to accomplish this.
TOP LANGUAGES USED
Car Radio | CSS3 Text Poem
This project was very CSS driven. Acting as another test exercise, this one had us practice pseudo elements and combinators to target other css elements. We were assigned to create an interactive text poem to practice this. I went with the hook to the song “Car Radio” by Twenty One Pilots. Each line has some form of interactivity. Most of them play off of what the lyrics are saying. Hover in the middle for the chorus!
Our teacher kinda had a thing for mandala artwork. This was one of the last ones we did that had to be completely constructed by text. I was really into the movie Donnie Darko at the time and decided to use its staple time warning as the basis of this design. The code was pretty similar to the other mandala works: a bunch of for loops calling a string, and sometimes an array, of text and rotating it a couple degrees every iteration. The i variable (or the number that determines the amount of iterations) was based off of each number in the overall date sequence. There are 28 ’28 Days’, 6 ‘6 Hours’, etc. Additionally like the other mandalas, this one continues the practice of implementing interactivity into the canvas. Not much, but if you hover your mouse upon the x and y axis, you can move the diameter on which the for loops are rotating the text on. Basically, you set the x and y positions as a variable.
Text Breakup (Interactive Live breakup chat)
Another interactive project working with HTML5 and CSS3. The assignment required us to pair 10 images with text. My friend who was taking this class with me, had recently told me about her ex boyfriend’s breakup over text and I was needless to say inspired by it. It’s absolutely not verbatim. The story that is ultimately constructed is cut most from basic breakup cliches, but this was really only the catlyst for the assignment. Our teacher, Santiago Echeverry (an excellent professor at his craft) had us study a lot to do with UI/UX. “THE USER’S EXPERIENCE IS EVERYTHING!!!” he would yell. And he was right! He got me interested in the subject as well and that overall experience aspect was definitely on my mind when designing this project. When viewing the piece alone on a page, the user could watch the text break up play in live action as it was happening. Additionally, all the text blurbs are somewhat interactive (part of the assignment)