Timewoven: Backstory Code
Tada! My best work yet! This code might not look like much, but I'm extremely proud of it, not least because I changed directions halfway through on how to code it, and had to revamp the whole thing.
It's a backstory code in the form of a vertical timeline, more for people who want to showcase multiple events rather than describe the character's life in long paragraphs. The backstory starts on a simple name/image page, but as you scroll, a spine appears, with cards (events) appearing to either side.
The main aspect of this code is the ease of editing though. A few variables in the beginning of the code, and you can change everything from font to layout to colours.
Each event is assigned its own theme (which are, again, defined at the very top)
The themes decide the card's colour, and the colour of the part of the spine it corresponds to.
Since the cards aren't directly connected to the spine, coloured circles correspond to the card's place on the timeline, with an icon inside.
Hovering makes the card and its corresponding icon-circle to glow, so its easy to tell which icon belongs to which card.
The cards have options for titles, subtitles, dates, and participant orbs.
Participant orbs are little circular images at the bottom of the card that showcase people that particular event may have involved or been connected to. They can be turned into links, should someone wish to link them to user profiles.
Please don't steal my credits, but go ahead an add your own! I would also love to see any versions anyone makes!
Since I particularly wanted to display the flexibility of the design, I've made two versions, both linked below.
Codepen: Timewoven Cloud Nine Code
Codepen: Timewoven Glitch Code