Selected side projects

A collection of experiments, competitions entries, personal projects or simply having fun.

Vasarely in black & white

Digital version of a painting created by Victor Vasarely in 1957. The effect is created using a series of PHP for loops to create all the HTML divs. These are styled with an excessive amount of nth-child strings in CSS to target specific squares, and CSS transforms to change the shapes of them. This is the demo […]

View project

Victor Vasarely painting, 1957

Vasarely in colour

Digital version of a painting created by Victor Vasarely in 1963. It is too complex to do with just CSS. I needed a bunch of class names in the HTML for easier targeting via CSS. I figured out the patterns in the artwork first, convert these into PHP to create the required HTML with class […]

View project

Victor Vasarely painting, 1963

Typecast competition

The rules are easy, pick one of three quotes from past Build conferences and let your typography inspiration run wild using HTML, CSS and web fonts. This is my entry. The web fonts are by Typekit. Some of the fancy typesetting is helped along with lettering.js.

View project

Typecast competition entry for Build conference

Responsive Data Tables

HTML tables are a bit of a pain when it comes to responsive web design. A large table with lots of columns will look good on a wide screen, but on a small mobile screen they suck. This is the demo of the blog post about this. Responsive tabular data – tested in Chrome, Firefox, […]

View project

Demo of responsive data tables in IE9

Friday the 13th

As part of the 2012 New Adventures in Web Design conference I attended a workshop on Controlling Web Typography with Trent Walton. It was a half day full of tips and tricks you can use with type, HTML, CSS and jQuery. Best explained by giving an example: my attempt to re-create a movie title. The […]

View project

Friday the 13th movie still

How far to the top of the world?

The competition sets you the challenge to design and build a web application of which the total size is no more than 10Kb. This application uses geolocation to determine where in the world you are and then calculates the distance between you and Mount Everest. You might think that’s not a very useful thing to […]

View project

How far to the top of the world