PortlifeJS

A sleek, fast, and easy-to-integrate timeline library for the modern web. Inspired by TimelineJS3 but built with modern tooling and performance in mind.

Why PortlifeJS?

• Sleek: Modern, responsive design out of the box with smooth animations.
• Fast: Built with Preact and Vite for minimal bundle size and maximum performance.
• Easy to Integrate: Drop it into any HTML page or integrate with backend frameworks like Flask effortlessly.

Technology Stack

I chose Preact for this project for the following reasons:

1. Lightweight: Preact is a 3kb alternative to React with the same modern API. This ensures the library loads instantly even on slow connections.
2. Compatibility: It allows using the vast React ecosystem if needed.
3. Performance: It has a tiny memory footprint and efficient rendering.
4. Vite: Used for lightning-fast development and optimized production builds.

Installation

Using CDN (Recommended for simple usage)

Include the CSS and JS files in your HTML:

<link rel="stylesheet" href="https://your-cdn.com/portlife.css">
<script src="https://your-cdn.com/portlife.umd.js"></script>

NPM

npm install portlife-js

Usage

Basic Usage

Create a container element and initialize Portlife with your configuration.

<div id="timeline-embed" style="width: 100%; height: 600px;"></div>

<script>
  new Portlife('timeline-embed', {
    "title": {
        "text": {
          "headline": "My Awesome Life",
          "text": "A journey through time"
        }
    },
    "events": [
      {
        "start_date": {
          "year": "2023",
          "month": "01"
        },
        "text": {
          "headline": "Project Started",
          "text": "Started working on PortlifeJS"
        },
        "media": {
          "url": "https://picsum.photos/600/400",
          "caption": "Coding session"
        }
      }
    ]
  });
</script>

Loading from a URL (Flask Integration)

You can pass a URL to a JSON endpoint instead of the object directly. This is perfect for integrating with backends like Flask.

new Portlife('timeline-embed', '/api/timeline-data');

Flask Example:

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/timeline-data')
def get_timeline():
    data = {
        "title": { ... },
        "events": [ ... ]
    }
    return jsonify(data)

Development

1. Clone the repo
2. Install dependencies: npm install
3. Start dev server: npm run dev
4. Build for production: npm run build

License

MIT