🎵 Menad Harkat - Official Website

A modern, responsive artist portfolio website showcasing the work of Menad Harkat, a talented North African singer.

🌐 Live Demo

Visit the live website: https://winsensid.github.io/menad-harkat/

🌟 Features

• Fully Responsive Design - Optimized for desktop, tablet, and mobile devices
• Artistic Animations - Custom CSS keyframe animations including guitar string shimmer effects
• Spotify Integration - Embedded music player with direct streaming
• Masonry Gallery - Dynamic grid layout showcasing performance photos
• Interactive UI - Smooth scrolling, parallax effects, and scroll-triggered animations
• Zero Dependencies - Built with vanilla JavaScript for optimal performance
• SEO Optimized - Semantic HTML5 structure

🛠️ Technologies Used

Frontend

• HTML5 - Semantic markup
• CSS3 - Grid, Flexbox, Custom Properties, Animations
• JavaScript (ES6+) - Intersection Observer API, DOM manipulation

Design

• Google Fonts - Playfair Display, Poppins
• Color Palette - North African inspired (Green #006233, Red #D52B1E, Gold #D4AF37)
• SVG Icons - Custom social media icons

Deployment

• GitHub Pages - Static site hosting
• Git - Version control

🚀 Key Technical Implementations

1. CSS Grid Masonry Layout - Dynamic photo gallery with varying sizes
2. Intersection Observer API - Scroll-triggered fade-in animations
3. CSS Custom Properties - Maintainable theming system
4. Parallax Scrolling - Smooth hero section effects
5. Custom Lightbox - Image gallery modal (no libraries)
6. Form Validation - Client-side validation with user feedback
7. Mobile-First Approach - Responsive breakpoints at 480px, 768px, 968px

📱 Responsive Design

• Desktop (>968px): 4-column masonry gallery, full navigation
• Tablet (768-968px): 2-column layout, optimized spacing
• Mobile (<768px): Single column, hamburger menu, touch-optimized

🎨 Design Features

• Dark theme with gradient overlays
• Gold accent colors throughout
• Animated guitar strings behind portrait
• Smooth hover transitions
• Glassmorphism effects on navigation

📂 Project Structure

menad-harkat/
├── index.html          # Main HTML structure
├── styles.css          # All styling and animations
├── script.js           # Interactive functionality
├── images/            # Photo gallery and assets
└── README.md          # Project documentation

👤 Developer

Winsen Sid

• GitHub: @Winsensid
• Portfolio: View More Projects

📄 License

This project is open source and available for portfolio demonstration purposes.

---

Engineered with ❤️ using vanilla HTML, CSS, and JavaScript