Gavin Botica

Please note: You can view this resume online at 'http://www.gbot.info'.

Please see my website at 'http://www.gbot.info' for screen shots and links.

2001 – Present

Freelance

Website developer

As a freelancer under the business name 'Stomp Box', I provide my clients with website development, email marketing, hosting and consultation services.

Freelance work has given me great experience with project planning and management, project development, consultation, proposals, documentation and client support.

Freelance clients, past and present include:

• Spitfire Creative – (Auckland, NZ)
• Color Factory – (Auckland, NZ)
• Company 1 – (Sydney, Australia)
• Emery Legal – (Auckland, NZ)
• Lucid Metal Architectural Illustration – (Sydney, Australia and Dubai, UAE)
• NSW Department of Commerce – (Sydney, Australia)
• NSW Department of Education, TAFE NSW – (Sydney, Australia)
• Geoff Ambler – Photographer (Sydney, Australia)
• 2C Management – (Sydney, Australia)
• On The Mark Design – (Sydney, Australia)
• Derek Henderson – Photographer (Sydney, Australia)
• CMS Marketing – (Sydney, Australia)

2001 – 2007

NSW Department of Education and Training

Website producer / designer
Corporate Communications Directorate (Sydney, Australia)

Working primarily in the TAFE NSW marketing team I was responsible for on going management of several internet and intranet sites; in addition to planning, design and development of new websites, email campaigns, mini-sites, Flash interactive applications and Flash banners, content management, ad campaign creative and production, SEO, code optimisation, video editing and web publishing. Also occasionally included some desktop publishing, graphic design, training and technical consultation.

DET NSW is a very large organisation with many stakeholders and many legacy systems and processes undergoing a multi-year modernisation. During my time there I successfully implemented many initiatives, including:

• Two complete re-designs of the central website
• Web search marketing
• Online advertising and promotions
• Accessibility compliance
• Direct email marketing
• Usability testing and site review
• Multimedia and distributed content
• Improved statistics and reporting

2001 – 2002

Crash Productions

Website producer / developer (Sydney, Australia)

As producer and developer for Crash I was responsible for all aspects of the project cycle from receiving project briefs and delivering proposals, to project planning, liaison with third party contractors and service providers, testing, QA and client support.

• Web project producer
• HTML/ CSS, ColdFusion, some ASP
• Project management and planning
• Client support
• Sites included: cebit.com.au, freedomkitchens.com.au, hannoverfairs.com.au

January 2001 – April 2001

Investor Info

Webmaster (Sydney, Australia)

Investor Info is a publisher of investment news and editorial through hard-copy magazines, online newsletter subscriptions and websites. They also offer an exclusive online investment management system.

• Content management and production for 3 websites
• Technical support of in-house network. Mac & Windows
• Some network and server administration

October 2000 – January 2001

eStore

Producer (Sydney, Australia)

In 2000, eStore was once of Australia's largest on-line retailers. As producer I was responsible for supervision of the web production team. This included web and graphics production, staff roster, task assignment, training and reporting to management. I also was responsible for liasing with our service providers and over-seeing development of the website.

• eStore website producer
• Implemented many usability improvements to the website (both front-end and back-end)
• Management of production team
• Training

Continue

Please feel free to contact me at any time:

Email: gbotica@gmail.com

Phone: +64 21 851 302

Generated: 6:22pm 4 Jul 2009

Since launching this website in mid-2008 I've received lots of positive feedback from prospective employers, clients and casual visitors.

I've also had many people contact me and ask "How did you do it?" and "What did you use to make it?". I expect it would be pretty easy for an experienced developer to glance at the source code and figure it out, so this explanation is aimed at the beginner or not-so-experienced developers who would like to know how I went about it.

What did I use to make it?

Tools I used were:

• Adobe Photoshop CS3
• Adobe Dreamweaver CS3 and
• my brain.

How did I do it?

Quite a lot of experimentation and testing was done to prove the concept would work. I did some early prototyping and testing in multiple browsers and platforms before I could be sure that it would meet my requirements, which were:

• Must work on IE6+, Firefox 2+, Safari 3+, Opera 9+ and Google Chrome
• Viewable on monitors 1024x768 or higher
• Valid xHTML 1.0 Strict and CSS 2.1 (Boilerplate reset.css won't validate, and nor will 'border-radius')

The final site has been tested and works in all the above browsers – although there are some minor cosmetic differences – mostly with Internet Explorer 6 and 7. It works best in Firefox 3 or Safari 3.

Inspiration

I cannot claim that this is an entirely original concept – I came up with the idea after seeing another online résumé site called My Kinetic Creations. I like the idea of a single-page résumé site because all the content is right there, SEO is good and there's no page loading (after the initial one of course).

The other benefit was that it would be pretty easy for me to reformat the content to produce a plain-text PDF version whenever I update it, which I do quite frequently. The PDF version of my résumé is generated directly from this page, using a print style sheet. To do this I just open the page, disable Javascript and hit 'print', sending it to my Adobe PDF printer driver. Nice and easy. I know I could use PHP to generate the PDF automatically – but that seemed like overkill.

Differences

What I didn't like about the My Kinetic Creations site was the way the header and menu were repeated for each section – so I needed to have a fixed DIV for the navigation. To preserve vertical screen real estate I opted for a vertical menu on the left of the page.

The other difference was that I wanted to implement a simple style sheet switcher which would swap out the background image, giving the site a few options for a 'theme' (kind of). When you first visit the site a theme is selected at random. When you make your own selection using the switcher it is stored in a cookie for seven days. Try it out – see the 'theme switcher' in the footer of this page. Only the Flash version of My Kinetic Creations offers a background image switcher.

Challenges

The main difficulties to overcome were:

• Fixed DIV in IE6
• Transparent PNGs in IE6
• Keeping the content area centred both vertically and horizontally in all browsers
• Keeping the footer "glued" to the bottom of the window in all browsers
• Getting the style sheet switcher to work in IE6

Libraries and frameworks

Here's some code base I used, and what it achieves:

• Mootools Javascript framework (version 1.2 beta 2)
  • All Javascript functions and animation
  • Note: a problem in Safari with Mootools version 1.2 release (and 1.2.1) has prevented me from updating this site until I can track down the problem. You can demo this site running Mootools 1.2.1. Please note that this will break the site in Safari.
• Clientcide TabSwapper class for Mootools
  • The tabbed interface
• IE7.js library (version 2 beta 4)
  • Transparent PNG support in IE6
  • Fixed DIV support in IE6
  • Various CSS fixes for IE6
• Boilerplate CSS framework (version 0.3)
  • A very simple CSS framework. Provides a few useful classes and a good reset

That about covers it I think. As you can see the site is just one long HTML page with a lot of vertical space between each section. Clicking a link to a new section uses a Mootools function to scroll the window to the correct location. Mootools does the calculations to ensure that the correct offset is applied depending on the size of the browser window. Whenever the browser window is resized a function is run which recalculates the offset.