@torrez_mn/gh-card v1.0.15

GitHub-ProfileCard

Small component to display GitHub profiles in various ways. Completely responsive.

Installation

You can install this component in your project with the fallowing command:

npm i @torrez_mn/gh-card

or by:

npm install @torrez_mn/gh-card

Usage

In your component import the component as fallows:

import '@torrez_mn/gh-card';

Now you can use the component in three diferent ways.

Normal

See a Code Sandbox React demo here.

Create a small card with a brief description and some statistical data of the user.

{/* REACT DEMO */}

{/* IMPORTS */}
import '@torrez_mn/gh-card';

function MyComponent() {
	return (
		<div>

			{/* COMPONENT */}
			<gh-card 
			gh-user='yogonza524'
			gh-mode='normal' 
			gh-primary-color='rgba(0,23,255,.5)'
			gh-secondary-color='whitesmoke'
			/>

		</div>
	);
}

export default MyComponent;

Normal - Horizontal

See a Code Sandbox React demo here.

Produces the same result as the normal version but horizontally.

{/* REACT DEMO */}

{/* IMPORTS */}
import '@torrez_mn/gh-card';

function MyComponent() {
	return (
		<div>

			{/* COMPONENT */}
			<gh-card 
			gh-user='getify'
			gh-mode='horizontal'
			gh-primary-color='rgba(245, 40, 145, 0.8)'
			gh-secondary-color='rgba(0, 100, 20, 1)'
			/>

		</div>
	);
}

export default MyComponent;

Horizontal with Projects

See a Code Sandbox React demo here.

Produce a full screen landscape version with public projects on github. Randomly displays data from the user's public projects and the languages used.

{/* REACT DEMO */}

{/* IMPORTS */}
import '@torrez_mn/gh-card';

function MyComponent() {
	return (
		<div className="App">

			{/* COMPONENT */}
			<gh-card 
			gh-user='TorrezMN'
			gh-mode='horizontal-projects' 
			/>

		</div>
	);
}

export default MyComponent;

Docs

Brief description of the component's props.