Reactive User Interfaces Final Documentation: Games Portfolio

Live Site: http://marinet.net

Github Repo: https://github.com/themaskedtaquito/themaskedtaquito.github.io/tree/master/portfolio

In general, I wanted to use this project, one that I will present to the world beyond the NYUSH community, to think harder about design than I have in the past, as it has always been one of my weaknesses. The two aspects that I focused in on were the presentation of information in relation to my target audience and the text styling and color. After doing research in online game development communities, I came to the conclusion that my number one goal should be to get the information that employers want to see in front of them as quickly and cleanly as possible. I believe this comes through best on the individual project page. The specs column clearly lays out an overview of the production, including what technologies I’m capable of using and my place within a team.

Additionally, I originally planned to only have my projects under the Games and Multimedia sections and the Home page reserved for my bio. However, I realized that would require extra clicks before my audience would actually be able to see my work and decided

My color choice was mostly inspired by trying to make the website more personal to me. While sleek black, grey, and blue designs look really nice, I think that green is a fun color that also pairs well with the colorful nature of my projects. On the pages themselves, I used the green mainly to differentiate titles vs details. Although I don’t know too much about different typefaces, I also tried to use sans-serif for the titles and serif for body text to further delineate and group information. I think that I’ve also improved upon lining up the margins of different divs, but I still need to work on how I limit and organize the white space on my site.

Another component to my project that I would like to mention is the process of getting my portfolio onto the web.

This was entirely new to me and I went through tons of tutorials on how to use A records, installing Node and other tech to my VPS, and setting up Nginx and config files. The only part of deploying a website that I was familiar with already was using Cyberduck to get the files from my computer to the server. It took me a few days to finally get everything set up, but it felt amazing once my website was actually online! Now that I know everything involved in deploying a website, I feel much more prepared for any web based project I do in the future. In fact, I would rank this knowledge as the most valuable thing I’ve learned during this course besides React itself.

Credits:

Image slider component: https://www.npmjs.com/package/react-responsive-carousel

Virtual Private Server: Digital Ocean

Leave a Reply