Jeselle Obina

Working with Jeselle was markedly different from my other freelance projects. Not only did she know exactly what she wanted, she also had some prior coding knowledge and had collaborated with me on projects prior to her site redesign.

Jeselle’s design was fairly straightforward in theory - a full-screen project slider with a cropped hero image and header text. When the viewer clicked on the hero image, it would expand and become the project page. Getting the visual aspect of expanding right with only CSS was tricky, but it was something we both wanted to accomplish.

The key was to include the full project on the homepage and use the CSS property clip-path to crop the hero image to the appropriate size. When the hero is clicked, I animate clip-path and append the rest of the project information, thereby "opening" the project.

I used David DeSandro’s Flickity library to create the slideshow effect. Flickity is great not only because of its easy-to-use slider, but also its inclusion of draggable slides and smooth "flick" motion when swiping on mobile. When a slide is "flicked", I close the previous project and bind the opening animation of the current slide to Flickity.

The last part of the equation for the homepage was the navigation. We needed a multilayer menu that would show two types of pages (projects and standalone pages) as well as serve two purposes (activate Flickity on the home page and navigate to a different part of the site on a project page). I designed a menu with animation powered by a couple of <input type="checkbox"/> elements and the ~ general tilde selector.

Because the menu doesn’t open the actual project page, clicking on the hero also activates pushState() and changes the URL to the project page - if the browser needs to refresh for any reason, the person viewing will be right where they left off instead of back to the main portfolio page.

In addition, I also set up utility classes for Jeselle so that she could continue to update her website on her own. These included formatting for grids, default colors, text styles, and visual patterns such as the boxy bordered links. I also took the unique styles she created for each project and created class styles she could use in any future work.