A modern, responsive portfolio website for Sahin Enam, a professional frontend developer. This website showcases skills, projects, and YouTube content with a beautiful, interactive design.

• Modern Design: Clean, professional layout with gradient backgrounds and smooth animations
• Responsive Design: Fully responsive across all devices (desktop, tablet, mobile)
• Smooth Animations: CSS animations and JavaScript interactions for enhanced UX
• Accessibility: WCAG compliant with proper focus indicators and keyboard navigation
• Performance Optimized: Lazy loading, debounced scroll events, and optimized images

1. Hero Section: Eye-catching introduction with profile image and call-to-action buttons
2. About Section: Professional background with animated statistics
3. Skills Section: Interactive skill cards with progress bars
4. Projects Section: Portfolio showcase with hover effects and technology tags
5. YouTube Section: Integration with YouTube API to display latest videos
6. Contact Section: Contact form with validation and social media links
7. Footer: Quick links and social media connections

• YouTube API Integration: Fetches and displays latest videos from the channel
• Form Handling: Contact form with Formspree integration
• Mobile Navigation: Hamburger menu with smooth animations
• Scroll Effects: Navbar transparency and section animations
• Carousel: Video carousel with navigation controls
• Notification System: Success/error notifications for form submissions

• HTML5: Semantic markup with proper accessibility
• CSS3: Modern styling with Flexbox, Grid, and animations
• JavaScript (ES6+): Interactive functionality and API integration
• Font Awesome: Icons for enhanced visual appeal
• Google Fonts: Inter font family for typography
• YouTube Data API: For fetching channel videos
• Formspree: Contact form handling

portfolio-website/
├── index.html          # Main HTML file
├── styles.css          # CSS styles and animations
├── script.js           # JavaScript functionality
├── README.md           # Project documentation
└── website.html        # Original website (backup)

• A modern web browser
• Internet connection (for external resources)

1. Clone or download the project files
2. Open index.html in your web browser
3. The website will load with all features enabled

1. Set up a local server (recommended for development)
2. Use tools like Live Server (VS Code extension) or Python's http.server
3. Access the website through http://localhost:3000 (or your preferred port)

The website uses a modern color scheme with gradients:

• Primary: #667eea to #764ba2 (purple gradient)
• Background: #f5f7fa to #c3cfe2 (light gradient)
• Text: #333 (dark gray) and #666 (medium gray)

1. Personal Information: Update the hero section, about text, and contact details
2. Projects: Add or modify project cards in the projects section
3. Skills: Adjust skill percentages and add new technologies
4. Social Links: Update social media URLs in the footer
5. YouTube: Update the YouTube API key and channel ID

To use your own YouTube channel:

1. Get a YouTube Data API key from Google Cloud Console
2. Update the YOUTUBE_API_KEY in script.js
3. Update the YOUTUBE_CHANNEL_ID with your channel ID

The website is fully responsive with breakpoints:

• Desktop: 1200px and above
• Tablet: 768px to 1199px
• Mobile: Below 768px

• Hamburger menu navigation
• Touch-friendly buttons and interactions
• Optimized layouts for small screens
• Swipe gestures for carousel (planned)

• Chrome: 90+
• Firefox: 88+
• Safari: 14+
• Edge: 90+

• Lazy loading for images
• Debounced scroll events
• Optimized CSS animations
• Minimal JavaScript bundle
• Efficient API calls

• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1

• All external links include rel="noopener" for security
• Form validation on both client and server side
• HTTPS recommended for production deployment

• Semantic HTML structure
• Meta tags for social sharing
• Proper heading hierarchy
• Alt text for images
• Structured data (can be added)

• WCAG 2.1 AA compliant
• Keyboard navigation support
• Screen reader friendly
• High contrast ratios
• Focus indicators
• Semantic HTML elements

• Keep YouTube API key current
• Update project portfolio regularly
• Monitor form submissions
• Check for broken links

• Use Google PageSpeed Insights
• Monitor Core Web Vitals
• Check browser compatibility

For questions or issues:

• Check the browser console for JavaScript errors
• Verify API keys are valid
• Ensure all files are in the same directory
• Test on different browsers and devices

This project is for personal use. Please respect the original design and code structure.

• Font Awesome for icons
• Google Fonts for typography
• YouTube Data API for video integration
• Formspree for form handling
• Modern CSS techniques and best practices

Built with ❤️ for Sahin Enam's professional portfolio