Mark Clifton portfolio website

Source code for mark-clifton.com

Tools

• Middleman
• Sass
• Gulp
• Brackets
• Adobe Photoshop
• Adobe Illustrator
• Miro Video Converter
• kraken.io

npm dependencies

• gulp-concat
• gulp-inline-source
• gulp-attr-remover

Features

• Middleman static site framework.
• Layout customization using Middleman frontmatter variables.
• Separate Gulp tasks called both during and after build, using Middleman’s external_pipeline feature and after_build callback.
• CSS manipulation of inline SVG.
• Asynchronous loading of Typekit fonts reduces page render time (at the expense of a brief FOUC on some browsers).
• OpenType alternate character styles create typographical variety from a small number of web fonts.
• Aggressive image optimization, lazy loading, and inlining of dependencies yield Google PageSpeed scores in the 90s for all pages, even portfolio pages with several MB of image assets.

Note: Not all pages pass W3C HTML validation due to the markup required by the Lazy Load script. However, there are fallbacks to maintain image accessibility despite the lack of validation.