https://github.com/bccpadge/job-cards

UI Design Daily - Job Cards
https://github.com/bccpadge/job-cards

reactjs

Last synced: 7 days ago
JSON representation

UI Design Daily - Job Cards

• Host: GitHub
• URL: https://github.com/bccpadge/job-cards
• Owner: bccpadge
• Created: 2024-12-10T22:59:55.000Z (12 days ago)
• Default Branch: uidesigndaily
• Last Pushed: 2024-12-10T23:25:45.000Z (12 days ago)
• Last Synced: 2024-12-11T00:25:01.301Z (12 days ago)
• Topics: reactjs
• Language: JavaScript
• Homepage: https://bccpadge.github.io/job-cards/
• Size: 418 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Job Cards UI Component - React.js

This is a **Job Card UI component** built with **React.js** and **CSS**, inspired by a design from [UI Design Daily](https://www.uidesigndaily.com/). It showcases a job-related icon with a linear gradient background and a button displaying the number of open positions.

## Design

![Job Cards Design](./design/job-cards-design.jpg)

## Screenshot 

![Job Cards screenshot](./desktop.png)

## Demo

- View the live demo on [GitHub Pages](https://bccpadge.github.io/job-cards/) 

## Features

- **Job Icon**: Customizable icon with a linear gradient background representing the job category.

- **Open Positions Button**: Displays the number of available job positions.

- **Responsive Design**: Fully responsive and ready for integration into job boards or career pages.

## Setup

This project uses **Vite** for fast React development and features hot module replacement (HMR). It comes with essential configurations, including ESLint rules for code quality.

### Installation

1. Clone the repository:

```bash

   git clone https://github.com/yourusername/job-cards.git

```

2. Install dependencies:

```bash

   cd job-cards

   npm install

```

3. Run the development server:

```bash

   npm run dev

```

## React + Vite

This project is set up with **Vite**, offering a minimal and fast development environment for React:

- **@vitejs/plugin-react**: Uses Babel for Fast Refresh.

- **@vitejs/plugin-react-swc**: Uses SWC for Fast Refresh.

For more information, check out the official Vite React plugins:

- [Vite React Plugin (Babel)](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md)

- [Vite React Plugin (SWC)](https://github.com/vitejs/vite-plugin-react-swc)