Isuru Eranda - Portfolio Website 🚀

A modern, responsive portfolio website showcasing the work and skills of Isuru Eranda, a Software Engineer and UI/UX Designer from Sri Lanka.

✨ Features

🎨 Modern Design

• Dark theme with professional color scheme
• Gradient accents and smooth animations
• Glass morphism effects for modern aesthetics
• Responsive design that works on all devices

🚀 Performance & UX

• Loading screen with smooth transitions
• Lazy loading for optimized performance
• Smooth scrolling navigation
• Intersection Observer for scroll-triggered animations
• Progressive enhancement for better accessibility

📱 Responsive Features

• Mobile-first design approach
• Hamburger menu for mobile navigation
• Touch-friendly interface elements
• Optimized layouts for different screen sizes

🎯 Interactive Elements

• Typing animation for dynamic text
• Hover effects and micro-interactions
• Portfolio filtering by project categories
• Skill progress bars with animation
• Contact form with validation and feedback

🔧 Technical Features

• SEO optimized with meta tags and structured data
• Open Graph and Twitter Card meta tags
• Favicon and PWA-ready manifest
• Cross-browser compatibility
• Clean, semantic HTML5
• Modern CSS3 with custom properties (CSS variables)
• Vanilla JavaScript for lightweight performance

🛠️ Technologies Used

• HTML5 - Semantic markup
• CSS3 - Modern styling with Flexbox and Grid
• JavaScript (ES6+) - Interactive functionality
• Font Awesome - Icons
• Google Fonts - Typography (Poppins)

📂 Project Structure

├── index.html          # Main HTML file
├── style.css           # Stylesheet with modern CSS
├── script.js           # JavaScript functionality
├── Images/             # Photos and graphics
├── icon/               # Icons and favicons
└── File/               # Documents (CV)

🎨 Design Features

Color Scheme

• Primary: #00d4ff (Cyan)
• Secondary: #ff6b6b (Coral)
• Accent: #4ecdc4 (Teal)
• Background: #1a1a1a (Dark)
• Cards: #2a2a2a (Darker)

Typography

• Font Family: Poppins (Google Fonts)
• Weights: 300, 400, 500, 600, 700, 800

Animations

• Scroll animations with Intersection Observer
• Hover effects on interactive elements
• Loading animations for better UX
• Smooth transitions throughout the site

📱 Responsive Breakpoints

• Desktop: 1200px+
• Tablet: 768px - 1199px
• Mobile: Below 768px

🚀 Performance Optimizations

• Image preloading for faster load times
• CSS and JS minification ready
• Lazy loading implementation
• Efficient animations using CSS transforms
• Minimal external dependencies

📧 Contact Form

The contact form is integrated with Google Sheets for form submissions:

• Real-time validation
• Success/error feedback
• Spam protection
• Mobile-optimized input fields

🌟 Key Sections

1. Hero Section - Dynamic introduction with typing animation
2. About - Personal information with statistics
3. Services - Professional offerings with hover effects
4. Portfolio - Filterable project showcase
5. Skills - Animated progress bars by category
6. Contact - Interactive contact form and social links

🔄 Recent Updates

• ✅ Modern dark theme implementation
• ✅ Enhanced responsive design
• ✅ Advanced CSS animations and transitions
• ✅ Interactive portfolio filtering
• ✅ Improved SEO and meta tags
• ✅ Loading screen and scroll effects
• ✅ Enhanced contact form with better UX
• ✅ Cross-browser compatibility improvements

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

Feel free to fork this project and submit pull requests for any improvements.

---

Built with ❤️ by Isuru Eranda

🌐 Live Demo: isuru-eranda.github.io
📧 Contact: [email protected]
💼 LinkedIn: linkedin.com/in/isuru-eranda
🐙 GitHub: github.com/Isuru-Eranda