Code Exploration

HTML CSS JQuery


These are a few of my projects and experiments with interactivity on the web.

Follow my code adventures on Codepen
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

Icefin's Deep Dive

This graphic was featured in Georgia Tech's 2020 President's Annual Report. Georgia Tech's arctic diving robot, Icefin, had made an expedition to the arctic seabed. To demonstrate the great depths reached by the robot, I built this graphic which shows Icefin diving past familiar local landmarks. After building this demo, I adapted it for Drupal 8.

Tools Used:

  • CSS
  • JQuery
screenshot of interactive graphic about a diving robot
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