Code Exploration

HTML CSS JQuery


I love to investigate and experiment with interactivity on the web. These are a few of my experiments.

Follow my code adventures on Codepen
coral reefs interactive map

The World's Coral Reefs

Proposal for an interactive world map showing major coral reefs. Information about each reef is revealed when the reef is selected on the map.

Tools Used:

  • CSS
  • JQuery

Long-scrolling Holiday Greeting

Using jQuery transit to leverage CSS transitions on scroll. Contains audio.

Tools Used:

  • CSS
  • JQuery
  • JQuery transit library
holiday greeting interactive thumb
holiday greeting interactive thumb
narrative content UX demo
narrative content UX demo
narrative content UX demo

Narrative Navigation

A demo of a long-scrolling narrative presentation with panels that link to long-form versions of each panel's content. The vertical panel transition is slide-like, activated by button or scroll.

Image credit: NASA

Tools Used:

  • CSS
  • JQuery
  • Scrollify.js
  • Smooth scroll for anchor links (js)
  • Slider.js

Tech Square Map

An interactive map showing some major structures around Tech Square and listing which technology companies, startups, and academic entities are housed there.

Tools Used:

  • CSS
  • JQuery
tech square map
holiday game interactive thumb

Interactive Holiday Game

A holiday greeting featuring three build-your-own features: a tacky holiday sweater, a snowman, and a snowglobe.

Tools Used:

  • CSS
  • Adobe Edge Animate
  • JQuery
  • JQuery UI

My Pet Tardigrade

Just for fun. I have a fantasy of keeping a tardigrade as a pet. I decided to create a virtual Tardipal.

Tools Used:

  • CSS
  • JQuery
  • mousefollow.js
interactive petri dish tardigrade
virtual campus visit screenshot
virtual campus visit screenshot

Virtual Visit

The global pandemic prevented newly admitted college students from visiting Georgia Tech's Campus. The goal of this landing page was to present some options for those students to get a feel for campus. A multi-layered paralax header was used to give emotional impact. The paralax effect is triggered on scroll to give the feel of flying over campus.

Tools Used:

  • CSS
  • JQuery