Aesthetic Card Search Web Page 🔍

A responsive, dark-themed card-based profile search interface built using HTML, CSS, and JavaScript. This project showcases real-time search functionality with debounce optimization, subtle animations, and an elegant UI layout.

---

🚀 Features

• ✅ Live search input with debounce (500ms delay)
• 🎨 Aesthetic dark theme with soft shadows and blurred overlays
• 💳 Profile cards with images, names, and bios
• 🎯 Keyboard shortcut: Press `` to focus the search bar
• 📱 Fully responsive layout using Flexbox and CSS variables

---

🛠️ Technologies Used

• HTML5
• CSS3 (Flexbox, CSS Variables, backdrop-filter, mask-image)
• Vanilla JavaScript (DOM manipulation, closures, apply(), setTimeout())

---

📷 Preview

---

📂 File Structure

card-search-app/
├── index.html        # Main HTML file
├── style.css         # Custom styles and layout
├── script.js         # JavaScript logic and debounce implementation
└── README.md         # This file

---

🧠 Key Concepts Learned

• Closure-based debounce function
• Dynamic DOM creation using createElement
• Event handling and live filtering
• Accessibility & performance best practices
• Responsive UI design without frameworks

---

🚀 Getting Started

1. Clone this repository:

git clone https://github.com/your-username/card-search-app.git

2. Open in browser: Simply open index.html in your browser.

---

🌐 Live Demo

🔗 View it live on Netlify

---

🙏 Credits

• All profile images sourced from Pinterest for demo purposes.
• Inspired by @harshbhaiyaa's JavaScript Phase 2 YouTube lecture. Thank you for the guidance!

---

📬 Contact

Have feedback or ideas? Connect on LinkedIn or reach out via GitHub.

---

🏷️ Tags

HTML CSS JavaScript Debounce Web Dev Responsive Design DOM Manipulation Search UI