Work History Timeline
Display professional experience across years with colored segments
<historical-line title="Work Experience" start-year="2015" end-year="2024"></historical-line>
<script>
document.querySelector('#work').data = [
{ start: '3/1/2015', main: 'Startup', desc: 'Full Stack Developer', bg: '#3b82f6' },
{ start: '6/1/2018', main: 'Tech Corp', desc: 'Senior Engineer', bg: '#8b5cf6' },
{ start: '1/1/2022', main: 'Big Tech', desc: 'Staff Engineer', bg: '#22c55e' }
];
</script>
Education Timeline
Track educational milestones and certifications
<historical-line title="Education" start-year="2008" end-year="2016"></historical-line>
Project Timeline
Visualize project phases and milestones
<historical-line title="Product Roadmap" start-year="2023" end-year="2025"></historical-line>
Declarative Usage
Use timeline-item elements for declarative data
<historical-line title="Company History" start-year="2020" end-year="2024">
<timeline-item start="1/1/2020" label="Founded" description="Company founded" background="#ef4444"></timeline-item>
<timeline-item start="6/1/2021" label="Series A" description="$10M funding" background="#f59e0b"></timeline-item>
<timeline-item start="3/1/2023" label="Series B" description="$50M funding" background="#22c55e"></timeline-item>
</historical-line>