What Even is a Professional?

The Aim

This page implements an effect you could call scroll-driven storytelling. Specifically, my goal was to sync a static image in a column with a series of freely scrolling browser height text slides on the right.

Initially I set out to implement the effect entirely with CSS only. I had some moderate success but to really sell the effect I chose to use a small amount of JS to mark slides as active.

The final problem to solve was how this could be made fully responsive. On mobile we switch to a single column layout, place the image into the background, as a textbox scrolls up the screen over the top:

The Content

The content is a somewhat tongue in cheek look at a TedTalk. Examining what professionalism means to me in the web development world.

I chose to keep the visual style very simple. No distractions keeps the focus on the text and image pairs.

Finally, to add a little extra energy a few animations are sprinkled in to give each part some character.