I've been wanting to do this for quite some time now. Here it is and here are a few words about the great tools I've used to make it happen.

We're using Bootstrap as a HTML, CSS and JavaScript framework for avid.com, so I opted for the same with my own site. Not only is it a great framework to build on (the documentation is particularly clear; littered with useful examples and well presented), but it also removed my temptation to write completely from scratch: I've found that I often get bogged down in the technicalities and niggling issues (that's a job for proper developers), and I never get to the stage where I a) write any content, or b) actually have a website. Now that I've put my mind to it, it's taken me a matter of hours to throw something together that looks (in my humble opinion) good, and that's down to the hard work of the Bootstrap development team. You can follow the developers on Twitter, @mdo and @fat or the Bootstrap development @twbootstrap.

Fonts

I've always been frustrated by the way standard fonts tend to look on a web browser, so I was delighted when I found Adobe TypeKit. Their interface allows you to sample countless fonts, and then assemble them into a custom CSS file which is then loaded on this page. The fonts themselves are cleverly encoded directly into the CSS file like this:

@font-face {
                    font-family: "ff-enzo-web";
                    src: url(data:font/opentype;base64,d09 <font data here>…);
                    font-style: italic;
                    font-weight: 700;
                }

I'm just using the trial library at the moment, which allows me up to two fonts for a single site. That's good enough for me at the moment. It also places the small TypeKit banner at the bottom left of each page; clicking on this allows you to see the fonts I've used.

Icons, images and colours

Pictos provide a similar system for the icons that I've used (for social networking amongst other things). Instead of using bitmaps, the icons are provided via custom font, so they're all vector images and resizing is wonderfully easy (in fact, the ability to apply CSS to the icons has proved a real time-saver).

For image editing, I used Pixelmator. I found out it's developed in the UK too, in my own city of London. Very proud.

Finally, I'm using Kuler for colour scheme. I've created a theme based on the header image at the top of this page.

Development and content

Sublime Text 2 has been my editor of choice. I'm still getting to grips with the power and speed of it. It also runs on both Windows and Mac (and more), which is great for me since I regularly work with both (don't get me started on any Mac vs. PC argument). I used Git for SCM, in conjunction with BitBucket. For writing the content (including this very piece of text), I've written everything in Markdown.

humans.txt

Finally, I really like the idea of humans.txt; all of the information above regarding the creation of this site is included within it. If you fancy it, you can read the humans.txt file for this site here.