Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mohamed-khaled0/mohamed-khaled-portfolio-v2
*Mohamed Khaled Portfolio**! This project is a personal website designed to showcase my skills, projects, and experience in web development.
https://github.com/mohamed-khaled0/mohamed-khaled-portfolio-v2
framer-motion nextjs reactjs resend-email-api tailwindcss typescript
Last synced: 2 months ago
JSON representation
*Mohamed Khaled Portfolio**! This project is a personal website designed to showcase my skills, projects, and experience in web development.
- Host: GitHub
- URL: https://github.com/mohamed-khaled0/mohamed-khaled-portfolio-v2
- Owner: Mohamed-khaled0
- Created: 2024-10-21T08:56:32.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-10-30T13:23:22.000Z (2 months ago)
- Last Synced: 2024-11-01T17:06:18.961Z (2 months ago)
- Topics: framer-motion, nextjs, reactjs, resend-email-api, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://mohamed-khaled-frontend-developer.netlify.app/
- Size: 310 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://mohamed-khaled-frontend-developer.netlify.app/).
## 📄 Table of Contents
- [Features](#features)
- [Technologies](#technologies)
- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [Project Structure](#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:**
```bash
git clone https://github.com/mohamed-khaled0/mohamed-khaled-portfolio-v2.git
2. **Navigate to the project directory:**
```bash
cd mohamed-khaled-portfolio-v2
3. **Install the dependencies:**
```bash
npm install
# or
yarn install
4. **Create a .env.local file and add your environment variables (e.g., Resend API key):**
```bash
# .env.local
RESEND_API_KEY=your_resend_api_key_here
5. **Run the development server:**
```bash
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:
```bash
├── 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
└──