Developer Portfolio

A modern and responsive developer portfolio which looks like code editor built using Next.js and Framer Motion. This portfolio showcases projects, skills, and contact information, with smooth animations and transitions for an engaging user experience.

✨ Features

• Responsive Design: Optimized for all devices, ensuring a great user experience on mobile, tablet, and desktop.
• Smooth Animations: Powered by Framer Motion for seamless animations and transitions, enhancing the visual appeal of the portfolio.
• Project Showcase: Display your projects with descriptions, images, and links to GitHub repositories or live demos.
• Skills Section: Highlight your technical skills with interactive animations.
• Contact Form: A functional contact form that allows potential clients or employers to reach out directly.

🛠️ Tech Stack

• Next.js: A React framework for building server-rendered or statically exported React applications with ease.
• Framer Motion: A production-ready motion library for React, allowing you to create complex animations easily.
• Tailwind CSS: A utility-first CSS framework for building custom designs without leaving your HTML.

📦 Getting Started

To get a local copy of this project up and running, follow these steps.

Prerequisites

• Node.js (v16.x or higher)
• npm or yarn as your package manager

🚀 Installation

1. Clone the repository:

   git clone https://github.com/mo-hassann/developer-portfolio.git
   cd developer-portfolio
   

2. Install dependencies:

   Using npm:

   npm install
   

   Or using yarn:

   yarn install
   

3. Start the development server:

   Using npm:

   npm run dev
   

   Or using yarn:

   yarn dev
   

   Open http://localhost:3000 to view the portfolio in your browser.

📖 Usage

Running the app

• Development mode: npm run dev or yarn dev
• Production mode: npm run build && npm start or yarn build && yarn start

Customization

To customize your portfolio:

1. Update Content: Edit the content files in the content folder to update your profile, projects, skills, and contact information.
2. Change Styles: Modify the Tailwind CSS styles in the styles folder to match your desired theme.
3. Add Animations: Use Framer Motion components and hooks to add or customize animations throughout the portfolio.

🤝 Contributing

We welcome contributions to this project. To contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature-name).
3. Make your changes and commit them (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/your-feature-name).
5. Open a pull request.

Please make sure to update tests as appropriate.

📜 License

Distributed under the MIT License. See LICENSE for more information.