-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from gimnathperera/doc/readme-update
doc: update readme & favicon
- Loading branch information
Showing
3 changed files
with
50 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,36 +1,64 @@ | ||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). | ||
<p align="center"> | ||
<img src="/resources/rainbow.png" alt="Project Logo" width="200"> | ||
</p> | ||
|
||
# Rainbow Riot | Color Palate Generator From Images | ||
|
||
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/your-username/your-project-name/blob/main/LICENSE) [![Next.js Version](https://img.shields.io/badge/Next.js-13.0.0-blueviolet.svg)](https://nextjs.org/) [![TypeScript Version](https://img.shields.io/badge/TypeScript-4.5.2-blue.svg)](https://www.typescriptlang.org/) | ||
|
||
<!-- <img width="1431" alt="image" src="/resources/screen-capture.gif"> --> | ||
|
||
## Table of Contents | ||
|
||
- [Rainbow Riot | Color Palate Generator From Images](#rainbow-riot--color-palate-generator-from-images) | ||
- [Table of Contents](#table-of-contents) | ||
- [About](#about) | ||
- [Features](#features) | ||
- [Getting Started](#getting-started) | ||
- [Usage](#usage) | ||
- [Contributing](#contributing) | ||
- [License](#license) | ||
|
||
## About | ||
|
||
Rainbow Riot is an open-source web application that allows users to upload images and automatically generate beautiful color palettes from them. Whether you're a designer looking for inspiration or a developer looking to integrate color extraction into your project, this tool is designed to make the process easy and efficient. | ||
|
||
## Features | ||
|
||
- **Color Palate Generation:** Generate a color pallate based on the uploaded image or gif | ||
|
||
- **Interactive Web Interface:** A sleek and user-friendly web application built with [DaisyUI](https://daisyui.com 'DaisyUI'). | ||
|
||
- **MIT License:** Open-source and available for use in your projects. | ||
|
||
## Getting Started | ||
|
||
First, run the development server: | ||
1. Clone this repository: | ||
|
||
` git clone https://github.com/your-username/your-project-name.git` | ||
|
||
```bash | ||
npm run dev | ||
# or | ||
yarn dev | ||
# or | ||
pnpm dev | ||
# or | ||
bun dev | ||
``` | ||
2. Install dependencies: | ||
|
||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. | ||
`cd your-project-name` | ||
`yarn install` | ||
|
||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. | ||
3. Run dev server: | ||
`yarn dev` | ||
|
||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. | ||
4. Open your browser and visit http://localhost:3000. | ||
|
||
## Learn More | ||
## Usage | ||
|
||
To learn more about Next.js, take a look at the following resources: | ||
1. **Upload an Image**: Click the "Upload Image" button and select an image from your computer. The application will analyze the image and generate a color palette for it. | ||
2. **Explore Color**: Explore each color in the palette by clicking on the color swatches. You can copy HEX or RGB values to your clipboard. | ||
3. **Save Palette**: To save the palette, click the "Save Palette" button. You can download it as a text file for future use. | ||
|
||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. | ||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. | ||
## Contributing | ||
|
||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! | ||
We welcome contributions from the community! To contribute to this project, please follow our Contributing Guidelines. | ||
|
||
## Deploy on Vercel | ||
## License | ||
|
||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. | ||
This project is licensed under the MIT License - see the LICENSE file for details. | ||
|
||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. | ||
_Made with ❤️ by [Gimnath Perera](https://github.com/Gimnath-Perera)_ |
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.