A modern, responsive portfolio application built with Flutter, featuring a unique phone viewport for web and real email functionality
This is a comprehensive portfolio application showcasing modern Flutter development with cross-platform capabilities. The app features a unique dynamic phone viewport for web users, providing a mobile-first experience that adapts to any screen size.
- Cross-Platform: Runs on Web, Android, iOS, and Desktop
- Responsive Design: Mobile-first with dynamic phone viewport for web
- Real Email Integration: Contact forms with EmailJS and Arabic auto-replies
- Modern UI/UX: Dark/Light mode with smooth animations
- Professional Portfolio: Complete showcase of skills, projects, and experience
- ✅ Dynamic Phone Viewport - Web users see a realistic phone mockup
- ✅ Responsive Design - Adapts to all screen sizes
- ✅ Dark/Light Mode - Toggle between themes
- ✅ Smooth Animations - Professional animated text and transitions
- ✅ Touch Gestures - Swipe navigation on web phone mockup
- ✅ Modern Design - Clean, professional interface
- ✅ Real Email Functionality - Powered by EmailJS
- ✅ Auto-Reply System - Automatic responses to clients
- ✅ Arabic Email Templates - Professional bilingual communication
- ✅ Form Validation - Complete input validation
- ✅ Multiple Contact Methods - Email, WhatsApp, LinkedIn integration
- ✅ Web Application - Deployed and accessible online
- ✅ Android APK - Native mobile experience
- ✅ iOS Ready - Configured for App Store deployment
- ✅ Progressive Web App - PWA capabilities with offline support
- Flutter 3.9+ - Cross-platform UI framework
- Dart - Programming language
- Provider - State management for theming
- Material Design - Google's design system
- animated_text_kit - Text animations
- font_awesome_flutter - Icon library
- Custom Widgets - Reusable component system
- EmailJS - Email service integration
- HTTP - API communication
- URL Launcher - External link handling
- AudioPlayers - Sound effects and music
| Screen | Description | Features |
|---|---|---|
| 🏠 Home | Landing page with introduction | Animated text, theme toggle, navigation |
| 👨💻 About | Personal information and background | Professional summary, experience overview |
| 🛠️ Skills | Technical skills showcase | Categorized skill sets, proficiency levels |
| 🚀 Projects | Portfolio projects gallery | Project showcases, live demos, source code |
| 💼 Experience | Work history and achievements | Timeline, company details, responsibilities |
| 📞 Contact | Contact information and social links | Multiple contact methods, social media |
| 💼 Hire Me | Project inquiry form | EmailJS integration, detailed project forms |
Flutter SDK 3.9+
Dart SDK 2.19+
Android Studio / VS Code
Git# Clone the repository
git clone https://github.com/yourusername/flutter-portfolio.git
# Navigate to project directory
cd flutter-portfolio
# Install dependencies
flutter pub get
# Run the app
flutter run# Build for Web
flutter build web --release
# Build for Android
flutter build apk --release
# Build for iOS
flutter build ios --releaseThe app is optimized for various hosting platforms:
- Netlify - Recommended for auto-deployment
- Vercel - Great performance and custom domains
- GitHub Pages - Free hosting with GitHub integration
- Firebase Hosting - Google Cloud with analytics
- Google Play Store - Android distribution
- Apple App Store - iOS distribution
- Direct APK - Direct download for Android users
The app includes real email functionality. To set up:
- Create an EmailJS account
- Configure email service (Gmail recommended)
- Create email templates
- Update credentials in
lib/Screens/hire_me.dart
See EMAILJS_SETUP.md for detailed instructions
The app features a revolutionary dynamic phone viewport for web users:
- Realistic Phone Mockup - iPhone-style frame with status bar
- Dynamic Sizing - Adapts to any screen size
- Touch Gestures - Swipe navigation
- Professional Presentation - Perfect for showcasing to clients
// Automatically detects platform
if (kIsWeb) {
// Show phone viewport wrapper
return PhoneViewportWrapper(child: YourScreen());
} else {
// Show native mobile layout
return YourScreen();
}// Complete dark/light mode implementation
class ThemeProvider extends ChangeNotifier {
bool _isDarkMode = false;
void toggleTheme() {
_isDarkMode = !_isDarkMode;
updateColors(_isDarkMode);
notifyListeners();
}
}// Dynamic web phone mockup
class PhoneViewportWrapper extends StatelessWidget {
final Widget child;
// Adapts to screen size and provides phone-like experience
}// Real email functionality
static const String _serviceId = 'YOUR_SERVICE_ID';
static const String _templateId = 'YOUR_TEMPLATE_ID';
static const String _publicKey = 'YOUR_PUBLIC_KEY';- 7 Complete Screens - Full portfolio coverage
- 50+ Custom Widgets - Reusable component library
- Dark/Light Themes - Complete theming system
- Multi-Language Support - English and Arabic emails
- Cross-Platform - Web, Android, iOS, Desktop ready
- Production Ready - Optimized builds and deployment
- 🌐 Web Version: https://your-portfolio-url.com
- 📱 Mobile App: Download APK
- 📧 Contact Form: Test the real email functionality
- 🌙 Dark Mode: Toggle between light and dark themes
- 📱 Phone Mockup: Experience the unique web phone viewport
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your 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
This project is licensed under the MIT License - see the LICENSE file for details.
Abdelrhman Muhamed - Full Stack Developer
- 📧 Email: talktoboda01@gmail.com
- 💼 LinkedIn: Your LinkedIn Profile
- 🌐 Portfolio: https://your-portfolio-url.com
- 📱 WhatsApp: Contact on WhatsApp
- Flutter team for the amazing framework
- EmailJS for reliable email services
- Font Awesome for beautiful icons
- Material Design for the design system
- The Flutter community for inspiration and support
⭐ Star this repo if you found it helpful!
Made with ❤️ by Abdelrhman Muhamed