Implement particles background, responsive navbar, and homepage hero

[GauravKano]

What?

This PR introduces several UI components and layout features for the website.

• Implemented the global particle background used across the multiple pages using tsParticles, with config stored in particles-config.ts. Added logic to disable particle interactivity when the cursor is inside elements with the no-particles class to prevent interference with UI elements like buttons, islands, and text.
• Built a responsive navbar used across all pages.
  • Navbar.astro handles the main navbar layout (logo, center bar, and Linktree icon).
  • MobileNavbarButton.tsx replaces the Linktree icon on smaller screen sizes and controls the side navigation menu. This transitions happens at a custom breakpoint 0_5xl (56rem).
  • The logo hides on very small screens using a custom **xs breakpoint (28rem)
  • The logo is also intentionally hidden on the home page to match the Figma design.
• Implemented the first section of the homepage, which includes:
  • The main logo and “AI@UCF” title with responsive scaling.
  • A scroll-down arrow at the bottom of the screen that navigates to the next section. A bounce animation for the arrow. The arrow only appears when the user is within 50px of the top of the page.
• Imported and configured several Google Fonts used by the components created in this PR.

---

Why?

These changes establish the core foundation for the site.

• The particle background provides the dynamic visual style defined in the Figma designs while remaining non-intrusive to interactive UI elements
• The responsive navbar ensures consistent navigation across all screen sizes and devices.
• The homepage hero section introduces the main branding
• Importing the required fonts ensures the typography matches the design specifications

---

How?

• Implemented the particle background using tsParticles, with all particle behavior defined in particles-config.ts.
• Added hover detection logic so elements with the no-particles class temporarily disable particle interactivity.
• Built a responsive navbar system:
  • Navbar.astro contains the primary structure.
  • MobileNavbarButton.tsx controls the mobile menu and replaces the Linktree icon below the 0_5xl breakpoint.
• Created the homepage hero section with responsive typography and a scroll-down arrow button that triggers smooth scrolling
• Imported Google Fonts used in the components and configured them within the project styling.

---

Screenshot

This image shows the particle background, the navbar on the home page, and the 1st section of the home page

Additional Notes

• The no-particles class can be applied to any element where particle hover effects should be disabled.
• A blur can later be added on the background, however, we are leaving it as if to help with development
• This issue Closes Create Particles Background #9 , Closes Create Responsive Navbar #13 , and Closes Create Home Page Hero Section #14

[Hemanka]

checked and tested your implementation. It meets the requirements mentioned in the created issues. The nav bar elements work as intended and are responsive to the change in screen size.