Shayla's Alpaca Image Generator A fun and interactive web application that allows users to create custom alpaca avatars by mixing and matching different accessories, backgrounds, and features. Built with Next.js and styled with Tailwind CSS. 🦙 Features
Interactive Alpaca Customization: Mix and match different alpaca features including:
Hair styles Ears Eyes Mouth expressions Neck accessories Leg accessories Backgrounds
Real-time Preview: See your alpaca update instantly as you make changes Download Functionality: Save your custom alpaca as an image Random Generation: Generate random alpaca combinations for inspiration Responsive Design: Works seamlessly on desktop and mobile devices
🚀 Tech Stack
Framework: Next.js - React framework for production Styling: Tailwind CSS - Utility-first CSS framework Language: JavaScript/JSX Package Manager: npm
View the Demo here 👉🏾 (https://alpaca-generator-website-git-main-shayla-develops-webs-projects.vercel.app)
📦 Installation
Clone the repository git clone [(https://github.com/shayla-develops-webs/image-generator-website)] cd image-website-generator
Install dependencies npm install
Run the development server npm run dev
Open your browser Navigate to http://localhost:3000 to see the application.
🎨 Customization Options The alpaca generator includes the following customizable features:
Hair: Various hairstyles and colors Ears: Different ear shapes and accessories Eyes: Multiple eye expressions and styles Mouth: Various mouth shapes and expressions Neck: Accessories like scarves, ties, and necklaces Legs: Different leg accessories and patterns Backgrounds: Multiple background scenes and colors
🛠️ Development Adding New Features To add new alpaca features:
Add image assets to the appropriate folder in public/alpaca/ Update the customization options in your components Ensure proper naming conventions for easy asset loading
Styling Guidelines This project uses Tailwind CSS for styling. Key conventions:
Use utility classes for consistent spacing and colors Responsive design with mobile-first approach Custom color palette for the alpaca theme
Available Scripts
npm run dev - Start development server npm run build - Build for production npm run start - Start production server npm run lint - Run ESLint
📱 Responsive Design The application is fully responsive and optimized for:
Desktop computers Tablets Mobile phones
🎯 Future Enhancements
Save alpaca creations to local storage Share alpacas via social media Alpaca animation features More accessory options Custom color picker for accessories Alpaca collection gallery
🤝🏾 Contributing
Fork the repository Create a feature branch (git checkout -b feature/amazing-feature) Commit your changes (git commit -m 'Add amazing feature') Push to the branch (git push origin feature/amazing-feature) Open a Pull Request
📄 License This project is open source and available under the MIT License. 🙏🏾 Acknowledgments
Inspired by the CodeMentor.io Alpaca Image Generator project Alpaca illustrations and assets Next.js and Tailwind CSS communities
📞 Contact For questions or suggestions, please feel free to reach out!
Happy Alpaca Creating! 🦙✨