Creating a Versatile Developer Profile Card with React
Tags: codepen, webdev, react
Published: 2023-06-12 21:49:19

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](https://www.udemy.com/course/the-ultimate-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.

![Image of the Developer Profile Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hni3gdhm0t7u0w6nu19m.png) 

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.

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

3. Used the `getRandomColor` function to assign a `bgColor` to each skill.

`bgColor: getRandomColor(colors)`

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

```js
<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.

```js
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:

{% codepen https://codepen.io/ritabradley_dev/pen/rNQOVqy %}

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!