🌟 Mohamed Mostafa - Web Developer Portfolio

📋 Overview

A modern and responsive personal portfolio website for a specialized web developer, built using the latest frontend development technologies. The portfolio features a contemporary design with attractive visual effects and full English language support.

✨ Features

🎨 Design

• Modern and Responsive Design - Works perfectly on all devices
• Advanced Visual Effects - Smooth transitions and interactive effects
• English Language Support - User interface in English with LTR support
• Attractive Color Gradients - Consistent and modern color system

🚀 Functionality

• Interactive Navigation System - Smooth transitions between different sections
• Interactive Skills Display - Animated progress bars for technical skills
• Projects Gallery - Attractive and organized project showcase
• Contact Form - Direct communication with the developer
• Scroll Effects - Visual effects on scroll

📱 Responsiveness

• Fully Responsive Design - Works on phones and tablets
• Performance Optimized - Fast loading and optimized performance
• Cross-browser Support - Compatible with all modern browsers

🛠️ Technologies Used

Frontend

• HTML5 - Basic page structure
• CSS3 - Design and styling with CSS variables
• JavaScript (ES6+) - Interaction and dynamic functionality
• Font Awesome - Icons and symbols

Libraries and Tools

• Google Fonts (Poppins) - Beautiful Arabic and English fonts
• CSS Grid & Flexbox - Advanced and responsive layout
• CSS Animations - Advanced motion effects
• Intersection Observer API - Scroll effects

📁 Project Structure

Personal-Portfolio/
├── index.html          # Main page
├── style.css           # Stylesheet file
├── README.md           # Documentation file
├── package.json        # Project configuration
├── LICENSE             # MIT License
└── .gitignore          # Git ignore file

🚀 How to Run

1. Download the Project

git clone https://github.com/mrvirusdev/personal-portfolio.git
cd personal-portfolio

2. Open the Project

• Open the index.html file in a web browser
• Or use a local server:

# Using Python
python -m http.server 8000

# Using Node.js
npx http-server

# Using PHP
php -S localhost:8000

3. Access the Website

Open your browser and navigate to: http://localhost:8000

🎯 Main Sections

🏠 Homepage

• Personal welcome with visual effects
• Quick navigation buttons
• Animated background and attractive effects

👤 About Section

• Personal and professional introduction
• Achievement statistics
• Experience and skills information

🛠️ Skills Section

• Technical skills display
• Interactive progress bars
• Skills categorized by specialization

💼 Projects Section

• Showcase of completed projects
• Project details
• Project links and technologies used

📞 Contact Section

• Contact information
• Message sending form
• Social media links

🎨 Customization

Changing Colors

You can modify colors through CSS variables at the beginning of the style.css file:

:root {
    --primary-color: #00bfff;    /* Primary color */
    --secondary-color: #1a1a1a;   /* Secondary color */
    --accent-color: #ff6b6b;      /* Accent color */
    --text-color: #f2f2f2;        /* Text color */
    --bg-color: #121212;          /* Background color */
}

Adding New Projects

To modify projects, update the projects section in index.html:

<div class="project-card">
    <div class="project-image">
        <i class="fas fa-your-icon"></i>
    </div>
    <div class="project-content">
        <h3>Project Name</h3>
        <p>Project Description</p>
        <div class="project-tech">
            <span>Technology 1</span>
            <span>Technology 2</span>
        </div>
        <a href="project-link" class="project-link">
            <i class="fas fa-external-link-alt"></i>
            View Project
        </a>
    </div>
</div>

📱 Responsive Design

The portfolio is designed to work perfectly on:

• 🖥️ Desktop Devices (1200px+)
• 💻 Laptops (992px - 1199px)
• 📱 Tablets (768px - 991px)
• 📱 Smartphones (less than 768px)

🔧 Requirements

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Internet connection (to load fonts and icons)
• No web server required (works locally)

📈 Performance

• Loading Speed: Optimized for fast performance
• File Size: Lightweight
• SEO: Search engine optimized
• Accessibility: Compliant with accessibility standards

🤝 Contributing

We welcome your contributions! You can:

1. Fork the project
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

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

📞 Contact

• Email: mrvirus@medal-team.com
• GitHub: Mohamad Mostafa

🙏 Acknowledgments

• Special thanks to Font Awesome for the amazing icons
• Thanks to Google Fonts for the beautiful fonts
• Thanks to all developers who contributed to the development of the technologies used

---

⭐ If you like the project, don't forget to give it a star! ⭐

Made with ❤️ by Mohamed Abouhamad