How to add a Credly Badge page to your site

Hello there!

I recently created a portfolio website for myself at https://dbugr.vercel.app/. While working on it, I faced the challenge of showcasing my various badges and certifications online, as a traditional 2-page resume wouldn't allow me to include all of them. That's where having a portfolio website comes in handy, as it allows recruiters to easily view my credentials separately.
In this post, I will walk you through how I created a separate page for my badges and certificates, complete with badge images and links to the Credly website for verification.

Step 1: Save the Credly page

To get started, I went to the Credly website and saved the page where all my badges are listed. For me, that page is https://www.credly.com/users/abhilash-panicker/badges. By saving this page, I was able to have access to the complete list of all my badges, along with the images of each badge. Additionally, I could obtain the links to each badge individually, making it easier to access the relevant information from the Credly site.

Step 2: Remove non-relevant sections:

Next, I investigated the downloaded HTML file and removed the non-relevant sections. Luckily, I found that the badge names were available in JSON format, which made my life much easier.
Here's an example of what I found:

accepted_badges: [
  {
    id: "f809e5ce-7e81-4790-8797-d287430a497e",
    name: "IBM Machine Learning Specialist - Associate",
    template: "57fdad10-d407-4f3e-bafb-754d565c52c2",
    created_by_id: "d5a90a02-5fe7-4915-a42d-8273c91cab0f",
    created_by_name: "IBM",
    issued_at: "2022-10-06",
    image: "/Badges-Credly_files/Machine_Learning_Specialist_-_Foundational.png",
    desc: "",
    skills: "",
  },
  // more badges...
]

With this information, I was able to put the data in a file and create an object with all the badge information, which I could then iterate through in the next step.

Step 3: Create a separate page for certifications

Once I had gathered all the necessary information about my badges and certifications, I created a separate page on my website dedicated to displaying them. I titled the page "Certifications" and designed it to include a section on the side that would allow users to easily navigate to the websites where they could view my academic projects and badges.

To achieve this, I used a nested div element and the Tailwind CSS framework to create a left side section for the page. The code for this section looks like this:

{/* Social Buttons */}

  {/* Social Links */}
  <h1>
    Links to my Certifications:
  </h1>



        <a href="https://www.credly.com/users/abhilash-panicker/badges">
          →

          <div className="text-lg text-gray-500 font-mono relative overflow-hidden dark:text-gray-300">
            <div className="absolute h-0.5 w-full bg-gray-400 bottom-0 transform -translate-x-24 group-hover:translate-x-0 transition duration-300"></div>
            Credly
          </div>
        </a>
      </div>
    </div>
    <div className="flex flex-row justify-start items-center">
      <div>
        <a href="https://eportfolio.mygreatlearning.com/abhilash-panicker"
           className="flex flex-row items-center space-x-4 group"
        >
          <div className="my-4">&rarr;</div>
          <div className="text-lg text-gray-500 font-mono relative overflow-hidden dark:text-gray-300">
            <div className="absolute h-0.5 w-full bg-gray-400 bottom-0 transform -translate-x-24 group-hover:translate-x-0 transition duration-300"></div>
            GreatLearning
          </div>
        </a>
      </div>
    </div>

As you can see, I used the certData object to iterate through and display each badge as a grid component. To create the grid, I separated each badge's CSS element and used the code below:

Credly Badges:

    {certData.accepted_badges.map((badg, idx) => (

    ))}

Conclusion: This is how you can too have a certifications page on your portfolio website and it can help showcase your skills and accomplishments since it is considered as an important part equivalent to experience while hiring. Feel free to try this on your own. Hope you enjoying reading.