To validate the HTML5 markup of this site, please use the more complete validator at html5.validator.nu.

CSS Wizardry Portfolio


[Content]

Portfolio — A Selection of Works

Herein lies my most recent and notable body of works. A selection of projects completed either by myself, with someone else; for myself, or for someone else, you can find it here.

Whitley Golf

Screenshot of Whitley Golf

Details

After a sucessful site build for repeat client Joe Whitley, I was contacted by him again to design and build a Wordpress powered blog site for his latest venture.

I created all visuals and built the site, all images and content were client supplied. #

Message to Santa

Screenshot of Message to Santa

Details

Myself and the wonderfully talented Megan Smith decided to make a Christmas site this year, just because we could.

Message to Santa was coded and built by me, with Megan supplying illustration work. It is — as ever — fully accesssibile and built with semantic and valid makup and CSS. #

Details

CSS Wizardry Links, or simply “Links”, is a page of links to various friends and resources from around the web.

Links is made from validate and semantic Strict xHTML and uses various elements from Typogridphy to create a strong grid and typographical layout. #

Typogridphy

Screenshot of Typogridphy — A Typographical and Grid Layout CSS Framework From Harry Roberts of CSS Wizardry

Details

Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typographically pleasing grid layouts.

Crafted from validate and semantic Strict xHTML, Typogridphy has proved pretty popular, surpassing 5,000 downloads I soon lost count after that. #

Whitley Journalism

Screenshot of Whitley Journalism Rewriting the Web ™- Freelance Copywriting and Journalism Services in Yorkshire - Lexical Consulting, Copywriting, Journalism

Details

Whitley Journalism is one of the best projects I've done so far in terms of all round quality</modesty>.

The site is fully validate across both markup and CSS, and also conforms to pretty much all accessibility guidelines out there. These traits earned the site the title of ‘Editor's Pick’ on W3C Sites, a website showcasing the best in standards compliant web development.

I also completed an identity design project for Whitley Journalism. #

PHP Framework

Screenshot of part of my custom built PHP Framework

Details

A personal build of an OOP framework used to streamline site builds and make sitewide modifications easier. Not public released — as it is very specific to my own needs — the closest you’ll get to seeing it is the screenshot on left. That is this index.php file, the one you’re currently reading. #

PACC Tuning

Screenshot of PACC Tuning — Tuning Kits for Speedway, Motocross, Enduro, Supermoto

Details

I provided the semantic and validate code only for a holding page for PACC Tuning.

Update:It has since been brought to my atention that the PACC logo is a complete rip of Pace bikes. This is in no way related or linked to the work I completed for this project, all logos and designs were client supplied. However, because the code is original and clean, I will keep this item in my portfolio. #

Outdoor & Play

Screenshot of Outdoor and Play Case Studies

Details

Outdoor & Play wanted to publish their Case Studies online, but as there wasn't a lot to work with (i.e. just plain text) they wanted someone who could transform passage of text into a well presented document.

I used my new found love and knowledge of typography to give them something great. I was also responsible for copywriting. They were very pleased. #

GSA Consultants

Screenshot of GSA Consultants

Details

GSA Consultants were after a well designed and good looking corporate, standards compliant wesite. That's what they got.

Built using fully validate markup and CSS the GSA site is fully accessible.

I also completed an identity design project for GSA Consultants. #

PR Consulting

Screenshot of PR Consulting — Standards Compliant Web Development

Details

PR Consulting is a joint portfolio between myself and a friend. We offer solutions for both web, print and identity.

A largely experimental project, not as much time as desired could be offered to the venture. #

Captain Bratwurst

Screenshot of Captain Bratwurst // Stuff and Things - A Cult Waiting To Happen

Details

Captain Bratwurst is a ‘Male and College Humour’ website for local student and funny-man Luke Donlan.

Once again, built using fully validate markup and CSS, but this may not now the case due to the CMS. #

CSS Wizardry Netvibes Widget

Screenshot of the CSS Wizardry Netvibes Widget

Details

After making my iGoogle Gadget, I decided to try make a Netvibes Widget, which does exactly the same thing.

Why not add the widget to your page?

Update: This widget may not function fully now as I have dropped the CSS Wizardry blog. #

PR Design Labs

Screenshot of PR Design Labs - PR Design's Public Laboratory

Details

PR Design Labs is a public laboratory intended to showcase free scripts and snippets for other developers to steal use.

Naturally Labs is built using fully validate markup and CSS.

I also completed an identity design project for Labs. #

Exposure Self

Screenshot of Exposure Self — Portfolio of Ben Coletta

Details

Built entirely round client visuals, Exposure Self is the fully validate and accessible online home of Ben Coletta — London based photographer.

A redesign is underway.

Update: This site has been through many iterations, each designed by the client and coded by me. #

CSS Wizardry iGoogle Gadget

Screenshot of the CSS Wizardry iGoogle Gadget

Details

After having worked on an iGoogle Gadget at work I decided to make one for CSS Wizardry. It’s very basic, and just runs a search of the blog. Please feel free to add it to your page though.

Update: This widget may not function fully now as I have dropped the CSS Wizardry blog. #

[Sub Content]

From the Toybox

Twitter

Resources

Web Design+ — Tips and advice on web standards development Web Design+ is a freely available one-stop document for developers to get advice and tips on web standards development.

Typogridphy — A Typographical and Grid Layout CSS Framework Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.

Clecktionary — Cleckheaton’s Dictionary Clecktionary is a tongue in cheek homage to my hometown Cleckheaton. It can be enjoyed by anyone, but is better appreciated by a Cleck’ native.