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:
- Created an array of colors.
- Created a
getRandomColor
function that returns a random item from the array.
const getRandomColor = (arr) => {
return arr[Math.floor(Math.random() * arr.length)];
};
- Used the
getRandomColor
function to assign abgColor
to each skill.
bgColor: getRandomColor(colors)
- Used the style attribute to set each skill's
backgroundColor
to its correspondingbgColor
.
<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!
Top comments (1)
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.