HW
Haydn Watkins

Page Hero - Copy this React, Tailwind Component to your project

Create a polished horizontal timeline component using React and TypeScript that displays nine events. The timeline should animate smoothly when it scrolls into view: - A black horizontal line draws from left to right. - At nine equally spaced points, vertical lines branch upward or downward (alternating). - Each vertical line ends with a card displaying the event's year, title, and description. - Years are displayed near the dots, staggered above and below the timeline (alternating). - Animations are fluid and professional, with the horizontal line and vertical elements drawing sequentially. Use the following event data: ```json [ { "year": "1984", "title": "Graduated from Kittatinny Regional High School", "description": "Hampton, NJ | Education" }, { "year": "1985-1989", "title": "Closing Administrator at Associates Abstract, Inc.", "description": "Hawley, PA | Early Career" }, { "year": "1989-1991", "title": "Office Manager at MAC Mortgage Co., Inc.", "description": "Greentown, PA | Mortgage Industry" }, { "year": "1998-2000", "title": "Bookkeeper/Secretary at John C. Ernst Company", "description": "Dover, NJ | Diversifying Experience" }, { "year": "2000-2005", "title": "Office Manager at Pocono Builders Association", "description": "East Stroudsburg, PA | Real Estate Development" }, { "year": "2005", "title": "Obtained PA Real Estate License", "description": "Pocono Real Estate Academy | Professional Development" }, { "year": "2005-2006", "title": "Closing Administrator at Fidelity Home Abstract, Inc.", "description": "East Stroudsburg, PA | Title Industry" }, { "year": "2006-2013", "title": "Transaction Coordinator, Compliance Review Officer", "description": "Keller Williams Real Estate, Stroudsburg, PA | Real Estate Brokerage" }, { "year": "2013-Present", "title": "Owner/President, PA Real Estate Support Services", "description": "Providing exceptional transaction coordination services in Pennsylvania | Entrepreneurship" } ] ``` Ensure the component is responsive and visually appealing on all devices.

Prompt
Component Preview

About

PageHero - A stunning hero section with overlapping content, customizable styles, and responsive design, built with React and Tailwind. Download instantly!

Share

Last updated 1 month ago