Visual Design / UI / UX



Built with HAML and Sass, mixed with Bourbon and Neat

  • Role: Visual Design / UI / UX

Using a templated, content management website builder is great to use for quick site setups, but it doesn't allow you to customize or represent coding skills. The WYSIWYG format can deter and often handicap your role as a designer.

Over the past few months, I spent time honing my skills in the development track by taking refresher courses with Code School and Treehouse with an emphasis in Ruby on Rails and version control. I decided to recreate my portfolio as a static site, a Middleman portfolio built using Rails, Bourbon, Neat, Sass, Haml, and following the BEM syntax. The site is a work in progress and I plan to continue making improvements as I experiment and learn new techniques.

Knowing the amount content I wanted to feature, I began sketching out the grids and functionality of each page. How would the projects be laid out? Where would the navigation go? Making mentions of whether the navigator was fixed or the photo was set in a container made it easier to communicate this into Sketch. The idea of showcasing the project with an emphasis on the role would enable a viewer to see the range of skillsets.


I transferred my sketches into Sketch to prototype the flow and how the layout would appear in different screen scales. This is one of the many advantages of building a custom site versus a blogging platform.

portfolio screens

Middleman's ease of use made the project beneficial with rapid prototyping and streamlining the development process. I had years of HTML/CSS experience under my belt, but I needed to push my skills further by working in Haml and Sass to keep up with industry trends. Another perk of creating my site was the open-source feature. Designers and developers could check out the code on GitHub.

Using Atom
portfolio GitHub

Key takeaways were creating markup in one place without the hassle of going into other pages to update the nav and footer. Yay for components and adding partials to compartmentalize code! So, where would I like to take this next?

Let's work together.

New projects, ideas, or if you’d like to collaborate…