Timeline Sketch #2

Full size view of the timeline .

I am still kicking around ideas for a timeline of my work history. You can see some of the other stuff in this post.

This version is a Bootstrap version that I think can end up working pretty well even in a mobile view with a bit more work. You can see it full size here.

Full size view of the timeline .

It’s set up so that there are two col-sm-6 containers that hold ten columns each making for a total of 20 covered years. I didn’t realize Bootstrap would let you just do col-1 and make it more than 12 columns.

So I have two rows of 10 columns within the 6 column ‘halves’ of the page. That lets them break nicely on mobile views into two rows that stack.

Mobile view of the timeline.

I set up some JSON to represent the jobs. I only did three so far but there are enough to see it’s functional. If you click on one of the first three job titles, you’ll see the data below the timeline changes. I haven’t really worked through the colors. I’m letting it marinate to see if I want to take it to fruition.

See the Pen bootstrap timeline test by Tom (@twwoodward) on CodePen.