Skip to content

Latest commit

 

History

History
119 lines (80 loc) · 4 KB

README.md

File metadata and controls

119 lines (80 loc) · 4 KB
Raw

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

  • 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:

📂 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
 └──