The Nexus Gathering

A responsive, multi-page event website for "The Nexus Gathering" music festival, built using pure HTML, CSS, and vanilla JavaScript.

---

🌟 Features

• Responsive Navigation: Separate navigation bars for desktop and mobile views, including a hamburger menu that toggles an overlay and a slide-out link panel.
• Ticket Purchase Modal: A simple modal window confirms ticket purchase with a smooth animation.
• Scroll-Triggered Chat Icon: A persistent chat icon appears after scrolling past a certain point on the page, enhancing user support visibility.
• Dynamic Content Filtering: The Schedule section allows users to filter events by Day 1, Day 2, or Day 3 using vanilla JavaScript and data- attributes.
• Interactive FAQs: An accordion-style FAQ section that expands and collapses answers using JavaScript for a clean interface.
• Scroll Animations: Elements animate into view as the user scrolls down the page, providing a modern, engaging user experience (e.g., from-up, from-left, from-right classes).
• Clean, Semantic Code: Structured HTML for accessibility and maintainability, with CSS written using a custom, utility-first approach.

---

🛠️ Tech Stack

This project is built with the following technologies:

• HTML5 (index.html): Provides the structure and semantic content.
• CSS3 (./css/style.css): Handles all styling, responsiveness, and animations.
• Vanilla JavaScript (./src/main.js): Implements all interactivity, including:
  • Modal logic
  • Mobile navigation toggle
  • FAQ accordion functionality
  • Scroll observation for animations (IntersectionObserver)
  • Schedule event filtering (data-day-event logic)
• External Libraries:
  • Google Fonts: Inter
  • Font Awesome: For icons in the FAQ section.

---

🚀 Getting Started

Follow these instructions to get a local copy of the project up and running.

Prerequisites

You only need a modern web browser (like Chrome, Firefox, or Edge) to view the project.

Installation

1. Clone the repository:

   git clone https://github.com/SamIfesi/Nexus_Project

2. Navigate to the project directory:

   cd the-nexus-gathering

3. Open the file: Simply open the index.html file in your preferred web browser.

   Alternatively, you can use a local development server (like VS Code's Live Server extension) to view the project.

---

📁 File Structure

The core files for the website are structured as follows:

1. Capstone Project-Nexus Gathering/
2. index.html (Main HTML structure of the website)
3. css/style.css (All custom CSS styles)
4. src/main.js (All JavaScript for interactivity and dynamic features)
5. assets/Folder (for images, icons)
6. icon/ (All the SVG files)
7. img/ (All the images used logo, hero-section etc)

---

🔗 Project Links

• Live Demo: https://nexus-project-ruby.vercel.app
• Figma/Design File: https://www.figma.com/design/DLgdNphZQ3Em2n5IcVrYdY/Music-and-cultural-event-page?node-id=136-22&t=plbYsF2DkOKPWhna-0

---

✍️ Author

• Eke Ifesinachi Samrose/Sam Ifesi - https://github.com/SamIfesi

• linkedIn profile - https://www.linkedIn.com/in/sam-ifesi