Hello! It's nice to meet you. Welcome to my little corner of the web.

My name is Melissa Jane Magee and I'm a web designer and front-end developer. (I build awesome web sites.)

My favourite hobby (which, luckily enough, also happens to be my job) is to design and build web sites which look beautiful and perform beautifully. I specialise in building semantic, valid and accessible web sites to the W3C standard and I take a lot of pride in my work, creating sites which don't just look good but which work well too. I hand-code all my work to ensure my sites have strong, clean mark-up, and I work hard to make sure my sites are compatible with all major browsers, structuring them to degrade elegantly without technologies such as CSS and JavaScript.

Check out my portfolio to see some of my work, or find out more about me in the (appropriately named) 'about me' section below.

Looking for the design that was featured on InstantShift and OnePageLove.com? Click here to see the previous layout of my portfolio. (Go on! I dare you!)

Portfolio

Lloyds TSB Offshore
Forth
  • Front-end development
  • Building templates and tools (mortgage calculators, saver tools, contact forms) in ASP C#
  • Cross-browser testing
  • Design work including banners

E-scape Interactive have been doing design, development, and analytical work for Lloyds TSB Offshore since 2004 and, in 2009, we were asked to completely redesign the web site with a more attractive, modern look. As head of front-end development, it was my responsibility to build and browser-test valid, accessible HTML and CSS templates, JavaScript using the jQuery framework to add a better, elegantly degrading user interface to the site, and then build ASP.net C# templates for the content management system. We have since gone on to do much more on the Lloyds TSB web site, branching into more interactive projects such as mortgage and budget calculators and online forms.

www.lloydstsb-offshore.com
Work done with E-scape Interactive; from August 2006
Aviation Beauport
Back Forth
  • Visual design
  • Front-end development
  • Cross-browser testing

Aviation Beauport was a pleasure to design and work on. The client, a private air charter company based in the Channel Islands, wanted a site with a sophisticated, high-end feel to it. Along with the visual design, I did the front-end development for the site before passing everything over to the back-end team to move it into the SilverStripe content management system.

www.aviationbeauport.com
Work done with E-scape Interactive; December 2009
Bruno's Bakery
Back Forth
  • Visual design
  • Front-end development
  • Cross-browser testing

I really enjoyed working on Bruno's Bakery — although looking at gorgeous cakes all day is hungry work! I designed the web site (all except the illustrations on the site which were done by my very talented, and very best, friend L. Whyte), and built and tested the HTML templates and CSS for it.

www.brunosbakery.je
Work done with E-scape Interactive; October 2009
E-scape Interactive concept design
Back Forth
  • Visual design

This is a concept I came up with for a redesign of the E-scape Interactive web site which incorporated elements and themes from a promotional video we had made, as well as the video itself in a prominent spot on the homepage.

Concept art
Work done with E-scape Interactive; January 2010
Le Gallais Group
Back Forth
  • Visual design
  • Front-end development
  • Cross-browser testing

Based on visuals designed by Jon Leverrier for the Le Gallais Self Storage site, I designed and built the HTML and CSS for the Le Gallais Group site, keeping it consistent and in-theme with the rest.

www.legallais.co.uk
Work done with E-scape Interactive; March 2010
Reed Insurance
Back Forth
  • Front-end development
  • Cross-browser testing
  • Back-end development in ModX

I was given Jon Leverrier's quirky and colourful designs to make into valid and accessible CSS-based HTML templates which I took through the entire development process, moving the templates into ModX and building custom PHP forms and features such as the insurance quote enquiry forms. I also built a lot of custom code for the back-end of the site to make it as easy as possible for the client to change around large sections of the web site without needing to know how to code first.

www.reed-insurance.com
Work done with E-scape Interactive; March 2008
Voodoo Beans
Back Forth
  • Front-end development
  • Cross-browser testing

Voodoo Beans is the (frankly incredible) portfolio of my best friend L. Whyte. She designed the layout herself, injecting her unique sense of humour into every pixel (particularly the pixels making up the monocle on the Monoctopus, I think). I used a lot of jQuery on her site to create fade-in effects over the link hovers and smooth scrolling anchor links to move up and down the long single page. (Viva la smooth scroll!) I also built some custom JavaScript to pull through external code from the individual gallery pages and embed it into the main page, to create the pop up windows on the gallery.

www.voodoobeans.org
Freelance; February 2009
Go-Sail.je concept design
Back Forth
  • Visual design
  • Front-end development
  • Cross-browser testing

This is the final chosen design for Go-Sail.je, a web site where members can sign on and reserve dates to rent out a luxury yacht. The site is being built at the moment and a version of this design is up on the holding page at Go-Sail.je. I am especially proud of the repeating header image at the top of the page, designed to repeat across any screen resolution.

Concept art (www.go-sail.je)
Work done with E-scape Interactive; April 2010
CSS Zen Garden
Back Forth
  • Visual design
  • Building CSS
  • Cross-browser testing

Last year, I submitted this design to the CSS Zen Garden, an institutional web design project which shows what can be achieved through pure CSS by asking developers to create different styling for the same piece of source code, not allowing them to make any changes to it. The project no longer seems to be updated but I thought it was a brilliant excercise and I really enjoyed the challenge of creating and building a working design reliant on someone else's work style and unchangeable code.

Click here to see the template design
Freelance; March 2009
Mange Tout
Back Forth
  • Visual design
  • Front-end development
  • Cross-browser testing
  • Back-end development in ModX

Mange Tout is a chain of (wonderful!) coffee and sandwich shops based in Jersey in the Channel Islands and, as one of their biggest fans, I especially loved working on this project which I took from the design stage all the way through production and development. I decided to build Mange Tout in ModX, using a lot of custom PHP for the weekly 'Soup Letter' and the easy-to-amend menus. I also utilized JavaScript (using the jQuery library to keep file size down) to add a more interactive dynamic to the site.

www.mangetout.je
Freelance; October 2008
MJMagee.com
Back Forth
  • Visual design
  • Front-end development
  • Cross-browser testing

I've had some lovely comments about this design over the years, even getting a position on an InstantShift article spotlighting fresh portfolio designs. The idea behind the design was to hint at a fairy tale world like Wonderland using stock images which I cut out and manipulated to make them seem a little other-worldly, like the Cheshire Cat with the disproportinately large head.

Click here to see my previous portfolio design
Freelance; August 2008
Spike Productions
Back Forth
  • Front-end development
  • Cross-browser testing
  • Back-end development in Textpattern

Spike Productions was a very interesting challenge! I was given Jon Leverrier's (gorgeous) design to take all the way through production and development, moving it from a visual to a fully-functional web site. Production on a web site typically includes cutting up visual designs and optimising the images for use online, building valid, accessible, and search engine friendly code which degrades elegantly, and ensuring the code works across all major browsers and screen resolutions. Jon's unusual design on this project meant that Step One on this took a lot of trial and error! I'm happy with the end result, though. (And thankfully so is Spike Productions!)

www.spikeproductions.co.uk
Work done with E-scape Interactive; March 2007
SpikeCast
Back Forth
  • Front-end development
  • Cross-browser testing

I originally designed and built a series of simple HTML pages for Spike Production's clients, called SpikeCasts, which could be customised in terms of style and content; when Spike decided they wanted to take SpikeCast to another level, we at E-scape Interactive came up with the site that stands today. It's split into two sections, the main YouTube-inspired user-driven web site, and a corporate site for Spike's own paying customers. I was in charge of production for the project, building the HTML, CSS, and JavaScript, and performing browser and usability testing across the site.

www.spikecast.co.uk
Work done with E-scape Interactive; October 2007
Play The Lottery Now
Back Forth
  • Visual design
  • Front-end development
  • Cross-browser testing

Play the Lottery Now is a one-page site I designed and built to promote the E-Lottery Syndicate. I wanted to keep the design quite simple so it wouldn't distract from all the E-Lottery information the site has to get across, but I decided to add some subtle animation effects to the header and the link arrows, to keep the design interesting.

www.playthelotterynow.com
Freelance; January 2009
E-scape Interactive
Back Forth
  • Front-end development
  • Cross-browser testing

We decided to spruce up the E-scape Interactive web site in 2008, giving it a fresh design and moving it into new CSS-based HTML templates. I built and browser-tested the HTML and CSS, and used the jQuery framework to create accordian menus and some fun fade-in effects for the navigational tabs to add a little something extra to the design.

www.e-scapeinteractive.co.uk
Work done with E-scape Interactive; October 2008
Blooming Direct blog
Back Forth
  • Front-end development
  • Cross-browser testing
  • Back-end development in Textpattern

I set up the Blooming Direct blog in Textpattern, based on work the (genius) designer Jon Leverrier did on the main Blooming Direct site. Although different content appears on different pages, I managed to set up everything in only one template rather than cluttering and confusing things.

blog.bloomingdirect.com
Work done with E-scape Interactive; March 2007
Bob's Motorcycle Centre
Back
  • Visual design
  • Front-end development
  • Cross-browser testing
  • Back-end development in ModX

Bob's Motorcycles was a particularly fun project for me to work on as I took the site from the design stage all the way through production and development. I created simple, clean designs to showcase the bikes and bike accessories on offer, built HTML and CSS templates, then built the functionality of the site in ModX, a PHP-based content management system.

www.bobsmotorcycles.co.uk
Work done with E-scape Interactive; August 2008

About me

I have worked in the web design industry professionally for around six years, including four years with E-scape Interactive who I joined in 2006 as a Junior Designer and Developer. In a few short years, I moved up to my current position as Production Manager, in charge of front-end development and design. But before it was my job, web design was my hobby and, all in all, I've been coding and designing for over twelve years, from the moment I discovered the internet!

I am...

  • twenty-four
  • a very fast learner
  • great at working in a team
  • tremendously polite
  • an avid reader
  • a bit of a nerd
  • always happy to buy the first round
  • faster than a speeding bullet
  • the best there is at what I do, bub
  • Scottish
  • always taking initiative
  • easy to get along with
  • a PC user
  • a film buff
  • a vegetarian
  • smarter than the average bear
  • not a bird or a plane, but I'm often confused for them
  • what I yam and that's all what I yam

I rock at:

  • Building hand-crafted standards-compliant code
    • CSS
    • (X)HTML
    • JavaScript and AJAX (including frameworks like jQuery)
  • Graphic design
    • Web site design
    • Online banners and ads
  • Working with industry-standard tools and programs
    • Adobe Photoshop
    • Adobe Dreamweaver
  • Knowing and using the best Content Management Systems
    • SilverStripe
    • ModX
    • Textpattern
  • A little light programming
    • PHP
    • C#
    • ASP.net

You can find out more about me and what I rock at by downloading my résumé in .PDF format, by checking out my LinkedIn and DeviantArt accounts, or by following my 140 character ramblings on Twitter.