Mohamed Khaled Portfolio

Welcome to Mohamed Khaled Portfolio! This project is a personal website designed to showcase my skills, projects, and experience in web development. It is built using modern web technologies like Next.js, React, Tailwind CSS, and TypeScript to ensure a responsive and optimized user experience.

🚀 Live Demo

Check out the live version of the portfolio here.

📄 Table of Contents

• Features
• Technologies
• Installation
• Usage
• Contributing
• Project Structure

✨ Features

• Responsive Design: The portfolio is fully responsive and looks great on all screen sizes.
• Project Showcase: Display projects with descriptions, technologies used, and links to live demos and GitHub repositories.
• Interactive Animations: Engaging animations using libraries like Framer Motion and Particles.js.
• Contact Form: Functional contact form using Resend API for email submissions.
• Dark Mode: Toggle between light and dark themes for better user experience.
• Optimized Performance: Fast page load times with Next.js and static site generation.

🛠️ Technologies

This project uses the following technologies:

• Next.js : React framework for server-side rendering and static site generation.
• React.js : JavaScript library for building user interfaces.
• TypeScript: Typed JavaScript for better development experience and code quality.
• Tailwind CSS: Utility-first CSS framework for styling.
• Framer Motion: Library for animations and transitions.
• Particles.js: Background particle animations.
• React Icons: Scalable vector icons for React applications.
• Resend API: For handling contact form email submissions.

📥 Installation

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/mohamed-khaled0/mohamed-khaled-portfolio-v2.git

2. Navigate to the project directory:

   cd mohamed-khaled-portfolio-v2

3. Install the dependencies:

   npm install
    # or
    yarn install

4. Create a .env.local file and add your environment variables (e.g., Resend API key):

   # .env.local
   RESEND_API_KEY=your_resend_api_key_here

5. Run the development server:

   npm run dev
   # or
   yarn dev
   

💻 Usage :

After installing and running the project, you can:

• Navigate through the sections to learn more about me and my work.
• Check out featured projects with detailed descriptions and links.
• Use the contact form to send messages directly to my email.

🤝 Contributing

Contributions are welcome! If you'd like to contribute, feel free to fork the repository and submit a pull request.

• Fork the repository
• Create a feature branch (git checkout -b feature/AmazingFeature)
• Commit your changes (git commit -m 'Add some AmazingFeature')
• Push to the branch (git push origin feature/AmazingFeature)
• Open a Pull Request

📧 Contact

Feel free to reach out if you have any questions or suggestions:

• Email: [email protected]

📂 Project Structure

Here's a simplified view of the project's folder structure:

 ├── public
 │   └── assets          # Images and other static assets
 ├── src
 │   ├── components      # Reusable UI components
 │   ├── pages           # Next.js page components
 │   ├── styles          # Tailwind CSS configuration
 │   ├── email           # Contact form email template
 │   └── lib             # Utility functions
 ├── .env.local          # Environment variables
 ├── next.config.js      # Next.js configuration
 ├── tailwind.config.js  # Tailwind CSS configuration
 └──