Portfolio 2.0

Back in November, my portfolio site crashed. However, losing my portfolio was the best thing that could have happened because it effectively forced me to stop putting off a redesign. Starting from scratch, what I wound up with was a massive design and development overhaul. Here’s how it went down:

The Goals

**Design**

When I started planning my new site, I knew I did not want to incorporate majority of the current design trends, including big banners, large sans-serif typefaces, and single-page sites. I wanted my site to be more evergreen since web design trends live and die very quickly.

Development

For the development, I decided to keep functionality minimal so as to keep the focus on content. In my previous portfolio design, I had tried to stuff in as many features as possible (“look at what I know how to do!”) to overwhelming and slightly dysfunctional results. This time around, I wanted to keep things simple.

The Result

Design

Avoiding the design trends mentioned above left me staring at a blank canvas and lacking inspiration. Scanning through sites like Awwward and CSS Awards, dissecting what made the winning sites work and not work at a detailed level ultimately gave me a place to start and aided me in the design process.

And what a process it was.

After mocking up three complete designs, I hit a snag. Once I began development, I quickly realized that the design too closely matched that of my previously designed sites: similar colors, layout, and font choices. I had pigeonholed myself without ever noticing it, until now.

I knew something had to change–the design was just not “me”; but also knew that starting from scratch was not an option. If I restarted, I would likely replicate the same style yet again. Instead, I started to pivot my focus to the color palette (less contrast and saturation) and how I wanted to display my content. I experimented with lower saturations, less black and white, and a total reevaluation of the content focus. This exploration led me to my current theme, which is built to help narrate the process that went into each portfolio piece rather than simply showcase the final result.

Development

I aimed to keep the build of this theme simple, due to the complications in my previous portfolio designs. As someone who both designs and develops, finding a balance of showcasing each of these skills can be difficult. I cut out flashy animations decided to show my developer skills in a different way. I avoided JavaScript dependencies as much as possible with this build, including jQuery, with the exception of those that WordPress plugins may use. I focused on simple effects that enhance usability, such as the hover effect in the sidebar and a sticky navigation on scroll with mobile.

The Conclusion

I’ve realized through this redesign that, while a portfolio site is your work, its larger purpose is to showcase your work. Your portfolio should not distract from your work, but rather emphasize it. I’ve cut back on the amount of content I display, focusing on my best and most recent pieces. I’ve traded in flashy design choices for a simpler, more usable approach. In the end, the final goal was to design and build a portfolio site that represents me as a developer and designer. I feel safe in saying I’ve accomplished that goal.