Portfolio

Personal portfolio site

back

What exactly is it?

Well, it's my personal portfolio site. Its focus is showcasing my career trajectory, with the projects I've been a part of and my work experience being the most important. Really, it's a more interesting version of my resume.

Almost entirely hand built, the goal is to do the most with the least. Balancing minimal depenencies on libraries and frameworks with a low barrier for updating and adding on my end.

It's evolved over the years. Visually as well as technically. Here's the (Rough) visual timeline:

2010 to 2013 Original
2014 to 2016 Mid Life
2016 to present Current

How does it work?

Important aspects

Gulp task runner

Heavily driven by tasks so once the local is set up it's quick to develop and deploy. The notable aspects are the building of the public folder dependent on environment flag passed (defaults to --dev) which builds uncompressed, sourcemapped, browser-synced, watched files.

Mustache templates

Wanting a minimal dependency on frameworks, it just relies on a simple group of structural (and content) files. For anything repeatable or with potential for updates a lot of the content is isolated to json and xml files.

Sass

The CSS builds from .scss files organized into tiers of Variables > Elements > Sections > Components (with a Vendor folder thrown in there).

Notably, it's completely responsive, but also built mobile first, so that the base styles are for all viewports with only progressive structure/styles needed for larger viewports (cuts down on the need for overriding).

Other things of note

  • Sass Linting (sass-lint) with my own (opinionated) set of rules.
  • JavaScript Linting (eslint) for some basic standardization.
  • Browser-sync for auto-refresh on file change and various browser checking.
  • Imagemin for squeezing the last bit out of images on build.
  • Retina.js used to choose the proper image size client side.
  • Deploy script for a single command deploy (if SSH access set up of course).
  • little bit of php in portfolio.

What's the future?

Likes

  • Its my own thing
  • No frameworks, minimal library use
  • Simple update / deployment

Dislikes

  • Some rusty edges / learning still floating around
  • Writing is hard, some of the content could be better
  • Visual impact of projects could be stronger

Things to keep an eye on

  • Completely refactor portfolio function
  • Periodic visual refresh
  • Add new content

Interested in the Nitty Gritty? The current TODO list can be found here.