Plans and Pens for notlaura.com v3

Posted August 18, 2017 in Tutorials+Tips, Updates


There are a lot of fun technologies that have matured since I took my ski-bum sabbatical over the winter, and I am doing my best to bring my skills back up to speed. They weren’t all that far behind, but given my newfound motivation and availability for side projects, I’m really excited to delve into new stuff for notlaura.com v3. I’ve been whipping up a few Pens to test out different features for this storytelling mission.

My plan is to have a set of panels on the homepage, each outlining an important point in my so-called developer journey. I want it to feel like I am telling a reader my story. Here’s how I’m planning to do that:

Animated Panels and Content / Stoked on Grid

Since “Content is King Leader”, I started my process with that before getting into too much design or development detail. This is a rough outline of the panel copy, structure, and how I’d like the animations to build in (GreenSock for the win!).

See the Pen notlaura.com re-do ideas by Lara Schenck (@laras126) on CodePen.

Also, CSS Grid is one of the more exciting developments since sliced bread, so I will be doubling down on that! This article helped me get started.

Typed.js

Typing effects have been somewhat on trend for the last couple of years, mostly in a salesy context, or on portfolio sites to add multi-dimensionality to a person’s role. It looks like the plugin Typed.js by Matt Boldt is responsible for this effect in most cases.

Rather than typing out a single word or phrase though, I want to use the plugin to type out each panel as it comes into view, sort of like a chat room. Using my newfound JavaScript know-how, I made a Pen of just that!

See the Pen Iterating over elements with Typed.js by Lara Schenck (@laras126) on CodePen.

Illustrations, specifically Llamas

I grew up on a llama farm. Although it was a source of mortification in my high school years, revealing this information seems to yield positive results in my adult life, so I aim to capitalize on it. Here is a sweet llama illustration/animation that will manifest somewhere on the homepage of notlaura.com v3:

See the Pen Llama chewing its cud by Lara Schenck (@laras126) on CodePen.

Bye-bye Museo

You know that feeling when all of a sudden you can’t stand the typeface you’ve committed to all over the place? It’s been a long time coming, to be honest. Museo Sans and Slab have served me well for several years and for that I thank them, but a typographic refresh is past due.

Comments

What do you think? Do you have any questions, thoughts, or related links to share? Did I make a mistake in my post?

Submit a Comment

Pssst...developer note: This is the most basic comment implentation you can possibly imagine, and it's on my list to flesh it out. But...I'm not using Disqus anymore, so that's cool! 👍