I decided to host this on gh-pages instead of code pen as I enjoy working with this quite a bit more. I built this using raw CSS and HTML alongside jQuery for the fade in effect. My goal was to complete this with as little use of a framework as possible. Though because I do not know much Javascript, I stuck with pre-defined functions from the jQuery library
I would just make the long story shorter. From UX point of view, at least for me, its too much scroll down to reveal the timeline. I like the “lazy loading” you have used with that fade in animation.
You absolutely need to add a static button on the right side that takes you back to the top. You should also create header and footer areas. I would also make the text a little smaller.
I just thought I’d mention that when viewed in Firefox, Edge and Internet Explorer 11 (at least on my PC), your fade-in effect appears to have something of an issue when the page is scrolled quickly, where instead of each timeline div fading into view, they flicker/flash into view prior to fading in. And this doesn’t seem to happen in Chrome.
I wish I had a better suggestion as to a solution (I’m just learning the ropes myself), but what appears to be happening is that when you scroll down quickly, each div momentarily appears with an opacity value of 1 instead of 0, before being set back to 0, then fading up to 1 again.
As for all the other changes, if people are still interested I’ve implemented all of the feedback so far, hopefully Thanks again to everyone who gave their comments and feedback