http://resin.io/happy-18th-birthday-javascript/ captures the timeline of JavaScript. And i felt it apt to build a visual timeline using JavaScript. So i brought http://resin.io/happy-18th-birthday-javascript/ and used Life (https://github.com/cheeaun/life) to map it out.
This is something that I've wanted to build for a long time. It's a timeline of important events in my life, visualized in a way my mind always imagine it. There was something called Lifepath.me but now it's gone. How about Facebook timeline? Meh.
So, this is it. Have a look at cheeaun.github.io/life.
- Super simple
- No fancy formatting
- No fancy setup
- No fancy effects
- Flexible datetimes because sometimes you don't remember the exact date of an event
- Fork this project.
- Write code.
- Make pull requests.
- Fork this project.
git checkout -b gh-pages
(or any branch name you like)- Make a copy of
life.example.md
, rename it tolife.md
. - Add your life events into
life.md
. - Preview it on a local server. Use
python -m SimpleHTTPServer
orhttp-server
. - Commit
life.md
(not inmaster
branch). git push origin gh-pages -f
and publish to GitHub Pages.- Update the website link in your GitHub repo description.
- Tell the world about your Life.
- Add your Life to the Lives page.
git checkout master
git remote add cheeaun https://github.com/cheeaun/life.git
git fetch cheeaun
andgit merge cheeaun/master
to upgrade to latest Life.git checkout gh-pages
andgit merge master
to sync changes back to GitHub Pages.
For those who forked the earlier version of Life, these are the steps that I would recommend (requires some Git-fu):
- Backup your
life.md
. - Reset (hard) your fork to this repo's
master
branch. - Clean up your
gh-pages
. - Re-commit your
life.md
there. - Make sure your
master
branch is untouched so that future updates work.
- Make a copy of
config.example.json
, rename it toconfig.json
. - Only commit it in
gh-pages
branch.
The configuration:
customStylesheetURL
- (string, default tonull
) Path to a custom stylesheet file, for those who doesn't like the default theme.yearLength
- (number, default to120
) The width of the year grids, in pixels.hideAge
- (boolean, default tofalse
) Option to hide age from year axis.
2000
- event that happen in that year01/2000
- event that happen in that month/year01/01/2000
- event that happen exactly in that day/month/year2001-2005
,10/2001-02/03/2005
- event that happen within the two dates~2005
- event that happen around the time in that year2005-~
- event that happen from that year and beyond (now).
Here's a compilation of Lives from the people who has forked Life.