Project:
I built this portfolio in Visual Studio Code using only developer tools such as Javascript, HTML5, and CSS3. I wanted a no-scroll single page website that represented me while still displaying my course work.
I knew I wanted to incorporate the grand Teton mountains, and also display a minimalistic animation on the home page.
After about 10-15 minutes of quick-sketching, I got to a point that felt complete. But it didn't take long to quickly realize that the location of the navigation bar threw off the design.
Adjustment:
Back to the drawing board. After another 5-10 minutes of quick-sketching out ideas for the menu bar, I was able to complete the feel and efficiency of the design with a triangular stacked shape on the home page.
Because it's not a scrolling website, the navigation at the bottom of the pyramid shape effectively showcased itself in the hierarchy right where it needed to be.
Final Look:
I was able to portray me, as well as my course projects in one webpage. When the home page opens, the image fades in slightly and the information opens up with an animation.
It's a quick and bold introduction of myself and my course, and then you are led to the navigational menu to investigate more about me, my course projects and weekly notes.
Mobile View:
The process of the mobile view was a simple quick sketch that tested out the variations of a hamburger menu or the same stacked elements.
Stacked Elements:
By changing the navigational menu from horizontal to vertical on the mobile view, I was able to still keep the same layout while also creating a more engaging menu for the user.
Final Look:
Here's a direct screenshot of the final mobile design.
