Description

CalebD.net is this website. It is the second incarnation of the site. This version was designed and developed from the ground up to be professional, concise, and informative. When development began, I decided that this new iteration had to fix several issues of the previous design. For one, the previous design used a simple PHP script that loaded XHTML content from a subdirectory and displayed it within an XHTML template. Updating the site consisted of manually editing the XHTML and uploading it to the server. Secondly, the layout of the previous design was horizontally constricting and prevented me from displaying larger images. I also felt the website did not have as professional of a feel as I wanted. My ultimate goal was to create a new website that reflected the skills I have learned since the last incarnation, and to present myself in a more professional manner.

To overcome the problem of content management, I selected to install Drupal based on my previous work with the software. The main dynamic part of the website would be the portfolio area, which I decided should have the ability to list projects with details. Through the use of the Content Construction Kit, a module for Drupal, I created a custom content type for the projects, allowing me to easily specify dates, descriptions, URLs, people involved, and images. For the projects, I wanted to be able to display relevant images to back up my descriptions. I decided to use the free JavaScript program ThickBox, which is written using the jQuery JavaScript library. ThickBox is somewhere between a full fledged gallery program such as Gallery 2, and raw XHTML used to display images. By combining several free software packages, I was able to craft a new near perfect solution which is easy to use.

The limited design of the previous version was rectified with this new design, done by Raechel Haller and modified by myself. We decided on a green based color scheme because it reflects my personality (green being my favorite color). The width of the website was also increased to 960 pixels, a favorite of mine due to its balance between fitting on 1024x768 resolution monitors, but not looking too squished on higher resolution monitors and wide screen monitors. The overall look of the site was designed to be firm and colorful, but not overdone. Minimal amounts of images were to be used.

Technologies: Linux, Apache, PHP, MySQL, Drupal (including these modules: CCK, Views, JavaScript Tools, and Webform), XHTML, CSS, JavaScript, jQuery, and ThickBox

Description

The goal of the Volunteer Management Association of Western Michigan (VMAWM), as described from their website, is "To enable persons who manage volunteers, or volunteer programs, to advocate for volunteerism, and provide management enrichment."

I was tasked with creating a website that allowed them to more easily perform their duties. The primary function of the website is to cleanly present information about the organization. For those interested in the VMAWM, the website serves as a way to learn about the organization and follow the events they hold. Members of the organization are able to log in through the left sidebar and view additional information. From the perspective of the VMAWM, the website needed to be easily manageable by the non-technical board members of the organization.

To solve all of these problems I decided to use Drupal, the free management platform and framework. Out of the box, Drupal provided the base set of features necessary to manage content about the organization. Events and a calender display was achieved using the Event module for Drupal, which creates an content typed based around start and end dates, and also provides the calender based page views (see image 2). Integration with the fantastic Gallery 2 image management software was done using the Drupal module Gallery (see image 3). The end result can be seen at vmawm.org.

Technologies: Linux, Apache, PHP, MySQL, Drupal (including these modules: Event, Views, JavaScript Tools, and Gallery), XHTML, CSS, JavaScript, jQuery, and Gallery 2

Description

100 Hours of Power is a project by the AmeriCorps program at the American Red Cross of Greater Grand Rapids. The project took place from May 13th through May 20th during National AmeriCorps Week and focused on literacy. Due to the large amount of volunteers needed, it became necessary to create an easy to follow website that potential volunteers could use to learn about the project and sign up for positions as a volunteer. I was charged with creating this website.

The 100 Hours of Power website would facilitate several facets of the project. It would be the main source of information about the project for the public. It would be the gateway for involvement in the project, allowing the public to register as a volunteer. Finally, it would allow registered volunteers

The 100 Hours of Power website facilitated several facets of the project. From the public's point of view, it hosted information detailing what 100 Hours of Power is and what was required to become involved (see image 3). It provided the ability for the public to register as a volunteer and help out (see image 4). Finally, it had an interface used by registered volunteers to manage which of the various shifts (blocks of time) they wanted to be active in (see image 2).

On the administrative side, the website was used by AmeriCorps to manage and coordinate their volunteers. By allowing the volunteers to choose what shifts they wanted to participate in, AmeriCorps no longer had to take the time to contact and manage volunteers themselves.

100 Hours of Power used the free content management framework Drupal as its core. Drupal contains the foundation of content and user management that 100 Hours of Power easily extended. The features specific to 100 Hours of Power, such as volunteer registration and shift management, was implemented through a custom crafted Drupal module. The single module provided all of the necessary additional functionality needed by AmeriCorps.

100hoursofpower.com launched on Monday, April 2nd, 2007. National AmeriCorps Week was from May 13th through May 20th and 100 Hours of Power was successful in meeting their goal for donated books.

Technologies: Linux, Apache, PHP, MySQL, Drupal (including these modules: Custom 100 HoP module, JavaScript Tools, and Gallery), XHTML, CSS, JavaScript, jQuery, and Gallery 2

Description

"Yellow Petal is the online portfolio of Autumn Johnson and Raechel Haller."

Yellow Petal is a simpler website that serves as an online portfolio for the clients. It uses Drupal to manage photography, editing, and design samples. The design makes heavy use of Drupal's taxonomy feature by classifying content into pages and columns. The classification is used to display content at specific locations on the page using the views module (see image 1).

For displaying portfolio samples, the jQuery based script Thickbox was used. Although harder to use than a program like Gallery 2, Thickbox is extremely lightweight, straight forward, and well suited for a not so dynamic portfolio site. Because the images are the property of the clients, and due to the ease of copying digital media, it was necessary to apply a watermark. Applying watermarks is done through a simple custom module which allows the uploading of watermark source images (see image 2). The source images can then be laid over any images uploaded through Drupal's already exist file attachment system. When an image is watermarked, the original is copied into a secure location that cannot be accessed from the web.

Technologies: Linux, Apache, PHP, MySQL, Drupal (including these modules: CCK, JavaScript Tools, Content Templates, Webform, Views, and a custom watermarking module), XHTML, CSS, JavaScript, jQuery, and Thickbox

Description

Silver Fuzz Rattery is the website of a well known west Michigan rat breeder. The website is a collection of information about the status of the rattery. It features detailed information about the rattery, litters, and rats. It allows potential customers to see what rats are currently available and allows them to contact the breeder. Comments and feedback about the rattery can be left using the guestbook feature (see image 1).

Due to the content oriented nature of the site, I chose the free management framework Drupal to use as the base. Using the Content Construction Kit module, I designed several different content types, including rat, litter, guestbook, and news types. The rat and litter types in particular allow the client to enter a variety of information which is then automatically formatted when viewed on the site. Using Drupal's taxonomy system of content classification, rats are separated into genders and currentness (see image 2). Rats can even be linked to their sire and dam, allowing visitors to easily trace a rat's family history and genealogy.

Rats and litters also have pictures associated with them, displayed using the Gallery module for Drupal. All pictures are stored in various Gallery 2 albums and subalbums and are browsable via Gallery 2 (see image 3). To prevent copyright violations, all images are watermarked using Gallery 2's built in watermarking features.

Technologies: Linux, Apache, PHP, MySQL, Drupal (including these modules: CCK, JavaScript Tools, Gallery, and Views), XHTML, CSS, JavaScript, jQuery, and Gallery 2

Description

The Community Emergency Response Team of West Central Michigan trains citizens in disaster preparedness. The website of the CERT of WCM is an information outlet on the activities of the organization and also contains contact information so visitors may become involved.

Due to the primarily static nature of the site, and because I couldn't find a free and mature enough software package, a custom management solution was written using PHP and MySQL. The solution facilitates four main functions: static pages, requesting information, event management, and photo management. Static pages are the simplest of the four, consisting of a title, body, and machine name (used for URL purposes). Requesting additional information is done through a form. Visitors fill in details, such as their name, organization, address, phone, e-mail, and comments or concerns. This information is forwarded via e-mail to the CERT of WCM, which handles the request accordingly.

The event management and photo management is a bit more complicated. Events are added in a similar way to static pages, but also have a date and time range used to place the event on a month based calender view (see image 2). On the calender view, events can be clicked to be brought to a page providing additional details about the event (see image 3). Photos are managed through a gallery system based on albums and subalbums, much like Gallery 2. Albums, subalbums, and photos can all have an associated body of text, displayed either at the top of the album/subalbum page, or below the photo within the gallery.

Technologies: Linux, Apache, PHP, MySQL, XHTML, CSS, JavaScript