Skip to Main Content

Quickstart: creating your Profile with JSON

Add your Profile

There are 4 ways you can add your Profile with json, but for this Quickstart we will use the GitHub UI.

To do this, you need a GitHub account. If you do not have one yet, you can create one for free with an email address and password.

  1. Log in to your GitHub Account
  2. Visit the BioDrop repo

BioDrop GitHub repo

  1. If you wish to be kept up to date with the repo, hit that "Star" at the top right

Start BioDrop

  1. Click on Fork

create a new fork

  1. Accept the default fork name, click on 'Create fork'. A forked copy of the BioDrop project is now open in your GitHub account

Forked BioDrop

BioDrop form

  1. Click add file and select "create new file"

Create new file

  1. In the file path at the top, add data/ followed by your GitHub username, exactly as it appears including capitalization if any, and then append .json to it.

For example for username "eddiejaoude":

  • Correct: BioDrop/data/eddiejaoude.json (this example: no capitalization in filename)
  • Incorrect: BioDrop/data/EddieJaoude.json (filename capitalization does not match username)

create json file

  1. For the file contents use the json structure below:
{
  "name": "Eddie Jaoude",
  "bio": "Open Source DevRel | Founder of **EddieHub** and [BioDrop](https://biodrop.io) | **GitHub** Star"
}
fieldtypedescription
namestringYour display name on your Profile
biostringYour description about yourself (you can use markdown here)
  1. Now add links to your social media and other content (for example: website) so they appear on your Profile.
{
  "name": "Eddie Jaoude",
  "bio": "Open Source DevRel | Founder of **EddieHub** and [BioDrop](https://biodrop.io) | **GitHub** Star",
  "links": [
    {
      "group": "Business",
      "name": "Business: DevRel Services",
      "url": "http://eddiejaoude.io",
      "icon": "FaLink"
    }
  ]
}

note: do not have duplicate links (url)

fieldtypedescription
namestringThe display name for the button
urlstringFull url to the resource
iconstringThe icon you would like displayed. We support the following icon sets: Fa and Si from React Icons. You can search available icons

propose new file

To add more links, add another object inside the links collection. For example:

  "links": [
    {
      "group": "Business",
      "name": "Business: DevRel Services",
      "url": "http://eddiejaoude.io",
      "icon": "FaLink"
    },
    {
      "group": "Socials Primary",
      "name": "Twitter: Follow me",
      "url": "https://twitter.com/eddiejaoude",
      "icon": "FaTwitter",
      "color": "#00ACEE"
    },
]
  1. Scroll to the bottom and commit new file by adding the commit message that starts data: followed by your GitHub username (for example data: eddiejaoude)

You can skip optional extended message

  1. Click create new branch and you can use the default name provided
  2. Then, click Propose changes

propose new file

DropdownDescriptionExample values
1st dropdownBase repository (destination)EddieHubCommunity/BioDrop
2nd dropdownBase repository branch (destination)main
3rd dropdownYour repository (source)your-username/BioDrop
4th dropdownYour repository branch (source)your-username-patch-1

The first dropdown for the base repository (destination) should be set to EddieHubCommunity/BioDrop not your username your-username/BioDrop.

compare across forks

  1. Click Create pull request
  2. The description will be filled with a template, please fill in the appropriate sections

create pull request

  1. Click Create pull request

  2. Now you need to wait to have your Pull Request (changes) reviewed

pull request

An approving review from one of BioDrop's maintainers will show a green check mark next to their id.

maintainer review

  1. You will receive a GitHub notification when you have a comment, review, or your Pull Request has been merged
  2. Once merged, your profile will be available a few minutes later, with your custom BioDrop URL BioDrop.io/eddiejaoude

Example Profiles

Looking for inspiration? You can view the full profile docs for an example.

Next steps