This site is designed and built from scratch by myself. I started off with my personal boilerplate, “hotplate,” as a foundation. hotplate is a basic boilerplate which serves as a base for most of my projects. It’s highly specific to my workflow and way of doing things, and mainly exists to take most of the time out of setting up new projects.
I use LESS, a dynamic stylesheet language, to extend CSS with dynamic behavior such as variables, mixins, operations and functions. I also make use of Grunt.js to take care of, and automate, several things.
Some of the code is based on existing projects, such as HTML5 Boilerplate and Normalize.css, which are then customized to suite my needs and preferences. I also use a customized .htaccess file based on HTML5 Boilerplate’s.
The site uses my “modernized.js” script, which is a compilation of various scripts used to polyfill and enable modern techniques, including Modernizr, Respond.js, and Picturefill. These are all concatenated by Grunt into one minified script for production. Grunt also takes all of my LESS development files and concatenates them into one minified CSS file.
With a portfolio site like this, which consists of many large images, optimizing how they load is as important as ever. I run all images through ImageOptim, and use Lazy Load to load images as they’re needed. Additionally, I’m making use of SVG vector graphics for icons and certain graphics throughout the site. I use Grunticon through Grunt to generate multiple formats (SVG data URLs, PNG data URLs, and fallback PNGs) for cross-browser compatibility. This is optimal, as vector graphics will scale and look crisp on all devices, including hi-dpi devices, such as Apple products with “Retina” displays. This cuts down on prepping multiple images for normal and hi-dpi support as well as resulting in less image files to be loaded.
Lastly, the site is powered by Kirby, an amazing file-based CMS. With Kirby, no database is used, simply files and folders. There’s no bloat and unnecessary features, only what you need. The more I use it, the more I can’t get over how great of a CMS it is, and how powerful it can be.