Finding Leah is a personal site for a creative copywriter. I created it with the intent of trying out a new blogging service called Postachio and ended up establishing an entire brand identity for her. I used simple CSS3 animations and transitions to keep the site lively and interesting.
I have known Leah for over 3 years in and I was really excited for the opportunity to design a professional web presence for such a creative person. 
I started out thinking about a newer take to the usual landing page design. I wanted to make it an enjoyable, single-page experience with all the fun CSS features used effectively.
My first stage of prototyping is usually text-based because the content is usually what leads the design of these sites, especially for a creative writer. This way I can quickly iterate on things like titles and headings and still have a basic idea of the layout. Normal wireframes would not work for this site because the layout is so unique, so using text also makes the user-flows easier to prototype in the same area. Of course, I like to add some basic UI elements with my minimal hand-drawing skills to give the client some idea of what surrounds the content.
The next stage of my process usually goes into a basic high-fidelity Sketch screen so get a basic feel for colors, typography, and graphic elements that will end up being exported as images. 
The blue in general is a preference of Leah and going with the shade of "Sky Blue" follows the cloud theming, which is derived from Leah's tendency to have her head in the clouds when dreaming with new stories and ideas. The white was matched to the clouds and had a great contrast with that shade of blue in the background, as well as the complementary dark gray color for the secondary text elements. The cloud graphics ended up being exported as the Retina-ready PNGs so they look clean everywhere but that meant exporting the drop-shadow with them; the next update to the site's design will replace those PNGs with inline-SVGs so the image size is reduced and the drop-shadow can be generated by CSS.
Building out the basic HTML and CSS for the site was a fairly quick process because there are very few elements on page and the layout was very simple. The biggest implementation for the site was all the CSS animations that went into giving the site more life than a website with static content and some clouds would normally have. Animations are perfect for that purpose as well as giving context to the user about where new content was coming from, i.e. modal boxes. 
I created these custom css modals for Leah's résumé and writing samples to match them to the theme of the site rather than using Bootstrap modals or a JQuery plugin. It was a new challenge for me to design and implement such a feature that was intuitive for the user of the site to navigate. For organizing the content within the modals, I drew inspiration from the card-style UI Google uses for so many of its applications. It is a simple and direct way of separating content for the visitor to parse quickly and easily.
Finally, I was planning on linking Leah's time-traveler cloud to a new blogging platform called Postachio for her to share short stories through the ease of Evernote, but it was not what she wanted for the time being. 
So instead, we decided to share her "Books I've Read" board on Pinterest, with each pin containing a short, personal review of the story. It still reflected her adventures through reading while showing off a small bit of her writing ability.
Overall, it took about a week to complete this project with plans to iterate upon its functionality and design at some point in the future. It taught me a lot about constraining content into smaller chunks around a site, as well as controlling user flows with CSS and a dash of JavaScript. There is room for refinement within the code, looking back, but Leah is still happy to share the site with any of her future employers and colleagues.