🚀 Mohanad Yehia - Portfolio Website

📝 About the Project

This is my personal portfolio website showcasing:

• 🧑‍💻 Who I am
• 💼 My projects
• 📜 My certificates
• 📩 How to contact me

The website is designed with a modern, responsive UI and smooth animations to enhance user experience.

---

🛠️ Tech Stack

Frontend:

• ⚛️ ReactJS – Component-based UI development
• 🎨 Tailwind CSS – Utility-first styling for a sleek design
• 🚀 AOS (Animate On Scroll) – Scroll-based animations
• 🎭 Framer Motion – Smooth animations and transitions
• 🏞️ Material UI – UI components for better design consistency
• 🌟 Lucide – Modern icons for UI enhancement
• ⚠️ SweetAlert2 – Interactive alerts for user engagement

Backend & Database:

• 🔥 Firebase – Hosting and database integration

---

🎬 Features

✅ Fully responsive design
✅ Smooth animations & transitions
✅ Dynamic project showcase
✅ Contact form for easy communication
✅ Light and dark mode support (if implemented)

---

🚀 Live Demo

Check out the live website: myehia.vercel.app

---

🔧 Tutorial: Running the Project

Here’s a simple guide to run this project.

Prerequisites

Ensure that you have already installed:

• Node.js

---

Steps to Run the Project

1. Download this project:

   git clone https://github.com/Mohanad49/Portfolio.git  

2. Install all dependencies:

   npm install  

   Or use:

   npm install --legacy-peer-deps  

3. Run the project:

   npm run dev  

4. Open in browser:

   Access the application through the link displayed in your terminal.

---

Creating a Production Build

To create a production-ready build:

1. Run the build command:

   npm run build  

2. The build files will be saved in the dist folder. You can upload this folder to your hosting server.

---

Notes

If you encounter issues while running the project, ensure that:

• Node.js is correctly installed.
• You’re in the correct project directory.
• All dependencies are installed without errors.

---

Firebase Configuration

To configure Firebase for this project, follow these steps:

1. Add Firebase to the Project:

   • Go to the Firebase Console.
   • Create a new project or use an existing one.

2. Enable Firestore Database:

   • Create a database.

3. Go to Project Settings:

   • Click the settings icon.
   • Copy the Firebase configuration.

4. Go to Rules:

   • Set the rules to true.

5. Adjust the Collection Structure:

   • Set up the collections as shown in the following images:

   
   

6. Update firebase.js and firebase-comment.js Files:

   • Replace the firebaseConfig content with your Firebase configuration.

---

🙌 Credits

This portfolio is based on a template originally created by Eki Zulfar Rachman. Special thanks for the amazing design and inspiration!

---