Skip to content

Commit

Permalink
🧹 chore(app): update README
Browse files Browse the repository at this point in the history
  • Loading branch information
gerdesque committed Oct 16, 2024
1 parent fce2bfe commit 232e74c
Showing 1 changed file with 31 additions and 28 deletions.
59 changes: 31 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,50 +1,53 @@
# Grid
<p align="center">
<a href="https://digitalwarenkombinat.github.io/grid/">
<img alt="Logo of 'Grid Art Designer'" src="public/about.svg">
</a>
</p>

---

## About [_Grid Art Designer_](https://digitalwarenkombinat.github.io/grid/)


# Grid Art Designer

## Overview
Grid Art Designer allows users to create and download grid-based SVG artwork, with options to toggle filters and download the final image as an SVG or PNG.

Inspired from Alex Trosts article [Creating Generative SVG Grids](https://frontend.horse/articles/generative-grids/).

## Installation
## Feedback

1. Clone the repository:
Feel free to send us feedback on [Instagram](https://www.instagram.com/digitalwarenkombinat/) or [file an issue](https://github.com/digitalwarenkombinat/glamorouseurope/issues/new). Feature requests are always welcome.

```
git clone https://github.com/your-repo/grid-art-designer.git
cd grid-art-designer
```
## Getting started

2. Install dependencies:
Run the following command on your local environment:

```
npm install
git clone --depth=1 https://github.com/digitalwarenkombinat/grid.git
cd grid
npm install
```

3. Run the development server:
You can run the application in development mode with live reload:

```
npm run dev
npm run dev
```

4. Open http://localhost:3000 to view the app.

## Usage
Open http://localhost:3000 with your favorite browser to see the application.

- Use the filters to apply different block styles.
- Download your artwork by clicking "Download SVG" or "Download PNG".

## Dependencies
```
.
├── README.md # README file
├── next.config.js # Next configuration
├── public # Public folder for assets and fonts
├── src # UI components
└── tsconfig.json # TypeScript configuration
```

- Next.js: React framework for server-side rendering.
- React: JavaScript library for building user interfaces.
- Tailwind CSS: Utility-first CSS framework.
- html-to-image: Library for converting HTML nodes to images.
You can see the results locally in production mode with:

## License
```
npm run build
npm run start
```

This project is licensed under the MIT License.
The generated HTML and CSS files are minified (built-in feature from Next).

0 comments on commit 232e74c

Please sign in to comment.