https://github.com/varshithvhegde/github-profile-card
An Simple yet powerful github card generator which showcases your github achievements
https://github.com/varshithvhegde/github-profile-card
github-card github-profile profile-card ui-card ui-cards
Last synced: 4 months ago
JSON representation
An Simple yet powerful github card generator which showcases your github achievements
- Host: GitHub
- URL: https://github.com/varshithvhegde/github-profile-card
- Owner: Varshithvhegde
- Created: 2024-01-27T06:05:31.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-05T14:39:58.000Z (about 2 years ago)
- Last Synced: 2025-08-10T06:46:11.458Z (6 months ago)
- Topics: github-card, github-profile, profile-card, ui-card, ui-cards
- Language: TypeScript
- Homepage: https://github-devcard.vercel.app/
- Size: 394 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Github Dev Card
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Introdutions](#introdutions)
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Usage](#usage)
- [Installation](#installation)
- [Contributing](#contributing)
## Introdutions
[The Github Dev Card](https://github-devcard.vercel.app/) project provides a personalized and visually appealing solution to share your Github profile in a unique way. Tired of the standard Github profile pages? Now, with Github Dev Card, you can create your own custom card, making it easier and more enjoyable to share your Github information. This project simplifies the process, allowing users to generate a personalized Github card by simply entering their Github username. Additionally, users can easily download the card in high quality as a PNG image or share it instantly or share it via good old [FreeShare](https://freeShare.vercel.app) (Yeah my own previous project 😁).
## Features
1. **Easy Generation of Github Dev Card**
The primary feature of this project is the ability to create a custom Github Dev Card effortlessly. Users only need to input their Github username, and the card is automatically generated with all relevant details.
2. **High-Quality PNG Download**
Users can download their generated Github Dev Card as a high-quality PNG image. This feature is useful for those who want to save or share the card locally.
3. **Instant Share**
In addition to downloading, users can instantly share their Github Dev Card without the need for a download. The project incorporates the FreeShare functionality, making sharing seamless.
4. **Multiple Stylish Options**
Github Dev Card offers users a choice of styles for their cards, including Minimalistic, Minimalistic Dark Mode, and Futuristic. This customization allows users to select a style that suits their preferences.
5. **3D Tilt View**
One of the Card offeres 3D tilt view moreover it works with gravity (in Mobile View) and Mouse Movement (Desktop View).
## Tech Stack
The Github Dev Card project utilizes the following technologies:
1. **NextJS**
NextJS, a React framework, is at the core of this project. Its server-side rendering (SSR) capabilities enable efficient rendering and enhanced performance.
2. **Github API Integration**
The project leverages the Github API to fetch and display user-specific information dynamically. This ensures that the Github Dev Card is always up-to-date.
3. **Chakra UI**
Chakra UI is employed for building a visually appealing and responsive user interface. It provides a set of accessible and customizable components, contributing to a consistent and aesthetic design.
## Usage
Using Github Dev Card is a straightforward process:
1. Visit the [Github Dev Card](https://github-devcard.vercel.app) website.
2. Enter your Github username.
3. Select the preferred style (Minimalistic, Minimalistic Dark Mode, or Futuristic).
4. Click on the "Submit" button.
Your personalized Github Dev Card will be generated instantly. From here, you can download the card as a PNG image or share it directly.
## Installation
To set up Github Dev Card locally or contribute to the project, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/Varshithvhegde/Github-Profile-Card.git
```
2. Install dependencies:
```bash
cd Github-Profile-Card
npm install
```
3. Environment Variables
Create a file **.env** in the root folder and add your own [github api token](https://github.com/settings/tokens) as below
```
NEXT_PUBLIC_GITHUB_TOKEN=YOUR_GITHUB_TOKEN
```
4. Run the development server:
```bash
npm run dev
```
Open http://localhost:3000 in your browser to view the project.
## Contributing
Contributions to the Github Dev Card project are welcome! Feel free to open issues for bug reports or feature requests. If you'd like to contribute code, please follow the contribution guidelines.