Github Dev Card

Table of Contents

• Table of Contents
• Introdutions
• Features
• Tech Stack
• Usage
• Installation
• Contributing

Introdutions

The Github Dev Card 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 (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 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:

git clone https://github.com/Varshithvhegde/Github-Profile-Card.git

2. Install dependencies:

cd Github-Profile-Card
npm install

3. Environment Variables Create a file .env in the root folder and add your own github api token as below

NEXT_PUBLIC_GITHUB_TOKEN=YOUR_GITHUB_TOKEN

4. Run the development server:

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.