This Portfolio!

Based on an ingenious creation by Paul Hayes.

Navigate using arrow keys, touchscreen, trackpad or mouse. Try giving the cubes a spin, or rotating your device!

From the Original Documentation

Learn how to make a cube.

“A 3D cube can be created solely in CSS, with all six faces.”

Here's an article explaining the cubes.

3D cubes use webkit-perspective and webkit-transform. Rotation via webkit-transition.

My Own Contributions

I encapsulated all of Hayes' javascript into reusable functions, then iterated over them as needed in order to support multiple cubes onscreen.

I changed the y-axis behavior of the cubes from rotation to translation, to enable "scrolling" of the cube column. I also added scrollwheel support via a jQuery plugin, some rudimentary accessibility support, and a bit of ES6 syntax sugar. Finally, I made the entire project responsive

Angular CMS app

Worked on a CMS app made in Angular, using Bootstrap with atomic design principles and in compliance with Section 508 accessibility standards.

Built several unique features including dockable modals, and spearheaded atomic design strategy with integrated style guide, components library, and visual regression testing suite.

Architecture & Workflow

We began with Angular 1.6. As we built our app, we focused on creating reusable services and factories, and relying less on more restrictive controllers; we migrated to 2.0-compatible components later on.

Our front-end workflow included a self-imposed rule to add any new elements to our style guide and component library first, and using them for testing purposes and 508 compliance. Only afterwards did we add any new front-end code to the app itself. This kept our code agile in a very organic manner.

Agile Process

Our team's agile development process was enhanced greatly by a company-sponsored event run by Lance Dacy (thanks, Lance!).

Tech debt sprints were integrated into our process, allowing our code to stay polished. We managed to avoid having any skeletons in our closet when it came time to show off our codebase. This was also crucial to maintaining our atomic design discipline.

Atomic Design

In creating our UI/UX codebase, we were influenced greatly by atomic design principles. We broke down every element into the smallest possible chunks of code, then built them back up as context-free as possible.

This technique allowed us to build a library of pieces we could reuse across the app to assemble our more complex components, while keeping our CSS small and maintainable. It also made testing for 508 compliance much easier, as most of the atomic parts' compliance scaled up into the larger components regardless of how we combined them.

Misc. Work

Senior Care Facility Quality Tool

Development experience from 4+ years.
Above: Screenshot from a Senior Care Facility Quality Tool, 3rd Prize winner of the 2013 DC Tech Hackathon Presented by Dun & Bradstreet.

Responsive Design Work

Designed various responsive emails with variable pixel-density image handling.

Designed a site for use in conjunction with Chromecast devices, intended for large-format viewing on TV screens.

Built a Flash app in Flex Builder that could dynamically scale its contents, using the same techniques applied by responsive websites.

API Work

Various uses of social media APIs, including Twitter, Facebook, Pinterest, and LinkedIn.

Various uses of Google Maps API functionality for interactive data rendering.

Various uses of THOMAS and congress.gov API functionality.

Various uses of multimedia APIs, including Flickr and YouTube (see Manna Manna, above).

I've Got Plenty of War Stories

Here's what I look like!

Ask me about them!