Portfolio Website

FRONT-END / VISUAL DESIGN / UX

About the project

As my skills develop I find I am never satisfied with my previous work. Last year's portfolio website had stylesheets that were a mess, html that was difficult to read and the site completely fell apart on mobile. I set out this year to create a responsive website that had a clear separation of concerns and was composed of reusable modules.

Designing a Modular System

Using Sketch3 I laid out my pages and determined what building blocks were essential to a create a complete project page. I then designed each of these modules so that they would look great no matter which modules were placed next to each other.

Technology Stack

The next step was deciding what web technologies would be appropriate to help me achieve my goals

Bootstrap

Knowing that I wanted to build a responsive website I chose to use Bootstrap as a CSS framework. It was a good starting point but I ended up not needing most of it’s features

SASS

SASS allowed me to keep my styles nice and tidy throughout the process.

GIT

Great for version control

Assemble

A static site generator that allowed me to create reusable modules and led the path to a clear seperation of concerns. I kept my data in json files, structure in handlebars files, and reusable components in partials.

Grunt

For task management. Allowed me to compile my sass, assemble static pages and concat/minify my scripts with a simple command.

Jquery

Great for programming more complex interactions in a short period of time. Eventually I'd like everything to be pure javascript.

NPM

For package control

Travis CI

A continuos integration service that syncs with github. It detects when I’ve made a commit to the production branch and then builds and deploys to amazon s3.

QA Testing

I used Google's Developer Tools to figure out what parts of the site were impacting performance the most.

More to come about site optimization!