Details and Descriptions

Featured
Double Ferrari Vinyl Layout, Site Animation & Development Pug, Stylus, Anime.js, Parallax.js, CSS Animation, Javascript, Photoshop, Illustrator. Art by David Hoskins. I laid out the full vinyl packaging for Double Ferrari's self-titled debut album, including sleeve, liner notes, and side labels. Then I took the cover art, separated it into layers of color, and made a promotional website at doubleferrari.com that moves in relation to mouse movement or device tilt. I'm so proud of this project! Winter–Summer 2017. View the live site here .

Double Ferrari Vinyl Layout, Site Animation & Development

Pug, Stylus, Anime.js, Parallax.js, CSS Animation, Javascript, Photoshop, Illustrator.

Art by David Hoskins. I laid out the full vinyl packaging for Double Ferrari's self-titled debut album, including sleeve, liner notes, and side labels. Then I took the cover art, separated it into layers of color, and made a promotional website at doubleferrari.com that moves in relation to mouse movement or device tilt. I'm so proud of this project!

Winter–Summer 2017.

View the live site here.

Lingua Franca EP  Design Photoshop. Illustrations by Erin Stacer. I laid out multiple variations of the design, and prepared the art for printing. Download the album on Bandcamp .

Lingua Franca EP Design

Photoshop.

Illustrations by Erin Stacer. I laid out multiple variations of the design, and prepared the art for printing.

Download the album on Bandcamp.

Double Ferrari Shirt Design Photoshop. Worked with Jace Bartet from the band to design this shirt. His request was, "Like a NASA shirt from the 80s, but even more rock and roll." I think we nailed it, and the first printing sold out almost immediately. Summer 2017.

Double Ferrari Shirt Design

Photoshop.

Worked with Jace Bartet from the band to design this shirt. His request was, "Like a NASA shirt from the 80s, but even more rock and roll." I think we nailed it, and the first printing sold out almost immediately.

Summer 2017.

Mineko's Night Market Site Animation & Implementation Pug, Stylus, Anime.js, CSS Animation, Javascript, Photoshop. Responsive promotional site for Mineko's Night Market  by Meowza Games and Kukubee . Meowza provided the art and layout as a Photoshop file, which I re-implemented as a responsive site. I animated various elements, including parallax scrolling on the header, squishy buttons, and wiggling stars. My favorite part is the parade of cats partway down the page, which is written in Javascript and Anime.js. The script sends new cats walking across the page at randomized intervals, speeds, and color. This was fun to write and fun to watch! Summer 2017. View the live site here .

Mineko's Night Market Site Animation & Implementation

Pug, Stylus, Anime.js, CSS Animation, Javascript, Photoshop.

Responsive promotional site for Mineko's Night Market by Meowza Games and Kukubee. Meowza provided the art and layout as a Photoshop file, which I re-implemented as a responsive site. I animated various elements, including parallax scrolling on the header, squishy buttons, and wiggling stars.

My favorite part is the parade of cats partway down the page, which is written in Javascript and Anime.js. The script sends new cats walking across the page at randomized intervals, speeds, and color. This was fun to write and fun to watch!

Summer 2017.

View the live site here.

Caves of Qud Site Design & Development Wordpress, PHP, Stylus, CSS Animation, Javascript, Sketch. Responsive promotional site for Caves of Qud  by Freehold Games . They had installed a basic Wordpress template, which I re-designed to match the game's aesthetic. I also worked with the Freehold team to help determine what content to display, and how. I'm particularly pleased with the scanline effect, which is just made of CSS styles, and the Roadmap page, which needed to display a lot of information in a concise format. February–March 2017. View the live site here .

Caves of Qud Site Design & Development

Wordpress, PHP, Stylus, CSS Animation, Javascript, Sketch.

Responsive promotional site for Caves of Qud by Freehold Games. They had installed a basic Wordpress template, which I re-designed to match the game's aesthetic. I also worked with the Freehold team to help determine what content to display, and how.

I'm particularly pleased with the scanline effect, which is just made of CSS styles, and the Roadmap page, which needed to display a lot of information in a concise format.

February–March 2017.

View the live site here.

VIDEOBALL.NET Site Photoshop, Illustrator, Web. Responsive site based on Action Button Entertainment 's game VIDEOBALL . Working under director Tim Rogers, I assembled this site in just a couple of weeks.  I created the GIF for the title bar, and re-created many aspects of the game's UI in HAML/SCSS. I've updated it periodically over the following months as the game UI has changed, and as the game approaches release. I've written various Javascript components to add functions. The promo video at the top is replaced by Action Button's live Twitch.tv stream, if they are streaming Videoball. The ticker is live-updated as posts are made to the Videoball Tumblr. As of May 2015, I've replaced most of the graphics with SVG, and am adding additional dynamic content. View the site live here .

VIDEOBALL.NET Site

Photoshop, Illustrator, Web.

Responsive site based on Action Button Entertainment's game VIDEOBALL. Working under director Tim Rogers, I assembled this site in just a couple of weeks.  I created the GIF for the title bar, and re-created many aspects of the game's UI in HAML/SCSS.

I've updated it periodically over the following months as the game UI has changed, and as the game approaches release. I've written various Javascript components to add functions. The promo video at the top is replaced by Action Button's live Twitch.tv stream, if they are streaming Videoball. The ticker is live-updated as posts are made to the Videoball Tumblr.

As of May 2015, I've replaced most of the graphics with SVG, and am adding additional dynamic content.

View the site live here.

xray.games Web Application vue.js, Jade, Stylus, Javascript, Sketch. Responsive web application for OOTU, inc. I developed this application in vue.js to work with OOTU's database backend via JSON APIs. xray.games is a tool for finding video games you'll enjoy by defining and exploring unorthodox connections between them. The application shows information about games and their Traits, allows you to explore the database through multiple avenues, and add Trait-to-game relationships. Emphasis on smooth animation, response time, and user experience. View the live site here .

xray.games Web Application

vue.js, Jade, Stylus, Javascript, Sketch.

Responsive web application for OOTU, inc. I developed this application in vue.js to work with OOTU's database backend via JSON APIs. xray.games is a tool for finding video games you'll enjoy by defining and exploring unorthodox connections between them. The application shows information about games and their Traits, allows you to explore the database through multiple avenues, and add Trait-to-game relationships. Emphasis on smooth animation, response time, and user experience.

View the live site here.

Where the Water Tastes Like Wine  Site Photoshop, Node.js, Jade, Stylus, Javascript, ScrollMagic. Responsive promotional site for Dim Bulb's upcoming game Where the Water Tastes Like Wine , directed by Johnnemann Nordhagen of Gone Home . Used ScrollMagic to create a scrolling reveal at the top of the page. December 2015. View the live site here .

Where the Water Tastes Like Wine Site

Photoshop, Node.js, Jade, Stylus, Javascript, ScrollMagic.

Responsive promotional site for Dim Bulb's upcoming game Where the Water Tastes Like Wine, directed by Johnnemann Nordhagen of Gone Home. Used ScrollMagic to create a scrolling reveal at the top of the page. December 2015.

View the live site here.

Cerulean Moon  Site Photoshop, Node.js, Jade, Stylus Responsive promotional site for Nachobeard 's upcoming game Cerulean Moon . May–June 2015. Updated February 2016. I used this project as a chance to learn a new set of tools based on Node.js. I'm really pleased with everything I learned, and how the site turned out. View the live site here .

Cerulean Moon Site

Photoshop, Node.js, Jade, Stylus

Responsive promotional site for Nachobeard's upcoming game Cerulean Moon. May–June 2015. Updated February 2016.

I used this project as a chance to learn a new set of tools based on Node.js. I'm really pleased with everything I learned, and how the site turned out.

View the live site here.

Venn Collective  Site Implementation and Animation Kirby CMS, PHP, Stylus, CSS Animation, SVG, Javascript, ScrollMagic, ScrollTrigger, other JS libraries, Sketch. Responsive company site for Athens-based Venn Collective. I worked closely with designer Phil Goodwin and the rest of the Venn team to implement their vision for the site. Phil provided detailed Sketch mockups of each page, which I implemented as a responsive site on Kirby CMS, using PHP, Stylus, and Javascript. I used ScrollMagic to create the effect of the red and blue circles coming together at the bottom of the page. There's a ScrollTrigger-based CSS animation for the sticky header. CSS animations create other effects throughout the site, including the mobile menu, SVG mobile menu button, and other touches.   All site content is editable by the client through a customized Kirby backend. February–March 2017. View the live site here .

Venn Collective Site Implementation and Animation

Kirby CMS, PHP, Stylus, CSS Animation, SVG, Javascript, ScrollMagic, ScrollTrigger, other JS libraries, Sketch.

Responsive company site for Athens-based Venn Collective. I worked closely with designer Phil Goodwin and the rest of the Venn team to implement their vision for the site. Phil provided detailed Sketch mockups of each page, which I implemented as a responsive site on Kirby CMS, using PHP, Stylus, and Javascript.

I used ScrollMagic to create the effect of the red and blue circles coming together at the bottom of the page. There's a ScrollTrigger-based CSS animation for the sticky header. CSS animations create other effects throughout the site, including the mobile menu, SVG mobile menu button, and other touches.  

All site content is editable by the client through a customized Kirby backend.

February–March 2017.

View the live site here.

You're Too Show  Podcast and Art Photoshop, Reason. My friend Caleb Zane Huett and I do a podcast about Sonic the Hedgehog (mostly). I made this album art in Photoshop, and I record/edit the podcast in Reason. There's technically a web site, but it's just a Podcast Generator template, because hey: I make web sites all day for work. When I'm at home, I just want to podcast . Here's the iTunes feed , or you can search your favorite podcast app.

You're Too Show Podcast and Art

Photoshop, Reason.

My friend Caleb Zane Huett and I do a podcast about Sonic the Hedgehog (mostly). I made this album art in Photoshop, and I record/edit the podcast in Reason. There's technically a web site, but it's just a Podcast Generator template, because hey: I make web sites all day for work. When I'm at home, I just want to podcast.

Here's the iTunes feed, or you can search your favorite podcast app.

Every Day's Great  Podcast and Art Illustrator, Reason. My second podcast with friend and collaborator Caleb Zane Huett . This one's mostly about playing the Persona games by syncing up the real and game world calendars. Here's the iTunes feed , or you can search your favorite podcast app.

Every Day's Great Podcast and Art

Illustrator, Reason.

My second podcast with friend and collaborator Caleb Zane Huett. This one's mostly about playing the Persona games by syncing up the real and game world calendars.

Here's the iTunes feed, or you can search your favorite podcast app.

Felix Kramer  Portfolio & Blog Kirby CMS, anime.js, barba.js, Sketch, Stylus, Jade, Node Responsive personal site for video game producer Felix Kramer. Built on the excellent Kirby CMS , which I chose for its flat-file system and ease of client upkeep. Easily-maintained blog, portfolio, and other pages. Used Barba.js to progressively enhance page transitions, and anime.js to create subtle mood animations. View the live site here .

Felix Kramer Portfolio & Blog

Kirby CMS, anime.js, barba.js, Sketch, Stylus, Jade, Node

Responsive personal site for video game producer Felix Kramer. Built on the excellent Kirby CMS, which I chose for its flat-file system and ease of client upkeep. Easily-maintained blog, portfolio, and other pages. Used Barba.js to progressively enhance page transitions, and anime.js to create subtle mood animations.

View the live site here.

Caleb Zane Huett  Site Anime.js, Sketch, Pug, Stylus Responsive promotional site for middle grade author Caleb Zane Huett. We worked together to implement his vision of a site that he hoped would be a modern version of the "classically-bad website." The goal was to communicate his humor and warmth as succinctly as possible, while generating interest in his forthcoming book Top Elf.  (I've read early drafts; it's funny!) I used modern web animation techniques to evoke the sort of brokenness associated with late-90s personal sites. If it looks broken, we did it on purpose! There are things that happen when you click, text you can reveal by highlighting, and various other silly things. We laughed a lot while making this! View the live site here .

Caleb Zane Huett Site

Anime.js, Sketch, Pug, Stylus

Responsive promotional site for middle grade author Caleb Zane Huett. We worked together to implement his vision of a site that he hoped would be a modern version of the "classically-bad website." The goal was to communicate his humor and warmth as succinctly as possible, while generating interest in his forthcoming book Top Elf. (I've read early drafts; it's funny!) I used modern web animation techniques to evoke the sort of brokenness associated with late-90s personal sites. If it looks broken, we did it on purpose! There are things that happen when you click, text you can reveal by highlighting, and various other silly things. We laughed a lot while making this!

View the live site here.

Squire.co  Site Photoshop, Node.js, Jade, Stylus, Javascript. Responsive site for Squire.co. I'm working with the head of the company, Chris Dwyer, to gradually iterate on this portfolio of Squire's work. View the live site here .

Squire.co Site

Photoshop, Node.js, Jade, Stylus, Javascript.

Responsive site for Squire.co. I'm working with the head of the company, Chris Dwyer, to gradually iterate on this portfolio of Squire's work.

View the live site here.

Athens Game Jam 2015 Site Photoshop + Monodraw + Web In less than a week, I made this site and accompanying flyer for the annual Athens Game Jam. The coordinator of the Jam, Stephen Borden, gave me a week to make it. I said I would do it, but only if he gave me a prompt. The prompt he gave me was "floating islands." In the jam spirit, I tried out a bunch of new stuff. I'd never done anything with ASCII art or CSS Animation prior to this project. I was generously given access to the alpha version of Monodraw , an app for drawing ASCII art, which I put through its paces. Then I copied groups of characters into Photoshop, arranged and colored them, and then arranged those elements into a flyer and this site. When you scroll the page, it doesn't move  down , it moves things  around . My favorite part of the site is that, if you leave the page up for a couple of minutes, the elements begin to glitch out, which is all accomplished with CSS Animation and Transformations. Site made with Hammer.app, Sublime Text 2, HAML/SCSS, Javascript, Skrollr.js, and a subset of Zurb Foundation. View the site live here .

Athens Game Jam 2015 Site

Photoshop + Monodraw + Web

In less than a week, I made this site and accompanying flyer for the annual Athens Game Jam. The coordinator of the Jam, Stephen Borden, gave me a week to make it. I said I would do it, but only if he gave me a prompt. The prompt he gave me was "floating islands."

In the jam spirit, I tried out a bunch of new stuff. I'd never done anything with ASCII art or CSS Animation prior to this project. I was generously given access to the alpha version of Monodraw, an app for drawing ASCII art, which I put through its paces. Then I copied groups of characters into Photoshop, arranged and colored them, and then arranged those elements into a flyer and this site.

When you scroll the page, it doesn't move down, it moves things around. My favorite part of the site is that, if you leave the page up for a couple of minutes, the elements begin to glitch out, which is all accomplished with CSS Animation and Transformations.

Site made with Hammer.app, Sublime Text 2, HAML/SCSS, Javascript, Skrollr.js, and a subset of Zurb Foundation.

View the site live here.

Hot Corner Hip Hop / Lingua Franca EP Release Flyer Photoshop. Illustration by Erin Stacer. I designed and laid out the flyer for printing.

Hot Corner Hip Hop / Lingua Franca EP Release Flyer

Photoshop.

Illustration by Erin Stacer. I designed and laid out the flyer for printing.

Humble Store  OOTU Sidebar Vanilla Javascript Pure vanilla Javascript front-end for OOTU's Trait-based game recommendations on the Humble Store. I was given a <30kb gzipped target size, including data object payload, with no JS frameworks. I coded this in just a few days and came in well under the target. My code expands the JSON data object into HTML displayed on every Humble Store game page, as of December 2016. Includes expandable content areas and small animations. Back-end content and distribution was provided skillfully by Mike Huffman at OOTU. View an example live site here .

Humble Store OOTU Sidebar

Vanilla Javascript

Pure vanilla Javascript front-end for OOTU's Trait-based game recommendations on the Humble Store. I was given a <30kb gzipped target size, including data object payload, with no JS frameworks. I coded this in just a few days and came in well under the target. My code expands the JSON data object into HTML displayed on every Humble Store game page, as of December 2016. Includes expandable content areas and small animations.

Back-end content and distribution was provided skillfully by Mike Huffman at OOTU.

View an example live site here.

Real-Time Comments in React &nbsp;Exercise React, Javascript, HTML/CSS Responsive application test built in React. I coded this in a few days, with the goal of emulating Medium's highlighting &amp; commenting system. Far from perfect, but I started out knowing nothing about React, and learned a lot along the way. Highlight some text and add comments in real-time. I'm not moderating the comments very often, so apologies if anyone posts something rude!&nbsp;December 2015. View the project on Heroku .

Real-Time Comments in React Exercise

React, Javascript, HTML/CSS

Responsive application test built in React. I coded this in a few days, with the goal of emulating Medium's highlighting & commenting system. Far from perfect, but I started out knowing nothing about React, and learned a lot along the way. Highlight some text and add comments in real-time. I'm not moderating the comments very often, so apologies if anyone posts something rude! December 2015.

View the project on Heroku.

Miley Photoshop While listening to Miley Cyrus &amp; Her Dead Petz, I made this collage, then drew it, then combined them.

Miley

Photoshop

While listening to Miley Cyrus & Her Dead Petz, I made this collage, then drew it, then combined them.

Kaleidoscope Montessori Identity Photoshop, Illustrator. Logo and identity for a Montessori school in Athens, GA.&nbsp;Balancing organization and peace with a sense of fun and hands-on learning. Custom geometric pattern filled with hand-drawn colored pencil. Fall 2015.

Kaleidoscope Montessori Identity

Photoshop, Illustrator.

Logo and identity for a Montessori school in Athens, GA. Balancing organization and peace with a sense of fun and hands-on learning. Custom geometric pattern filled with hand-drawn colored pencil.

Fall 2015.

Web Design - Action Button Entertainment SublimeText 2 + HAML/SCSS + Hammer.app + ZURB Foundation One of several sites I hand-coded in 2013 for Action Button Entertainment. I&nbsp;designed zggrt.com &nbsp;to be fast, clear, and visually-striking, and to work well on all screen sizes. More information and images here .

Web Design - Action Button Entertainment

SublimeText 2 + HAML/SCSS + Hammer.app + ZURB Foundation

One of several sites I hand-coded in 2013 for Action Button Entertainment. I designed zggrt.com to be fast, clear, and visually-striking, and to work well on all screen sizes.

More information and images here.

Marshmallow Coast &nbsp;Flyer Photoshop, Illustrator.

Marshmallow Coast Flyer

Photoshop, Illustrator.

Logo - Joel Hatstat Audio Illustrator Working with my frequent collaborator Brent Blalock, we made this logo for Athens-based producer and audio engineer Joel Hatstat . More information and images from my collaborations with Brent .

Logo - Joel Hatstat Audio

Illustrator

Working with my frequent collaborator Brent Blalock, we made this logo for Athens-based producer and audio engineer Joel Hatstat.

More information and images from my collaborations with Brent.

Book Cover &amp; Interior Design - Maypop Books Photoshop + Illustrator + InDesign I've done a variety of jobs for Coleman Barks and his personal press, Maypop Books. This was a book written by Coleman's brother, Herbert, that I proofread, laid out, and designed inside and out. The book was printed by Thomson-Shore.&nbsp;Photograph by Jamie Walker. More information and images here .

Book Cover & Interior Design - Maypop Books

Photoshop + Illustrator + InDesign

I've done a variety of jobs for Coleman Barks and his personal press, Maypop Books. This was a book written by Coleman's brother, Herbert, that I proofread, laid out, and designed inside and out.

The book was printed by Thomson-Shore. Photograph by Jamie Walker.

More information and images here.

Album Cover - Mary's Good Side Photoshop I took this photograph, made some modifications in Photoshop, and laid out the text. For an album of improvised piano duets I made with my friend Alex Wharton. More information, images, and audio here .

Album Cover - Mary's Good Side

Photoshop

I took this photograph, made some modifications in Photoshop, and laid out the text. For an album of improvised piano duets I made with my friend Alex Wharton.

More information, images, and audio here.

Web and Print Design - PALS of Athens Musicians Illustrator + Web After designing the logo and preparing silkscreen images for their products, I put together this simple-but-effective web site to promote the organization and sell their goods. More information and pictures here .

Web and Print Design - PALS of Athens Musicians

Illustrator + Web

After designing the logo and preparing silkscreen images for their products, I put together this simple-but-effective web site to promote the organization and sell their goods.

More information and pictures here.

Logo - "Bird Shield" Wacom + Photoshop + Illustrator Proposal of a logo for a local business that I made with Brent Blalock. I'm not supposed to discuss the product itself, since it hasn't been made yet. We did several variations with background colors and type treatments, but this is the basic idea. I started with a reference photo of a woodpecker and a thumbnail sketch by Brent. Then I worked between Photoshop and Illustrator to create this silhouette, finding the iconic balance between abstraction and realism. More information and images from my collaborations with Brent .

Logo - "Bird Shield"

Wacom + Photoshop + Illustrator

Proposal of a logo for a local business that I made with Brent Blalock. I'm not supposed to discuss the product itself, since it hasn't been made yet. We did several variations with background colors and type treatments, but this is the basic idea.

I started with a reference photo of a woodpecker and a thumbnail sketch by Brent. Then I worked between Photoshop and Illustrator to create this silhouette, finding the iconic balance between abstraction and realism.

More information and images from my collaborations with Brent.

Avid Bookshop - "An Evening With Mark Z. Danielewski" Ticket Illustrator &amp; Photoshop. On May 18, 2015, Avid Bookshop hosted author Mark Z. Danielewski at the incredible Stan Mullins Art Studio . We sold tickets to the event, and wanted something special. I replicated elements from&nbsp; The Familiar 's cover and interior to create a ticket aesthetically consistent with the book. It also includes a few visual references to Danielewski's earlier books. The ticket was a big hit with attendees, many of whom said it would be a keepsake for their scrapbooks

Avid Bookshop - "An Evening With Mark Z. Danielewski" Ticket

Illustrator & Photoshop.

On May 18, 2015, Avid Bookshop hosted author Mark Z. Danielewski at the incredible Stan Mullins Art Studio. We sold tickets to the event, and wanted something special. I replicated elements from The Familiar's cover and interior to create a ticket aesthetically consistent with the book. It also includes a few visual references to Danielewski's earlier books. The ticket was a big hit with attendees, many of whom said it would be a keepsake for their scrapbooks

Avid Bookshop - "She Is Fierce" T-Shirt Illustrator. In one afternoon, I iterated on a basic idea by the designers at Satisfactory to design this shirt for Avid Bookshop's limited edition Independent Bookstore Day 2015 T-shirt.

Avid Bookshop - "She Is Fierce" T-Shirt

Illustrator.

In one afternoon, I iterated on a basic idea by the designers at Satisfactory to design this shirt for Avid Bookshop's limited edition Independent Bookstore Day 2015 T-shirt.