Portfolio

HTML | SCSS | jQuery | PHP | Git | Adobe AI, PS, XD

This is me | My portfolio is meant to showcase work, so I wanted it to be simple and quick to use to not waste anyone’s time. I focused on this by making sure everything was optimized. The design is simple and clean to make it easy to view information efficiently. Also, I care about inclusive design so I wanted to ensure it was easy to view and use for all users by being mindful of users of screen readers and keyboard only.

View Live internal link to my portfolio home page
Portfolio project page header

Planning

I started by getting an idea of what the content would be and made some rough wireframes to lay it all out. I was pretty set on a simple layout framed by a thick border with an image gallery of my projects.

Mobile Process

After learning how to approach a website desktop down, I wanted to make sure I also went mobile first. Below are my design iterations, I like to start with visual mockups. This usually helps me work out some of the design bugs as I typically do more than one. Because this is my portfolio, I did more than usual which ended up being roughly 5 variations. I started in Illustrator but discovered Adobe XD during this process, which was much more efficient.

Mobile view of portfolio front page version 1 Mobile view of portfolio front page version 2 Mobile view of portfolio front page version 3 Mobile view of portfolio front page current version

Continued Process

I went from having a gallery on the front page to a single page website to the current state. I had a much darker, higher contrast theme but switched to something simple and light to focus on the work.

Tablet view of portfolio front page version 3 Tablet view of portfolio front page version 4 Tablet view of portfolio landing page

Navigation

Initially set on an overlay navigation because I like the aesthetics of it. However, as I used my own website I found it a bit irritating to have a full screen navigation take over the entire screen. I then did some UX research and thought that having an accessible navigation on the bottom so it is easily reached and that hides on scroll to save screen real estate would make for the best UX in this case.

View Code external link to portfolio project on github
Previous Project Next Project