bxAI Website

A static front-end website developed as the official online presence of the bxAI (Artificial Intelligence) committee at École Polytechnique.

The website presents the committee’s mission, team members, past and upcoming events, and contact information. It was designed and implemented from scratch using standard front-end technologies, with a focus on modular structure, visual consistency, responsiveness, and interactive user experience.

Overview

This project was built using:

• HTML for page structure
• CSS for layout, styling, animations, and responsiveness
• JavaScript for dynamic interactions
• Leaflet.js for the interactive contact map

All components were implemented without external templates or design frameworks in order to keep full control over the codebase and design.

Pages

Home Page

The home page introduces the bxAI mission, upcoming events, and team overview. It includes:

• a live JavaScript countdown to the next event
• an animated title section
• poster previews displayed as clickable cards
• a two-column layout with the most recent event and a scrolling list of events

Team Page

The team page showcases the core members of the committee using a responsive CSS grid. Each member card includes:

• photo
• name
• role
• hover interaction revealing a short biography
• direct LinkedIn link

Events Page

The events page displays a gallery of past events as stylized cards. Each card includes:

• event image
• title
• date
• short summary
• link to a dedicated event detail page

Event Detail Pages

Each event page provides a description and image gallery. Images open in a modal lightbox with previous/next navigation implemented using only HTML and CSS through IDs and :target selectors.

Contact Page

The contact page includes:

• an interactive Leaflet.js map
• custom markers for team members’ hometowns
• bxAI headquarters at l’X
• a semantic HTML5 contact form
• a mailto: action for email drafts
• social media links to Instagram and LinkedIn

Styling and Responsiveness

The styling is split across several CSS files:

• style.css — shared layout, colors, typography, navigation, and reusable classes
• style_team.css — team grid, hover effects, bio card animations, and responsive layout
• style_contact.css — contact form styling and Leaflet map responsiveness
• style_events.css — event card grid, hover effects, and mobile-friendly design
• style_event_page.css — individual event page layout, text formatting, and lightbox-style modal image interactions

JavaScript Features

The project includes several JavaScript files for dynamic functionality:

• background.js — animated background grid with color effects
• header.js — responsive header behavior, scroll-based visibility, and mobile hamburger menu
• numbers_animation.js — animated numerical counters triggered on scroll
• timer.js — real-time countdown to an upcoming event
• typing_animation.js — typewriter animation for homepage subtitles
• script_contact.js — interactive Leaflet.js map centered on l’X with custom markers

Authors

Developed by Maria Neagoie and Luxin Matasaru as part of the CSC-1S004-EP project at École Polytechnique.

References

• Leaflet.js
• HTML5/CSS3 MDN Docs