This one page "scrollytelling" story was created for a group project in a digital storytelling course. It uses HTML, CSS, and JavaScript, along with a handful of embeds and videos, to tell the story of the Boston Seaport — the city's trendiest and most inaccessible neighborhood.
Project Style Guide
View of the Tobin Memorial Bridge from the dock
View of the Tobin Memorial Bridge from the dock
Downtown skyline viewed from the seaport
Downtown skyline viewed from the seaport
Looking out over the harbor from the ICA deck
Looking out over the harbor from the ICA deck
The Institute for Contemporary Art
The Institute for Contemporary Art
Boston Convention and Exhibition Center
Boston Convention and Exhibition Center
Boston Convention and Exhibition Center
Boston Convention and Exhibition Center
Boston Convention and Exhibition Center Main Entrance
Boston Convention and Exhibition Center Main Entrance
Photographs

Video shot by me and edited by Danae Bucci

Video

Two charts representing the average cost of meals at restaurants in the Seaport District.

Restaurant Data
See the full project, including interactive content by Erica Yee, Danae Bucci, and Jasmine Wu here.
Graphic design in Adobe Illustrator.

Photos and video shot on Canon T5i with DJI Ronin stabilizer and iPhone 8 with mobile stabilizer.
#f1Photos edited Adobe Lightroom.
Video edited in Adobe Premiere Pro.

Data visualization created in Tableau.
Other interactives created with JavaScript and JSON.

Code written in Atom text editor.
Project published with Github Pages.
Back to Top