It Was The Chad

(of course it was)

48in48

by

48in48-logo

In October of 2015 I participated in an amazing charity event called 48in48. Hosted by two local web agency guys — Jeff Hilimire and Adam Walker — the event gathered about 150 web developers, designers, UXers, and content writers in order to create 48 websites for 48 nonprofits, all in 48 hours.

And,  yes, we achieved our goal.

Besides being a great opportunity to help those in need, the event was a ton of fun. Volunteers were showered with food, raffle prizes were given away every four hours, and we took breaks to tour the Mail Chimp and Twitter offices (both very impressive).

As for the web work, my team finished four websites, two of which I was primarily involved with. None of the event’s sites were actually launched during the 48 hour period, and it’s unknown when that will actually happen, but below are before-and-afters to show how we transformed the nonprofits’ sites and branding.

The Campbell Family Foundation

The Campbell Family Foundation helps build up individuals and communities by offering mentoring, life coaching, anger management classes, support groups, healthy living initiatives, money management, public speaking programs, sports training and more.

Original Site

campbell-before

New Site

campbell-after

The Homegrown Initiative

The Homegrown Initiative is a 501(c)3 charitable non-profit organization providing technical job training and placement to America’s homeless military veterans.

Original Site

As a brand new organization, The Homegrown Initiative did not have a website before this event.

New Site

homegrown-after

Images From the Event

Neighborhood Website

by

Windwood North
After connecting the residents of my neighborhood via Nextdoor (basically an online social network for neighborhoods), I decided to create an informational website about the neighborhood.

It’s my hope that the website will instill pride in the neighborhood and also impress potential buyers looking to move into the area. I really love the neighborhood, and I built the site to help it flourish.

The website is built on Bootstrap. I also had fun digging into the Google Maps API for this one.

Visit the site: windwoodnorth.com

Screenshots


Windwood-North-screen02
Windwood-North-screen03
Windwood-North-screen04

Smilin’ SMIL Animation

by

If you came in through the front door of this site, you’ve already met my alter-ego, Smilin’ Chad. The animation was created using a combination of SVG graphics, SMIL animation, and jQuery.
Looks like this isn’t supported here. :(
Believe it or not, I searched for how to do this type of animation but couldn’t find anything like it on the whole entire web. So, who knows, perhaps I’m the first. And being the first, I decided to name my animation style: I call it “morphimation.” :)

What I did find in my searches were SMIL animations that morph a single path/shape (best example is this Batman logo morphimation), so I adapted that idea to animate an SVG image with many paths.

While jQuery is not really necessary for a simple morphimation like the Batman logo, my version is too complex to create all the SVG and SMIL attributes by hand. For that reason, I set it up so all I have to do is export an SVG file from my vector drawing program. Then I’m using jQuery to read in that file, parse it, create the inline SVG and its animate tags, and then populating those tags with values for each frame. Easy!

I cleaned up my code a bit and put it on Github in case anyone wanted to do something similar. I was actually going to clean it up a lot more and make it easier to reuse, but….

Well, dang it, I found out only after doing all this that SMIL is going the way of the HTML “font” tag — deprecated!! Oh noes! I don’t know how I missed this while I was working on the project, but, well, crap.

It was a good learning experience nonetheless. From what I’ve read, it doesn’t sound like there’s currently an alternative way to do this kind of animation. I’ll have to look into that further.

Oh yeah — I also added a mouse hover effect just for fun. Roll-over the animation with your mouse (sorry, no fun for touch screen users) to see what happens.

The Last Banana

by

last-banana-header

The (First World) Problem

We’ve all been there. Two bananas left on the banana hanger. You pick them up, rip off one for consumption, and then try to return the last one to the hanger. Except no banana hanger in the world can hang a single banana. You try to wedge it into the hook. You try to balance it on the top. No luck. Eventually, you give up and toss the banana on the counter.

Boom. Bruised banana. Thus is the fate of the last banana.

The (Revolutionary) Solution

The Last Banana
This is the problem I attempted to solve as I stepped into the role of product developer. I came up with an elegantly simple solution — my design includes a notch into which a single banana stem can be easily wedged.

Though this whole idea started out as a joke (see my infomercial screenplay below), I actually put serious thought and effort into the designs and then registered for a provisional patent. I then put up a sell-sheet in the form of a website (linked below) which I could use to shop the idea around to various kitchen product manufacturers. I shopped it around, though no one was ultimately interested in licensing the idea. As usual, I’m so far ahead of my time that others cannot see my genius. ;)

Despite the idea not selling, it was a fun and educational experience.

Website Sell-Sheet

Link: The Last Banana

I put together a single-page site to show off the idea to kitchen product companies.

last-banana-screen-1
last-banana-screen-2

last-banana-screen-3

The Infomercial

This whole thing started as a joke. I even wrote a screenplay for a comical infomercial. After writing it, I thought that, though goofy, this could legitimately catch on and sell some product. I never did get around to actually producing the video, though, so let me know if you’re interested in working on this together. :)

Note: The screenplay was written back when the banana hanger was intended as an adapter rather than a stand-along solution. My, how far we’ve come since then! ;)

Virt World Story Site

by

Virt World

Site-Icons
Polygon-style graphics created for the story site

Not for the first time, I got it in my head that I would write a novel. Not only that, but I would take it a step further and share story details and journal my writing experiences as I wrote. In this way, I hoped to attract readers of the genre as well as aspiring writers and to create an online following that would help when it came time to find a publisher for the young adult, sci-fi story.

To that end, I created what I call a story site using the WordPress platform. As I developed characters, worlds, and plot details, I added them to appropriate sections of the site. These notes served as a story bible, helping me keep my ideas organized, and it also served as an early preview for readers.

The story notes, in addition to regular blog updates and writing progress bars, allowed the world to follow the creation of the Virt World story. Well, that is until I realized once again that writing a novel is extremely difficult and, perhaps, not something I’m quite ready for yet. The story site sits stagnant at this point, though I am still proud of what I did achieve and hope to return to finish it some day.

The Story

The story, as mentioned, is a young adult, sci-fi story. Here’s the blurb:

Virtual Reality technology has nearly replaced the snooze-fest that is the real world. Millions of people now spend most of their lives plugged into Virt, a series of virtual worlds in which they play, work, socialize, and otherwise ignore reality.

While gearing up for the biggest Virt adventure of the year, one gamer discovers that his gaming partner is actually playing against her will for the profit of others. In a world that’s all about keeping your head in the sand, he must decide what’s more important: winning gaming immortality or teaming up to save a fellow gamer.

The Story Site

I designed the site itself as well as all the graphics. The polygonal design aesthetic was intended to evoke the sci-fi virtual reality feel of the story. I even made a new headshot of myself in the polygon style.

Screenshots

virt-word-screen-1 virt-word-screen-2 virt-word-screen-3