https://github.com/kostyabet/border_gen

Border generator for choosing the appropriate style in your design.
https://github.com/kostyabet/border_gen

css generator nextjs typescript

Last synced: 24 days ago
JSON representation

Border generator for choosing the appropriate style in your design.

• Host: GitHub
• URL: https://github.com/kostyabet/border_gen
• Owner: kostyabet
• Created: 2024-08-15T19:37:52.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2024-08-17T18:05:16.000Z (3 months ago)
• Last Synced: 2024-10-05T06:42:39.565Z (about 1 month ago)
• Topics: css, generator, nextjs, typescript
• Language: TypeScript
• Homepage: https://kostyabet.github.io/border_gen/
• Size: 148 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Border Generator

![Node.js Version](https://img.shields.io/badge/node-20.15.1-brightgreen)

![TypeScript](https://img.shields.io/badge/TypeScript-5.5.4-blue)

![npm Version](https://img.shields.io/badge/npm-10.7.0-red)

Border generator for choosing the appropriate style in your design.


## Content

- [Download](#download)

- [Using](#using)

- [Scripts](#scripts)

- [Deployment](#deployment)

- [Project structure](#project-structure)

- [Gratitude](#gratitude)

## Download

1. Clone this repo in your work directory: 

   `git clone https://github.com/kostyabet/border_gen.git`

2. Go to the project directory: 

   `cd border_gen`

3. Install dependencies: 

   `npm install`

## Using

After this you should start project:

- Start project in development mode: `npm run dev`

- Start project in production mode: `npm run build`

## Scripts

Basic npm scripts `npm`:

- `next link` -  Tool for developing and testing npm packages iteratively without having to continually rebuild.

- `npm run dev` - Start project in development mode.

- `npm run build` - Start project in production mode.

- `npm run start` - Start build project.

## Deployment

This project is automatically published on github pages using GitHub actions.

The github actions file is located on the path `.github\workflows\publish.yml`.

Publish.yml contains 2 blocks:

- Build block with cache optimization;

- Github pages deploy part.

## Project structure

```plaintext

├── .github                  

│   └── workflows           

│       └── publish.yml         # *.yml which deploy project on Github pages

├── fonts                       # DIN Pro fonts used in the project

├── pages      

│   ├── BorderGenerator.tsx     # Main Shadow Generator *.tsx

│   ├── _app.tsx                # File for include reset.css

│   └── index.tsx               # Main *.tsx project file

├── styles                  

│   ├── index.module.css        # Main CSS file

│   └── reset.css               # File which reset all styles

├── package.json                # The main Node configuration file.js of the project

├── package-lock.json           # Captures the exact versions of all installed packages and their dependencies

├── next-env.d.ts               # Typing of global variables and modules and automatic generation

├── next.config.mjs             # Adjusts the behavior of the application Next.js

└── tsconfig.json               # TypeScript Configuration

```

## Gratitude

If you liked this project, please put a star on this repository!!!

Inspired by neumorphism.