Web Development

Portfolio

16 Feb 2009

iTwitSports.com

•Twitter API integration

•Custom jQuery and Javascript

•Ongoing Drupal development

Brainstorm Creative Lab

• Converted PSD files to Interspire and Wordpress Templates

• Created Integrated CMS environment using Wordpress, Interspire and PHPList

Family Circle Cup

• Converted initial layout of site to HTML/CSS

• Implemented custom weather widget

Lixit

• Created customized search solution using Drupal

• Advanced Drupal configuration & MYSQL querying

Heavy Iron Charters

• Converted PSD to Wordpress theme

• Implemented Customized XML/XSLT Weather widget

Islandpacket.com: Verizon Heritage site

• Converted PSD to Drupal theme and configured site workflow

• Created Custom weather widget

Instant Itineraries

• Created a drupal 6 theme from existing design

• Customized tagging solution, written about here

Joanna Conti

• Converted PSD to Drupal Theme;

• Customized solution for displaying flickr photos

Custom Code

Created method for feeding Drupal content to a different content management system. Read more about this work here

Noble Fare

Converted site from a PSD to Wordpress Template

Configured Site

Islandpacket.com: Blogs site

• Converted theme from Drupal 5 to Drupal 6

Sen. John Astle

• Converted site from static HTML to Drupal Theme

• Complete site configuration

• Custom solutions for client needs

510families.com

• Complete Drupal development - theming, dynamic views and custom coding.

• Ongoing maintainence and consultation

Richmond Hill Real Estate

Converted PSD to Wordpress theme

Historic Hillsborough

• Converted PSD to Drupal theme

• Configured site to function to specs

Slots.com

• Developer for initial theme implementation

• Customized tribune module for client needs

Educators Royal Treatment

• Fully implemented Wordpress multiuser platform

• Theme extension for client needs

Evoca Express Wordpress Plugin

Widgetized this plugin for newer versions of wordpress

A Question of Color

• Converted site from PSD to Wordpress Theme

Continue reading...
Tags: |  

Overhaul of photo interface at islandpacket.com

05 Feb 2009
Posted by Eddie

Recently, I overhauled the browsing interface for photos at http://www.islandpacket.com

A new format we're trying out uses the galleriffic plugin for jquery and looks like this:

You can see a working example here - http://www.islandpacket.com/photos

Previously, our photo template displayed photo galleries by default in a list format, which doesn't lend itself well to discovery. It's also a frustrating way to view many photos. Here's a small thumbnail of what I'm talking about:

So now that we have this new photo browsing interface, I had to create a portal page to help users discover the various photo sections that will each feature many photos flowing through. This page uses several database queries to return the amount of photos a given gallery has, the time the gallery was last updated, and displays a preview of the latest image. This query process is all automated using Perl template toolkit queries and server side includes.

Currently, this portal example is at http://www.islandpacket.com/1398 but will soon move to http://www.islandpacket.com/photos as the main landing page for photography. The portal page looks like this:

Also, I developed a photo discovery widget for the islandpacket.com home page based on a photoshop wireframe designed in house. The discovery widget uses jQuery tabs UI to display 4 different photo categories and dynamically pull in the latest three photos using server side includes of custom template toolkit output. Within the template toolkit output, I auto-wrapped each photo with it's corresponding link in the full-size photo gallery so that one can view additional photos without ending their browsing experience or hitting back on their browser.

The widget looks like this:

There are a few more loose ends to be tied up on the photo gallery, but all in all I think it's a tremendous improvement over photographic display and discovery on islandpacket.com, which again was just a simple list.

Continue reading...
Tags: | Add a Comment

Integrating Twitter, Facebook and Blog

09 Nov 2008
Posted by Eddie


I post a status update on facebook, or a tweet on twitter, and my site echos the short message within seconds. I text an update to 40404, both my site and my facebook display the message. This isn't anything new, but what if you don't want a clunky widget taking up a bunch of space on your site? That was the challenge I wanted to overcome for displaying twitter updates on my blog.

UPDATE: I've since updated my site to remove this twitter widget as I no longer update my personal twitter account - but the code works!

Browsing twitter's badge page, I wasn't impressed with the offerings for display on my blog, so I used a jQuery plugin to create something more customized, which is now ticking away on my site header.

Step 1 - I simply copied the code that is spit out on the badges page. 


<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline 
/medenfield.json?callback=twitterCallback2&amp;count=5"></script>

Just change 'medenfield.json' to 'yourname.json'.

Step 2 - I poked around the jQuery website for a plugin, and found one called Newsticker.
I also looked BBC NewsTicker, but it didn't quite do what I wanted out of the box.

After downloading the script, I changed the #id to match what twitter's badge is already assigning the list items - #twitter_update_list. 


$(document).ready(
	function()
	{
		$("#twitter_update_list").newsTicker();
	}
);
Continue reading...
Tags: | Add a Comment

Building a carousel

21 Sep 2008
Posted by Eddie

A few months ago, I created a carousel using the jquery library. Our former interactive director built a carousel for beaufortgazette.com which was a great development model. Our Web designer created the look and feel of the widget - I put the code together.

Here's what it looks like:

Continue reading...
Tags: |