Documentation: Portfolio

Description

For my portfolio, I wanted to emphasize my minimalist, yet creative approach to art. As such, I drew inspiration from the Western Style “Wanted” posters. My page, thus, provides an image of the suspect, along with details and additional interactive elements that I will elaborate upon below.

Interactivity

When scrolling down the website, the user encounters a map, that suggests the “Potential Locations” of the suspect. These locations not only align with the overall theme of the poster, but are also correlated with the previous projects I have completed in this class. Each location unveils a preview of the projects when the dots are hovered over. The user might notice that there is a progress bar at the very bottom of the page. As each link is clicked, the progress bar gradually fills. And when all of the links are explored, the progress bar becomes complete, conveying the idea that the user “found” the suspect. Not only did this element allow me to creatively engage with the idea of a “Wanted” poster, but it also allowed me to convey a better sense of my art - and, thus, of me.

Process

I first began by coding the overall layout of the website and adding the details onto the page. This was followed by the most challenging aspect of the process, which was creating the map elements. Through the code, one can see that I have decided to omit the “map” section in the HTML, and have rather chosen to create it through JavaScript. When the page is loaded, the script creates a certain number of dots in accordance with the number of projects. This feature will also allow me to use the Portfolio in the future and populate it with my future projects as I can simply add more dots or “locations” to the website. I, then, implemented the preview option, which allows the user to see the dynamic layout of each website without even clicking on it. Finally, I created various functions to update the progress bar, create the animations between the lines, and adjust the preview positions to ensure that they do not exceed the confines of the map box.

Future Improvements

Overall, I believe I was able to create a portfolio that not only matches my initial wireframe but also allows the user to gain a better sense of my artistry, which relies heavily on adopting and subverting various tropes, in this case being the “Wanted” poster. However, in the future, I would like to make the website more dynamic, including the creation of a creative loading page and generating a more 3D look for the website.