Experienced front-end web developer with a keen knowledge of growing web trends and a background in Search Engine Optimization and print media seeks challenging position dealing with Front End development for a mass audience.

Technical Skills

• HTML/xHTML/HTML5
• CSS/CSS2/CSS3
• JavaScript/jQuery
• PHP

• Zend IDE / Eclipse
• Dreamweaver CS5
• Photoshop CS5

all graphics and HTML/CSS/JavaScript created by Steven Dugas except where stated.

Graphics:

most icons are from the Tango Desktop Project

social media icons are from the Social Network Icon Pack by Komodo Media

most photos courtesy of Rachel Worthy

JavaScript:

jQuery and jQuery UI JavaScript libraries and the jQuery Easing Plugin

the part of the Twitter JavaScript plugin that converts text links to actual links.

• unFlash [uhn-flash]
  noun - a web presentation that appears as though it was created using Adobe Flash, but instead uses only HTML and Javascript to accomplish similar styles of animation and effects.

  Useage: "This website is the unFlashiest website I've seen today."

• This client wanted a photo documentary presentation with synchronized audio. I created this presentation using jQuery/jQueryUI and a Flash API called SoundManager2 for the Audio controls. It runs off of XML. I then built a backend piece for an administrator to edit the presentation(s). It allows them to upload/delete photos, add/upload mp3 files, and change all the text and donate links. The gallery has the ability to have 4 different presentations and each can be shown or hidden.

   

  

• Rewind

  Play Pause

  Forward

  00:00:00

  -00:00:00

   

  I wrote this HTML 5 video player from scratch using HTML5 APIs and jQuery/jQueryUI. HTML5 APIs are currently supported well in Firefox, Safari, Chrome and Opera.

• • 
  • 
  • 
  • 
  • 

  Start

  End

  This "Coverflow" presentation is a jQuery plugin I created using jQuery/jQueryUI. The plugin takes options for small/large widths, spacing between images and animation speed, making it quick and easy to change up.

• The jQuery presentation on the homepage is a Project Portfolio image gallery. Multiple image sets are used, each representing a specific project, and then site visitors can cycle through the images using thumbnail or previous/next controls. There are also previous/next gallery controls. When the website loads, it will cycle through each project until the site visitor takes control.

  This site also features expandable/collapsable Project Information on the Project pages.

  Everything is coded using jQuery.

  

• This is one of my favorites, because I was given the freedom to do whatever I wanted with it. I was given the design with the simple instructions of "make it look like flash." The design seemed to beg for dropping bouncy balls, so that's what I did.

  I created this piece with jQuery. This was my first expiriment with timing javascript animations to a specific sequence, to achieve a presentation with javascript that would normally be done with Flash.

  

• This style of rotation is common on retail websites, but it is frequently created using Flash. In my experience, Flash-based ads are much less accessible and more complicated to edit.

  This advertising rotation is editable by the client in a WYSIWYG editor. It didn't require any back-end development to create an administrative area for the client to edit, nor did it require any lengthy training for the client.

  There is an edit button in administrative mode that opens a WYSIWYG editor. The client creates a bulleted list comprised of images, and the jQuery code does the rest.

  This jQuery version of an ad rotator is not only more SEO-friendly, but it even works on the iPhone/iPad and other devices that are not Flash compatible. Go on - try it out!

  

• For this flash-like presentation, the client needed everything to be editable: images, text and learn more link. There was no room in the budget for a custom backend piece to achieve this.

  The solution is a jQuery presentation that runs off of a bulleted list of images, edtiable through a WYSIWYG editor. If the client puts alt text on the image, it will create the black box with text. If the image is linked, it will add a "Learn more" link.

  

• Autoplay, thumbnail controls, previous and next buttons, animated transitions, play/pause buttons, infinite loops, streaming Flickr galleries: I've done just about everything you can do with an Image Gallery, in a way that is easily editable by the client and integratable into a CMS.

  I created the inifinite slider gallery below as a jQuery plugin called foreverGallery.

  It runs off a single bulleted list of images.

  LeftRight

  • 
  • 
  • 
  • 

• This image gallery features auto-created thumbnails, previous/next buttons and a play/pause button. It opens in presentation mode, where the images are automatically rotating. If a thumbnail or the pause button is clicked, the previous/next controls appear.

  This project wasn't budgeted for a backend to add/edit images, so the thumbnails couldn't be software generated. Instead, it runs off a single bulleted list of images that is edited through a WYSIWYG editor, and the thumbnails are sized down from the large images. Although it doesn't make sharp thumbnails, it was the best solution within the scope of the project. This gallery is created with jQuery.

  

• This gallery is essentially the same as the previous one, though I completely remade it about a year later. While this gallery doesn't have a play/pause button like the previous gallery, it instead resumes playing after being idle for 6 seconds.

  

• This banner image gallery rotates through the banners automatically, but clicking on a thumbnail will cause that banner to appear and the rotation to pause briefly before continuing through the rotation.

  Created with jQuery.

  

• I call this style of image gallery a "forever gallery." If you continue clicking "next" or "previous" it will continue endlessly, looping back to the beginning or end, creating the appearance of going on forever.

  This gallery was created with jQuery, and runs using a single, bulleted list of images. The images can also be linked, but are only clickable by the user when they are in the middle position. Also, there is a black shadow mask positioned on top of the photos on the left and the right.

  

• Clients want to change out photos in their photo galleries without having to contact their web company. Unless the client has someone with Photoshop skills, they aren't going to be able to add in things like photo burns or drop shadows.

  The solution is to create transparent an image mask with the shadow or burn, and then place it on top of the gallery.

  This image gallery uses a mask with the drop shadow, lettering and arm on top of the moving photos.

  

• flickrGallery is a jQuery plugin I created. It creates an image gallery based on an image set from flickr.com, so people can have a professional-looking image gallery without hosting their own images. It has since been adopted into a Joomla plugin, and can be seen in use on dozens of websites.

  

• jQuery is my weapon of choice. Most of the work that I do for clients is based on image gallery type of things, but there is a whole lot more that I can do with jQuery. This website, for example, contains several different examples of current uses for a frontend jQuery developer.

  But before I get to any of that, here's one more image gallery type thing to enjoy. One day my boss came into my office and said, "Hey, just curious. Could you make something like this?" I said, "Sure." And there you have it.

  • 
  • 
  • 
  • 
  • 

  Prev Play Next

• The Celebrity Tweet Machine grabs a random celebrity from a list provided by me and displays their most recent tweet. Every 30 seconds it reloads with a different celebrity.

  I created the tweet machine using jQuery and PHP.

  I use PHP to grab a JSON object for a random celebrity, and then save that to a cache file. If the current cache file for a celebrity is less than an hour old, it will pull from the cache instead. The Tweet Machine requests the JSON object from the PHP page using jQuery.

  p.s. I take no responsibility for anything said in the Celebrity Tweets, especially if it's from Tracy Morgan.

  

  If you haven't found it yet, click on the Gear and then the Twitter-like Bird.

• I created the HTMl5 Audio Player using jQuery/jQueryUI and HTML5 APIs. HTML5 is still in the very early stages of adoption, which means it doesn't work in all browsers and it doesn't work the same in every browser. Much like the HTML5 Video APIs, Firefox and Webkit browsers do a great job, and IE doesn't support it at all. Unfortunately, the iPhone doesn't support the use of APIs, only the default HTML5 controls.

  

  To turn on the Audio Player, click on the Gear and then the Music Note.

• The RSS Reader pulls in a random article from up to 5 different RSS feeds. Clicking on the main RSS button slides down a list of the 5 RSS feeds to choose from. It first selects a random RSS, depending on which RSS feeds are turned on, and then grabs a random article from the 5 most recent articles on that RSS feed. It refreshes every 30 seconds.

  I created the RSS Reader using PHP to grab and parse the RSS feed, and then AJAX to request and pull in that feed.

  Note: You can click on the monkey head to show/hide the speech bubble.

  

  To activate the RSS Reader, click on the RSS feed icon and select one or multiple feeds to pull from.

• The Contact Form uses AJAX to submit the form to a PHP mail script, and then uses AJAX again to pull in the Contact Success page.

  

• Professional Experience

  Web Developer - RightNow Technologies

  August 2010 - Present

  Responsibilities:

  I work as part of an Agile Development team on the Social product for RightNow, creating new features and fixing bugs, as well as improving unit and functional test coverage.

  The job involves an understanding of HTML/CSS and JavaScript (jQuery), PHP, MySQL, OOP principles and the Zend framework.

  I also assist in rapidly creating functional prototypes of possible new products, using advanced skills with jQuery and the jQuery UI Widget Factory.

• Senior Implementation Specialist, Bizzuka, Inc.

  April 2008 - August 2010

  Responsibilities:

  Currently, I am working directly with a Creative Director to implement websites from Photoshop files using xHTML/CSS into a proprietary CMS system. I implement within the CMS to provide creative solutions to software limitations, using both ASP Classic and JavaScript.

  I coordinate regularly with every department company-wide, enabling us to provide the best service possible to the client. This includes facilitating Sales in quoting projects, assisting Development with front end processes or collaborating with Customer Service when debugging and resolving website issues.

  I have an eye for usability and have also utilized time with our Product Manager refining the User Experience for the current CMS platform, creating the UI for the next-generation platform.

  However, I feel my forte is in my home department, Production. My specialty is creating custom JavaScript presentations using jQuery in a way that is easily maintained by the client.

  I strive to find creative solutions to issues, to turn a "no" into a "yes" and to go above and beyond the client's expectations.

• SEO Specialist / Web Developer - Comit Technologies

  November 2006 - April 2008

  Responsibilities:

  Along with creating xHTML/CSS websites from Photoshop designs in individual and group environments, I directed SEO campaigns for multiple clients, including one multi-million dollar business.

  At its peak, I managed 160 hours per month of SEO client work. I also had one employee that reported to me who assisted with SEO campaigns, as well as outsourced work from freelancers.

  One of my biggest web development achievements at Comit was creating a Featured Listings web application for a local Real Estate company. I designed and created both the front and back end pieces using PHP and jQuery, which allowed for easy managing and updating of property listings by the company with minimal training required.

  During my tenure as SEO Specialist at Comit, I was an integral part of the sustained growth of this department.