Jump to Navigation

Portfolio

CSS3 Button Generator

CSSDrive Screenshot

With the increasing importance of the new features of CSS3 on websites I was tasked to create a tool to help show off some of the new features. This tool was to be a client side CSS3 only button generator written entirely in JavaScript.

This project required a deep knowledge of how the relevant CSS properties worked across browsers as well as how to apply them using jQuery. A key challenge here was how to show a good example of the more complex features, like transitions, while maintaining an easy to use interface for users who may not know anything about the new features and how to code them.

While CSS3 offers a lot of new features, aside from the complexity of the options available to just transitions, I needed to pick a selection of CSS tags to expose to the user.

Syncopant

Syncopant.co.uk Screenshot

This is a site I fully designed and created, in conjunction with the client, for a freelance sound engineer.

It uses a smooth sliding menu system to access each section of the single page site. This one page incorporates a slideshow using a fade effect, an AJAX contact form, an embedded video and a google calendar.

The page also uses a rudimentary CMS system. Essentially an online file manager to allow the client to upload and edit files in place. This allows the client to change the content, including the images in the slide show, without having to get back to me.

I also manage the hosting and email for this domain.

Windpole Turbine Map

Windpole's map live on the web

The initial brief for this project was for a fairly typical map, displaying the assets of this company. In this case wind turbines in North America. The biggest hurdle was that they wanted to display 12,000 points on the map and allow them to be searchable.

To aid in the creation of the UI I used prototype and the script.aculo.us JavaScript libraries. The back end code was written in PHP using the CakePHP MVC framework. Since the biggest problem to tackle here was the number of map markers I also employed a server side clustering technique. Using CakePHP I create a clustering algorithm which gives a JSON feed to a custom written client side library based on an AJAX call containing the current map bounds and zoom level. I thought it worked quite well in the end.

Packaging Calculator

Packaging Calculator

Initially this site was a simple proof of concept which provided some specific calculations to the packaging industry.

The brief was to make it as responsive as possible, which meant client side JavaScript for the calculations, but there was also a requirement to protect some proprietary calculations. What I came up with was a library that could use client side JavaScript, or an AJAX call to server side calculations, which both returned the result in a consistent manner, allowing JavaScript to update the interface consistently.

Penguonia

Penguonia

A friend of mine draws a comic which is about what can best be described as medieval penguins.

He asked me how difficult it would be to create a website so I put together this Drupal based site with a clean and simple custom theme.

Initially this was a straight forward script for publishing online comics, but as the needs of the client increased I had to move to something more substantial and Drupal, as usual, fit the bill. I still maintain and host the site as before.

Snowboarding Forum

DarkSnow Forum Screenshot

Due to my keen interest in snowboarding and, at the time, a lack of people to go with, I joined a snowboarding forum. That forum was a big success and was eventually sold off to a company that wanted to use the success of that site to make money, the result was a site riddled with intrusive advertising.

One day somebody asked if anyone could create a new forum. I said I could and in reply I got a link to phpbb. Almost as a joke, in about an hour, I created a new forum, just to show the new owners how easy it would be, and in just a few days around two hundred people joined.