{"html":"<h1 id=\"pageTitle\" data-x=\"50\" data-y=\"70\" data-fontSize=\"45\" data-gap=\"2\" data-size=\"2\">Set Apart</h1><section class=\"container mt-3\"><div class=\"panel details\"><div class=\"w-100 mx-auto\"><div class=\"details-links row w-100 mx-auto p-0 position-relative\"><a class=\"col-6 me-auto text-start ps-0 p-md-0 view-site effect-tilt\" href=\"https://www.gfa.org/setapart/\" target=\"_blank\"><div class=\"button\"><span>View Live Site</span></div><span class=\"shadow\"></span></a></div><hr/><div class=\"details-img\"><figure class=\"m-0\"><img src=\"https://res.cloudinary.com/nrjohnson-cloud/image/upload/v1706141418/portfolio/projects/Set_Apart_axtlmc.png\" alt=\"NRJohnson - Set Apart\"/></figure></div><p>This webpage was created to promote GFA World's Set Apart retreat that's held once a year. I was asked to develop it to replace the preexisting page.</p><p>It is the first project I've done from mock ups. I really enjoyed the challenge of implementing someone else's vision as well as the freedom to focus on the technical side of things and not have to worry about fleshing out the look and feel.</p><h4>Special Features</h4><p>I used the YouTube Player API to handle the videos. Some special functionality was requested, particularly in the \"How Others Were Impacted\" section. Each of the three videos expands to fill the space when playing, and shrinks back down when paused or finished. I needed to keep the look of the video players after they were interacted with while maintaining functionality. This required writing some custom JavaScript to remember the playtime when a video was paused so it could be continued when interacted with again.</p><p>One of the features they wanted was some text that scrolled with the view port but changes as it moves into another background photo. I did this using clipping masks.</p><p>They also wanted a text effect on a few of the section headers. The text begins scattered, then converges together when the view port scrolls to a particular point. The effect is reversed when scrolling back up. This was done using mostly CSS but JavaScript is used to handle classes.</p></div></div></section>"}