Mohamed Zaitoune Portfolio

A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS, showcasing my professional experience, projects, and skills.

🌟 Features

Hero Section

• Animated, centered design for strong first impressions
• Interactive PDF resume viewer with modal
• Quick access buttons for navigation
• Resume download and external view options

Skills Section

• Modern card-based design with icons
• Interactive progress bars
• Categorized skills (Frontend, Backend, DevOps)
• Hover effects and smooth animations
• Comprehensive technical stack display

Projects Section

• Detailed project cards with icons
• Interactive modals for in-depth project information
• Technology stack tags
• Company/client information
• Responsive grid layout

Contact Section

• Validated contact form
• Loading state indicators
• Social media integration
• Professional layout and styling
• Direct contact information

Additional Features

• Responsive design for all devices
• Smooth animations and transitions
• SEO-optimized with meta tags
• Custom favicon
• Footer with quick navigation and social links

🚀 Technologies Used

• Frontend Framework: React with TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn-ui
• Build Tool: Vite
• Version Control: Git

🛠️ Installation

1. Clone the repository:

git clone <repository-url>

2. Navigate to the project directory:

cd portfolio

3. Install dependencies:

npm install

4. Start the development server:

npm run dev

The application will be available at http://localhost:5173

📱 Responsive Design

The portfolio is fully responsive and optimized for:

• Desktop devices
• Tablets
• Mobile phones
• Various screen sizes and orientations

🔧 Project Structure

portfolio/
├── src/
│   ├── components/
│   │   ├── Hero/
│   │   ├── Skills/
│   │   ├── Projects/
│   │   ├── Contact/
│   │   └── Footer/
│   ├── assets/
│   ├── styles/
│   └── App.tsx
├── public/
└── index.html

🎨 Customization

The portfolio can be easily customized by:

1. Modifying the content in respective components
2. Adjusting the theme colors in the Tailwind configuration
3. Adding or removing sections as needed
4. Updating personal information and projects

📄 License

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

📞 Contact

For any inquiries or suggestions, feel free to reach out through the contact form on the website or through the provided social media links.

---

Built with ❤️ by Mohamed Zaitoune