Contact Page Project

Description

This project is a responsive contact page built using React, Material UI, and React Bootstrap. It features a contact form with validation, integration with EmailJS for sending messages, and language translation support with i18next. The application is deployed on GitHub Pages.

---

🚀 Demo

You can view the deployed version of this project at the following link: Here.

---

Features

• Responsive Design: Built with Material UI and Bootstrap for modern, mobile-friendly layouts.
• Contact Form: Includes fields for name, email, and message with validation using react-hook-form.
• Email Integration: Sends form submissions via EmailJS.
• Language Support: Uses i18next for multi-language support (e.g., English and Spanish).
• Floating Action Button: Quick access to the contact form with a Material UI FAB.
• Custom Deployment: Configured to deploy on GitHub Pages.

---

Technologies Used

• Frontend: React, Material UI, React Bootstrap
• Form Handling: react-hook-form
• Email Integration: EmailJS
• Localization: i18next

---

Installation

1. Clone the repository:

   git clone https://github.com/your-username/your-repository.git

2. Navigate to the project directory:

   cd your-repository

3. Install dependencies:

   npm install
   # or
   yarn install

4. Add a .env file with the following variables:

   VITE_SERVICE_ID=your_emailjs_service_id
   VITE_TEMPLATE_ID=your_emailjs_template_id
   VITE_PUBLIC_KEY=your_emailjs_public_key

5. Start the development server:

   npm run dev
   # or
   yarn dev

---

Dependencies

• React: ^18.0.0
• Material UI: ^5.0.0
• React Bootstrap: ^2.5.0
• react-hook-form: ^7.0.0
• EmailJS: ^3.0.0
• i18next: ^21.0.0
• SweetAlert2: ^11.0.0

---

Contributing

Feel free to open issues or submit pull requests for improvements or bug fixes.

---

License

This project is licensed under the MIT License.

---

Acknowledgements

• Thanks to Material UI and React Bootstrap for their amazing libraries.
• Special thanks to EmailJS for their easy-to-use email API.