Ahmed Maghraby Portfolio Project

Welcome to my interactive portfolio! This project showcases my skills and projects using a modern and dynamic web interface built with Next.js and TypeScript. Below, you'll find details about the technologies and libraries used, as well as how to set up and run the project locally.

Table of Contents

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

Features

• Dynamic Particle Backgrounds: Eye-catching particle effects using tsparticles.
• Smooth Animations: Professional transitions powered by GSAP and Framer Motion.
• Responsive Design: Optimized for all devices.
• Project Showcase: Detailed sections for each project with descriptions and links.
• Interactive Contact Section: Easy-to-use animated contact form.

Technologies Used

• Framework: Next.js
• JavaScript Library: React
• TypeScript: TypeScript
• Animations:
  • GSAP
  • GSAP Trial
  • Framer Motion
  • Scroller Motion
• Styling:
  • Tailwind CSS
• Firebase: Firebase

Installation

1. Clone the repository:

   git clone https://github.com/ahmedmaghraby/ahmed-maghraby-portfolio.git
   cd ahmed-maghraby-portfolio

2. Install the dependencies:

   npm install

Usage

1. Build the project for production:

   npm run build

2. Run the development server:

   npm run dev

   Open http://localhost:3000 in your browser to see the result.

3. Start the production server:

   npm start

Project Structure

├── public/                # Public assets
├── src/
│   ├── animations/        # Animation-related component
│   ├── assets/            # css file used in the application
│   ├── components/        # React components
│   ├── helper/            # Helper functions and utilities
│   ├── sections/          # Sections of the application (likely about section)
│   ├── service/           # Service-related code (likely interacting with Firebase).
│   └── types/             # TypeScript type definitions
├── .eslintrc.js           # ESLint configuration
├── .prettierrc            # Prettier configuration
├── next.config.js         # Next.js configuration
├── firebase.json          # hosting configuration file.
├── config.json            # Firebase configuration file.
├── tailwind.config.js     # Tailwind CSS configuration file
├── package.json           # NPM scripts and dependencies
└── README.md              # Project documentation

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Feel free to reach out if you have any questions or feedback! Thank you for visiting my portfolio project.