emkelley

🃏 npx business card

Usage no npm install needed!

<script type="module">
  import emkelley from 'https://cdn.skypack.dev/emkelley';
</script>

README

🃏 business card

npm npm

Digital business card.

business card

📦 Installation

Installation is not required, as you can run this package with npx.

🥑 Usage

npx bradgarropy

🕺🏼 Create Your Own

First, fork this repository, clone it your machine, and install the dependencies.

git clone https://github.com/bradgarropy/business-card.git
cd business-card
npm install

Next, use the generator to update the config.json file for you.

npm run generate

Or if you prefer, modify the config.json file by hand. The info section is all about you, and the style section controls different visual elements of the business card. Here's an example.

{
    "info": {
        "name": "Brad Garropy",
        "handle": "bradgarropy",
        "company": "Adobe",
        "title": "Senior Frontend Developer"
    },
    "links": [
        {
            "name": "Website",
            "url": "https://bradgarropy.com"
        }
    ],
    "style": {
        "corners": "double",
        "divider": "triple",
        "baseColor": "white",
        "accentColor": "blue"
    }
}

Finally, update the name field in the package.json and publish to npm! I highly recommend that the name field matches your primary online username (ex: bradgarropy). Now anyone with npm installed can see your business card!

🎨 Style Configuration

You can customize certain visual aspects of the business card. Each one comes with preset values for you to choose from.

style.corners

Name Example
normal ┌┐
rounded ╭╮
heavy ┏┓
double ╔╗
doubleTop ╒╕
doubleSide ╓╖

Special characters used for the corners of the business card.

{
    "style": {"corners": "heavy"}
}

style.dividers

Name Example
normal ─────
triple ┄┄┄┄┄
quadruple ┈┈┈┈┈

Special characters used for the horizontal rule above the footer.

{
    "style": {"dividers": "triple"}
}

style.baseColor

Name
black
red
green
yellow
blue
magenta
cyan
white
blackBright
redBright
greenBright
yellowBright
blueBright
magentaBright
cyanBright
whiteBright

The color of the borders, job line, and link labels. You can use any chalk color value.

{
    "style": {"baseColor": "white"}
}

style.accentColor

Name
black
red
green
yellow
blue
magenta
cyan
white
blackBright
redBright
greenBright
yellowBright
blueBright
magentaBright
cyanBright
whiteBright

The color of the name link, link urls, and footer text. You can use any chalk color value.

{
    "style": {"accentColor": "blue"}
}

🎞 Credit

Inspired by J.C. Hiatt.
Accomplished with the help of this article.