Life is a simple event timeline of events important to your life. This repository is a fork of the original repository with a few updates.

You can have a look at the new life timeline here https://life-public.vercel.app/.

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

See Vite Configuration Reference.

npm install --legacy-peer-deps

npm run dev

npm run build

• 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

• Event filtering
• Personal avatar (because why not)
• Hashtags to help clasiffy your events (optional)
• Notes to add that extra bit of info (optional)
• Vue.js + Vite for a single HTML page design

1. Fork this project.
2. Write code.
3. Make pull requests.

1. Fork this project.
2. Add your life events into life.md.
3. Preview it on a local server. Use python -m http.server or http-server.
4. Commit life.md.
5. Tell the world about your Life.

Head on over to src/assets/life.config.json. There you'll find the following configurable variables:

• avatarURL - (string, default to null) Path to avatar.
• showAge - (boolean, default to true) Option to show age within the year axis.
• yearLength - (number, default to 120) The width of the year grids, in pixels.

• 2000 - event that happen in that year
• 01/2000 - event that happen in that month/year
• 01/01/2000 - event that happen exactly in that day/month/year
• 2001-2005, 10/2001-02/03/2005 - event that happen within the two dates
• ~2005 - event that happen around the time in that year
• 2005-~ - event that happen from that year and beyond (now).

Tags can be added to each event. Simple start each tag with a #. They will be automatically parsed up and added to the timeline.

Notes can be added to each event. Simple enclose the note within curly braces {}. They will be automatically parsed and added to the timeline as a tooltip.

• Cleanup of JavaScript file
• Replace CSS file with Tailwind CSS
• Avatar
• Better way to visualise links inside events
• Event filtering / search by title or tag
• Event notes

MIT