Florence

View the Site View the Repo

 

Florence is your personal guide to medical adherence. This project took an existing internal design and gave me the opportunity to build it out into an interactive single-page marketing site. I used this project to build my skills writing vanilla JavaScript and custom animating UI elements. The majority of animations are performed with CSS transitions and transforms.

 

This project introduced me to the professional code review process. I submitted daily pull requests for review by full-time front-end developers at Viget. I also learned the modular approach to writing scripts: elements are targeted by a data-module attribute and scripts are run from JavaScript classes. For example, the site navigation bar (termed “pillbar”) is set to data-module = "pillbar". The scripts that act upon the element are located in javascripts/modules/pillbar.js and inside a Pillbar class.

 

One exciting discovery I made while working on this piece is that it is possible to transition an SVG path using CSS alone. I’ve found so far that this functionality is only supported in Chrome. If you view the site in Chrome, the cape on the Florence icon above “Introducing Florence” waves slightly as if in the breeze. #progressiveenhancement