Creating a Versatile Developer Profile Card with React

Hey fellow coders! Today I want to walk you through the process of creating a Developer Profile Card using React. This project started as a practice exercise from Jonas Schmedtmann's React course, but instead of following the tutorial, I decided to challenge my imposter syndrome and create my own version. The result? A vibrant profile card that doubles as a testament to my growing confidence in React.

This Developer Profile Card, with a few tweaks, can be repurposed as a product description card, a recipe card, a blog post card, etc. To follow along, you should have a basic understanding of JavaScript and some fundamental React concepts, such as creating components, JSX, and passing props.

The first step in creating this project was to identify and create the components needed. The Avatar and Intro components were pretty straightforward, consisting of an image, an h1 for my name, and a paragraph for self-introduction.

However, the real fun began when I started working on the Skill and SkillsList components. Each skill consists of a skill name, an emoji, and a corresponding background color. The challenge was getting different background colors for each skill. Here's what I did:

1. Created an array of colors.
2. Created a getRandomColor function that returns a random item from the array.

const getRandomColor = (arr) => {
  return arr[Math.floor(Math.random() * arr.length)];
};

1. Used the getRandomColor function to assign a bgColor to each skill.

bgColor: getRandomColor(colors)

1. Used the style attribute to set each skill's backgroundColor to its corresponding bgColor.

<p className="skill" style={{ backgroundColor: bgColor }}>
  {name} <span>{emoji}</span>
</p>

In the SkillsList component, I map over each object in skillsData and return a Skill component with the necessary props.

function SkillsList() {
  return (
    <>
      <ul className="skill-list">
        {skillsData.map((skill) => (
          <Skill
            key={skill.name}
            name={skill.name}
            emoji={skill.emoji}
            bgColor={skill.bgColor}
          />
        ))}
      </ul>
    </>
  );
}

Upon completion, I found the outcome quite satisfying, having successfully added a more dynamic color selection to the project. It was a funny realization when my initial idea of assigning a random color to a variable resulted in all the badges getting the same color. This little challenge reminded me to trust my instincts, leading me back to the function-based solution. You can check out my CodePen below:

Looking forward, I plan to enhance the Intro component by making it dynamic and reusable via props. Remember, developers, there is no harm in challenging yourself and stepping out of the comfort zone of tutorials. Each time you do, you are one step closer to combating that imposter syndrome. Happy coding!

Comments

[Joel Jaison]

Insted of building from scratch , Utilize libraries like Material-UI for card layout, React-Icons for icons, and react-image for images to simplify and enhance developer card creation.