Welcome to the webfolio of Anthony Brooks,
front-end developer from London, England.

I was born in London, England on the 15/08/1984. At the moment I work at Fantasy League Ltd in Camden, London. I love Javascript, especially jQuery, CSS3, and HTML5. I wrote this page using all 3!

I am interested in all areas of art and design but have a special interest in logo design, typeography and minimalism.

I obtained A Level's in Art, Physics and Mathematics and an AS Level in Psychology at the Howard of Effingham 6th Form College, Surrey in 2002.

I obtained a BSc (Hons) degree in Games Computing (Software Engineering) at the University of Lincoln, Lincolnshire in 2006.

I like rock and indie music, and am currently learning to play the guitar! I enjoy watching and playing football and reading sci-fi books, especially Iain M. Banks.

I work mainly with Adobe Photoshop, Javascript, CSS, HTML, ASP.NET, PHP & MySql. I also have experience with Adobe Flash & 3D Studio Max.

In addition to working on the front end for Fantasy League's own brand games, I have worked on the front end for fantasy games for these (plus many more) clients:

• Sky Sports
• The Sun
• Absolute Radio
• Scrum.com
• Channel 4
• AOL
• Nationwide
• Orange
• Woolwich
• F&C Investments
• Barclays
• Texaco
• Abbey
• Liverpool FC
• Lloyds
• Chelsea FC
• Irish Times
• Match Mag
• Cancer Research UK
• J.P. Morgan

Sky Sports Fantasy Football - South Africa

With over 450,000 teams, this is one of the internet's most popular fantasy games. I designed the website around the Skysports.com World Cup mini-site, but had to take into account Fifa's strict guidelines regarding trademarks.

Absolute Radio - Baddiel & Skinner's Fantasy Cup

Absolute Radio employed Baddiel and Skinner to provide their site content during the World Cup, this game was part of the Baddiel and Skinner World Cup package of items.

Orange Fantasy League - World Cup

After I designed Orange's Premier League 09/10 Season game, they bought a game for the World Cup based along similar lines.

CSS3 Buttons

These buttons are almost entirely created using CSS3. There is one overlay png image (1kb) to give the gradient effect. The colour of the button can be changed with the background-color property.

Compatible with Firefox 3.5, Chrome, Safari and Opera, and degrades nicely for IE6+

.button	{ 
    background: #145B9D url(../alert-overlay-button.png) repeat-x; 
    display: inline-block; 
    padding: 5px 10px; 
    color: #fff; 
    text-decoration: none; 
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25); 
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25); 
    border-bottom: 1px solid rgba(0,0,0,0.25); 
    position: relative
}

.button	{ 
    *display:block 
}

.button:hover { 
    background-color:#0A3760; 
    color:#fff
}

.button:active { 
    top:1px
}

Tables with Javascript

By hovering over a table header cell, this script adds a hover class to each table body cell in that column, allowing us to highlight the current column. Once the user clicks on a table header cell, a 'sticky' class is added to each cell in the column.

// Add tr hover class for ie6+
$("table.general tbody tr").hover(function() {
    $(this).addClass("hover");
}, function() {
    $(this).removeClass("hover");
});

// Column Highlighting in 1 event + Sticky Clicking
$(".cols thead th").hover(function() {
    $(this).addClass("on");
    // Calculate Column Number
    $(".cols tbody tr td:nth-child(" + (this.cellIndex + 1) + ")").addClass("on");

}, function() {
    // Remove Highlighting
    $(".cols th, .cols td").removeClass("on");

}).click(function() {
    // Sticky Highlighting
    $(".cols thead th, .cols tbody tr td").removeClass("sticky");
    $(this).addClass("sticky");
    $(".cols tbody tr td:nth-child(" + (this.cellIndex + 1) + ")").addClass("sticky");

});

Forms with Javascript

To create stylish streamlined forms, place the label on top of the input box using position:absolute. The script then shows/hides the label based on if the textbox contains any text.

// Hide overlay on focus
$("input.text").focus(function() {
    $(this).prev().hide();
});

// Show overlay on blur
$("input.text").blur(function() {
    if ($(this).attr("value") == "") {
        $(this).prev().show();
    }
});

// Focus input on overlay click ;)
$("label.overlay").click(function() {
    $(this).next().focus();
});

Random Team Name Generator

I wrote this script as a little extra piece of functionality for the fantasy game team selection process. It takes a prefix OR a suffix, plus a location and adds them together to create a made up sports team name!

Email me - Updated: 20th June 2010

© antb.co.uk 2010