Café Lumière is a modern French café landing page built with Vite, HTML, CSS, and JavaScript. Inspired by Parisian café culture, the project delivers an immersive experience through cinematic visuals, smooth animations, and elegant interactions.
Designed with a focus on aesthetics and user experience, Café Lumière combines handcrafted UI components, animated sections, and dynamic media to create a visually rich and engaging web experience.
- Responsive and modern design
- Smooth scroll animations powered by AOS
- Dynamic video backgrounds
- Animated customer counter
- Interactive menu and featured dishes sections
- Elegant French café-inspired interface
- Modular CSS architecture
- Mobile-friendly layout
- Smooth user interactions
| Layer | Technologies |
|---|---|
| Build Tool | Vite |
| Frontend | HTML5, CSS3, JavaScript |
| Animations | AOS (Animate On Scroll) |
| Media Hosting | Cloudinary |
| Deployment | Vercel |
Cafe-Lumiere/
├── assets/
├── css/
│ ├── sections/
│ ├── style.css
│ └── ...
├── js/
│ └── script.js
├── index.html
├── package.json
├── vite.config.js
└── README.md
git clone https://github.com/anasahhm/Cafe-Lumiere.git
cd Cafe-Lumierenpm installnpm run devOpen your browser and visit:
http://localhost:5173
npm run buildPreview the production build:
npm run previewhttps://cafe-lumiere-two.vercel.app
Powered by AOS to create engaging transitions and section reveals.
Interactive background videos hosted on Cloudinary with seamless switching functionality.
Intersection Observer and requestAnimationFrame are used to trigger smooth counter animations only when visible on screen.
Styles are organized into reusable sections for maintainability and scalability.
The project is deployed on Vercel and can be accessed here:
https://cafe-lumiere-two.vercel.app
Anas Ahmed
GitHub: https://github.com/anasahhm
This project is licensed under the MIT License.