To serve the site locally, run:
npx serve .Then open http://localhost:3000
The events showcased on the main site are loaded dynamically. Instead of updating the index.html, all event data should be maintained inside data/events.json.
Order Rule: When adding new events to the JSON array, ensure they are ordered chronologically from oldest to newest (i.e., older events at the top of the file, and the newest/latest events appended to the very bottom). The frontend automatically reverses the array before rendering so that the most recent events are always displayed first.
Event JSON Structure: Each event in the array should follow this structure:
{
"image": "events/your-event-image.jpg",
"title": "Your Event Title",
"date": "Day, DD Mon YYYY",
"meta": "Short summary \u2022 Categories",
"description": "Full details about the event.",
"buttons": [
{
"text": "Register Now",
"link": "https://example.com/register",
"class": "btn",
"target": "_blank",
"rel": "noopener"
},
{
"text": "Closed",
"title": "Registration closed",
"class": "btn disabled",
"isButton": true
}
]
}Key Points:
image: Supported event images will be rendered withobject-fit: containto prevent truncation. Place new images in theevents/orimages/directory.date: Clearly specified dates (e.g., "Wed, 17 Dec 2025").buttons: An array of buttons to render for the event.- If it's a clickable link, specify the
link,target, andrel. - If it's an inactive or regular
<button>tag instead of an anchor<a>tag, set"isButton": true. - Button styling uses CSS classes such as
"btn","btn secondary", or"btn disabled".
- If it's a clickable link, specify the