Project Highlights

Practice makes perfect – my skillset covers an ever-expanding list of fields, roles and technologies.

The best way to keep on top of this growing list of emerging digital storytelling techniques and platforms is to keep learning and practicing, refining and expanding.

Here are some interesting interactive experiments along those lines.

  • CSS Grid: Print-To-Web Experiments

    To get better acquainted with it, I started some print-to-web experiments. Each item is a different design approach highlighting my different skill sets and aptitudes. The last is a statistical series which I can imagine playing on subway station kiosks or bus shelters.

  • Interactive Genealogy Museum

    What is the Second Biggest Hobby in America? You guessed it – genealogy. And family history sites are the second most visited category of websites on the Internet. Just about the hardest part of modern-day genealogy is securely preserving, organizing and presenting huge amounts of sundry ancestral findings to far-flung descendants. That’s what motivated me to […]

  • Interactive Story Map: Family Burial Plots

    Here is a co-mingling of genealogy, design, development and data: an interactive tour through family burial plots at Mt. Olivet Cemetery in Washington, DC.

  • Frame By Frame Animation

    Using “frame” as a metaphor for the relationship between sequence and simultaneity, Frame-By-Frame Animation (an undergraduate course I designed and teach at George Washington University) delivers insight into the ongoing evolution of animated content as well as hands-on experience exploring time-based projects based on physical, digital & web media. Focusing on the animation, stop-motion and time-lapse […]

  • Interactive Deep-Zoom Image (DZI) Batch Image Processor and Gallery

    I recently built a custom PHP- and mySQL-based WordPress automation system for batch image processing and deep-zoom image creation (DZI). Click here to see it in action.
    Using open-source JavaScript libraries in the front-end to guide visitors on a pleasing journey through the thousands of images in the collections, this responsive solution also simultaneously automates custom SQL INSERT statements, adding 1,000s of hi-resolution TIF & JPG image records to a database all at once.

  • Gonzaga College High School Archives

    I was part of a select team granted access to the archives of Gonzaga College High School in Washington DC, to organize and evaluate the school’s large and historic collections and artifacts. Dating to 1821, the archives include relics and remnants of Gonzaga, Notre Dame Academy, St. Aloysius Parish, the Swampoodle and Sursum Corda neighborhoods and old Washington DC before, during and after the Civil War.

  • Design, Content Portability & the Information Hierarchy

    There are many ways to say the same thing. I designed and coded these examples for my students to demonstrate the idea of “portability of content”, to get them thinking about the information hierarchy and simultaneous uses of data in layout design. For each design, there are the same 7 sections in the information hierarchy. The HTML in each of these designs is 100% the same – all that changes is the CSS.

  • Interactive Temporal Map, Family Journeys, 1730 – 1960

    Part of a multimedia genealogy project, this interactive temporal map shows residence and migration patterns of ancestors from Europe in the 1730s to America starting in the 1820s.

  • Interactive Map: Ireland 1850 Census > Family Households by Parish

    This interactive map shows where people of specific surnames lived in Ireland in the 19th century, according to parish records. I scraped a static dataset from the Irish Times website, and built a much more interesting way to view the same information, with additional insights provided by clustering of semi-opaque colored markers. The dataset has 4 pieces of information: latitude, longitude, name of parish and number of family surnames in that parish.

  • Interactive MP3 Player With Animated SVG Kaleidoscopic Logo

    I digitized my great-grandfather’s 78rpm Victrola records dating back a hundred years or more. I then built this HTML5 mp3 player combining CSS3 transformations & custom JavaScript to create a beautiful experimental kaleidoscopic SVG-animated logo.

  • Interactive: Image Gallery Photowall

    Inspired by the fireflies in my backyard, this experimental responsive gallery uses JavaScript; AJAX & Bootstrap to serve up samples of my photography. Picture this as a very large horizontal or vertical interactive screen, with all content animating in the DOM, where you can filter and interact with it.

  • Interactive Genealogy Exhibition & Archives

    This is a feature-rich genealogy framework w/interactive family trees; digital maps; galleries; timelines; 8mm home movies; restored 78s; census records; manifests; detailed research, and much more. This high-end secure CMS solution uses the latest and greatest, scales to any size (screen, data-set and audience) and is entertaining and educational.

  • JavaScript Count-Down Timer with Full Page Map

    Happy 150th Birthday, Cornelius J. Carmody!My great grandfather had his sesquicentennial birthday recently, so I whipped up this interactive prototype as part of my genealogy museum project. It features Javascript, PHP, mySQL, CSS3 and Google Maps APIv3.

  • Interactive Rubik’s Cube: Maps of Old Washington DC

    I used a collection of old maps of Washington DC for this Rubiks Cube code experiment from Google Chrome Labs. It would seem to make the game exponentially harder, especially if one does not know old Washington DC.

  • Interactive Map Tour of Tenleytown, DC

    This interactive map tour through historic Tenleytown in Washington, DC uses ESRI and ArcGIS to serve up a responsive, educational map of razed residences and stores.

  • HTML5 JS Animation w/Greensock GSAP + CSS3 Transforms

    This 30-second animation uses a suite of animation tools + custom scripting to tell a story with dynamic database-driven content. This uses JavaScript, Greensock GSAP, CSS3, PHP, mySQL, jQuery UI and HTML5. No Flash.

  • Introduction to Obsolete Media

    Intro to a lecture for an Art History class I taught at the Corcoran College of Art + Design: Digital Media Culture. I put together coverage of the 1937 Hindenburg disaster using obsolete media to fuel the discussion: “How will we communicate 75 years from now? To what extent will contemporary modern media be extant then?”

  • Audio Wave-Form Animation

    It can be a real pain to get live wave forms in a multimedia project. Creative custom programming, however, simplifies things quite a bit. For this project highlighting the music I’ve written and performed over the years, I used Adobe After Effects + Flash ActionScript3 programming to create the live wave form animations. This song and the others on this site all use this function.

  • Print to Web Experiments: Future-Proof Solutions

    A big part of teaching emergent communication (and programming) to college design majors is getting the students comfortable with the new paradigm that virtually all future design will be executed by code. They have to learn basic programming skills at the very least to be competitive. These screenshots are from work I designed and executed for class lectures toward that end: I took print ads, album covers and book covers and reproduced them with HTML5, jQuery and CSS3. Then the students created their own fully-coded versions, recycling dying media into future-proof solutions.

  • How To Watch Sound

    I remixed & animated this classic rock song for one of the New Media Photojournalism graduate classes I taught at the Corcoran College of Art + Design. The idea was to introduce people to observing sound with their eyes, not their ears.