Web

Timeline Board

Gantt board that keeps every project phase and deadline visible.

Live demo

Interactive

The real interface, running right here — click, filter, drag and page through it.

Sample data only — every name, figure and record here is invented for the demo, and nothing talks to a backend. Every entry in the sidebar opens a working screen. On a phone, swipe the panel sideways.

A planning board for an agency running several client projects at once: every project is a row, every phase a bar, and the whole book of work fits on one screen.

The timeline is real rather than decorative — phases are stored as dates, the eight-week window pages forward and back, bars clip at the edges, and the today line sits where today actually falls.

Key Features

  • Eight-week Gantt window that pages by week, with a live today marker.
  • Phases per project, each with its own colour band and duration.
  • Row-level project health: On Track, At Risk, Overdue.
  • Timeline / List toggle — the same data as a phase table.
  • Status legend that doubles as a filter.
  • Client and project labels pinned beside the timeline.

Technology

  • Angular 20
  • Signals
  • CSS Grid timeline
  • date maths