ExpressionEngine Web Development Portfolio

Code: HTML; CSS; Javascript; PHP; MySQL
Tools: ExpressionEngine; jQuery Library; Solspace SuperSearch; CE Cache
Credits: Project Management and (stellar) Web Design by Levin Sadsad for Ok Domo.

PVP Online

ExpressionEngine is a worthy platform for developers and designers, but occasionally those with less experience with it need to call in an expert for some quick answers, problem solving, and schlepping of heavy data. This was Petroglyph's role in the new PVPonline build. When we came on, much of the look and feel of the site was in place and ready to roll. I handled the migration (WordPress to ExpressionEngine), archive, template tags and parsing, and major bug investigations, workarounds and fixes.

Code: HTML5; CSS3; PHP
Tools: WordPress CMS; 1140 Responsive Grid
Credits: Content and Project management by Kelly Koepke, Professional Writer

KenLehat.com

This long-standing website needed a WordPress re-theme and a content overhaul. It was important to the client to reflect the history of the industry while instilling confidence in current and perspective clients. I created this responsive design (and the pictorial mashup on the home page) and coded it to respond to all browser sizes, even mobile. Kelly Koepke took care of the content.

Code: HTML5; CSS3; Javascript; PHP; MySQL
Tools: CodeIgniter Framework; 1140 Grid System (Responsive); jQuery Library
Credits: Thanks to Brian Arnold, Virginia DeBolt, and a host of many other people for your ongoing support through the development of Twitterscapes.

Twitterscapes

This project, built on CodeIgniter, is my first and only true invention. Twitterscapes, on a page load, pulls Twitter data and maps the data into images, each character represented in a monospace pixel, aligned left-to-right, as though meaning to be read as a set of tweets. The color of each pixel is determined by the user's profile colors stored in their Twitter preferences, and therefore the image left of the tweet pictorially represents the rhythm of speech, the user's personality, and the effort to send speech out into the world, more personally and conceptually than the tweet itself. Twitterscapes cannot be reversed to re-capture the tweets in each image, but the Tweets are stored with the scape for curious users to view them and observe the color translation first-hand. Twitterscapes can be translated to fabric, art prints, rugs, and more - and are fully commemorative of the moment in time they were pulled - as in "Here is a picture of the internet noise just as we Scaped!"

Code: HTML5; CSS3; Javascript; AJAX
Tools: ExpressionEngine CMS; jQuery Library; PutYourLightsOn Multiple Language; CE Image; Pixel and Tonic Assets; MX Tool Box; Pixel and Tonic Wygwam; jQuery Cycle
Credits: Design and Project Management by The Shotwell Company.

JMIF.net

I love working as part of a larger team, especially in the interests of the greater good. Here is one such example; seeking worldwide exposure for talented young musicians. This particular multiple-language, social media hub for projects focusing on different angles on marketing for young musicians

Code: HTML 5; CSS 3; Javascript
Tools: jQuery Library; MojoMotor CMS; MojoBlog AddOn (for the carousel); jQuery Cycle Plugin
Credits: Project Management and Web Design by Ripe, Inc.

Holy Cow! Restaurant

This micro-site for a local restaurant required easy content management system without incurring the bulk of ExpressionEngine. Not to worry: MojoMotor (called "The publishing engine that does less") was available for getting this just right. With the addition of the MojoBlog add-on, the complexities of creating an image carousel without the repeat-publish functionality of a blog were remarkably diminished.

Code: HTML; CSS; Javascript; PHP
Tools: ExpressionEngine 2.2; jQuery Library 1.6; AJW Datagrab
Credits: Project management by Fenton Communications; Initial development by Jeremy Gimbel

AltaGraciaApparel.com

Sometimes Petroglyph takes on existing sites, like this one, with dreams of huge new features. In this instance, the site required an AJAX-driven search of schools and connected products, as well as the ability for the public to post Blog Entries and Photos of apparel being worn. Content relating the schools and the apparel came on a spreadsheet, which we imported into the website. Social sharing was on the list as well. Check it out! We love this stuff. The best part is, we were able to hand this off to a site administrator with no previous experience operating this kind of set-up.

Code: XHTML; CSS; Javascript; AJAX; PHP
Tools: ExpressionEngine CMS; jQuery Library
Credits: Project management and design by The Shotwell Company

MigrationLinkages.bsr.org

AJAX-driven database of resources, opportunities, and news for legal migration of workers and the companies that seek to hire them. Administrators are able to post events, news, and blog entries, as well as update all existing information and post new resources. Tags and categories work in-tandem to assist seekers in finding the exact information they are looking for.

Code: HTML5; CSS3; Javascript
Tools: jQuery Library; ExpressionEngine 2; Fonts by FontSquirrel; Amazon API plugin by HopStudios; Matrix and Playa add-ons by Pixel and Tonic; SEO Lite by Bjorn
Credits: Design by Petroglyph Creative; Special thanks to Ryan Masuga at Devot-ee.com for his support and flexibility.

PrettyIll.com

I worked very closely with Dr. Diana Driscoll to design, build, and develop this cutting-edge resource site for connective tissue disorders that are often misunderstood, or worse - ignored or passed off. As a patient, a doctor, and a researcher, Diana Driscoll holds a unique position to be able to dispell myths, organize studies, and put a cap on the relentless dismissal of these conditions. I hope you'll join me in supporting her brave initiative, and use the site if you are suffering from any of this.

Code: HTML5; CSS; MySQL
Tools: ExpressionEngine 2 CMS; SEO Lite by Bjorn; Navicat Lite for Data Migration
Credits: Design by RobinWebWorks in Santa Fe, NM

MarySchmidt.com

Petroglyph converted Mary Schmidt's site from Wordpress to ExpressionEngine and implemented a new design she had been hanging onto for some time. This 7-year-old blog with its very strong and also funny content now has new legs to stand on, and Petroglyph was proud to help!

Code: HTML5; CSS3; Javascript; AJAX
Tools: ExpressionEngine CMS; JQuery Library
Credits: Final design by BSR; Project Management and direction by The Shotwell Company

herproject.org

We got to do some of our favorite things here, for a very worthy cause. We custom-built and provided basic design for a twitter-esque micro-blogging platform that included tagging of statuses, driven completely by AJAX. We also built a very similar engine to share documents. In addition, all contributions can take AJAX-powered comments, just like the ones on Facebook. HerProject is a BSR initiative to bring health and education to women across the world.