KittyPics - Random Cat Generator

A delightful web application that lets you discover adorable cats from over 60 different breeds. Built with modern web technologies and a focus on accessibility and user experience.

✨ Features

• Random Cat Images: Get endless cute cat photos with a single click
• Breed Selection: Choose from 60+ cat breeds or view all breeds
• Auto-Load: Images load automatically when selecting a breed
• Dark Mode: Toggle between light and dark themes
• Responsive Design: Works perfectly on desktop, tablet, and mobile
• Accessibility First: WCAG AA compliant with keyboard navigation and screen reader support
• Smooth Animations: Enjoy delightful loading states and transitions
• Persistent Preferences: Remembers your theme and breed preferences

🚀 Live Demo

Visit kittypics.lol to see KittyPics in action!

🛠️ Technologies Used

• HTML5: Semantic markup and accessibility features
• CSS3: Custom properties, flexbox, grid, and modern animations
• Vanilla JavaScript: No frameworks, just clean ES6+ code
• The Cat API: Powers all cat images and breed data
• Google Fonts: Fredoka and Nunito for beautiful typography

📱 How to Use

1. Get a Random Cat: Click the "New Cat Please!" button or the refresh icon
2. Filter by Breed: Select a specific breed from the dropdown to see cats of that type
3. Toggle Theme: Click the sun/moon icon to switch between light and dark modes
4. Enjoy: Watch the adorable cats load with smooth animations!

🏗️ Project Structure

kitty-repo/
├── index.html          # Main HTML file with embedded CSS and JS
├── README.md           # This file
└── .git/               # Git repository

🎨 Design System

Colors

• Primary: Soft Pink (#FF6B6B)
• Secondary: Coral (#FFB6C1)
• Background: Gradient from Pink to Turquoise
• Text: Dark Gray (#4A4A4A) / Light Gray (#FFFFFF in dark mode)

Typography

• Display: Fredoka (Playful, rounded)
• Body: Nunito (Clean, readable)

Components

• Claymorphism-style cards with soft shadows
• Accessible buttons with hover and focus states
• Smooth loading animations and skeleton states

🤝 Contributing

This is a fun personal project! If you'd like to contribute:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

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

🙏 Acknowledgments

• The Cat API for providing the amazing cat images and breed data
• Google Fonts for the beautiful typography
• UI UX Pro Max for inspiration in the redesign process

📞 Contact

• Website: kittypics.lol
• Repository: GitHub

---

Made with ❤️ for cat lovers everywhere! 🐱