The Making of This Portfolio

I made the rookie mistake of jumping right into the coding of this project with no concrete preparation. I only had a vague idea in my mind of what I wanted to make, which led to a very simple site that only functioned on a desktop screen size. The design lacked direction and did not have many compelling elements to it, but it ultimately got me excited for the project. I felt I had a good start with this ideation. I set up the structure of the site and had all of the base elements that I would need in the future versions.

I ended up starting over from scratch. I sketched up some mockup designs that I thought had visual interest in them. I still wanted the designs simple enough that I felt confident I could code them in a reasonable amount of time. I was happy with the overall theme and color story I was able to put together – the green being representative of both my school color and my interest in environmental sustainability. However, it quickly became an issue that this ideation did not work well in a mobile format. Plus, the design felt clunky, unfinished, and really did not feel like me. Down to the projects I had chosen, this portfolio was not representative of me or my skills, but the layout and style was starting to come together.

I decided to restart the whole thing yet again. By this point, I had gained the knowledge to know that it is best to code for mobile first, with that being the majority client of web traffic today. I toned down the intensity of the last design by muting the color and rounding out many of the sharp visual elements. Aside from the visuals, the coding changed a lot here as well. I completely changed the way the navigation bar functioned, changing it to a hamburger menu that actually uses a CSS checkbox element to trigger the transition. This is the version you are viewing now!