I am eager to dive into a challenging project. My goal is to replicate the design shown in the image below using React JS. Initially, I considered using position: absolute and manipulating the positioning of my divs accordingly. However, upon closer inspection, accomplishing this task seems daunting due to the numerous tags needed for responsiveness and the tedious nature of manually adjusting pixel values. I am now seeking advice or perhaps a plugin that can help simplify this process. Feel free to respond with basic colored square-rectangles if it aids in explaining how I can achieve this effect without focusing on the specific design.
Presently, I have the following code structure:
React JS divs:
profile_picture = () => {
return (
<div className="profilepicturetechstack">
...
</div>
)
}
CSS associated class:
.profilepicturetechstack {
display: flex;
...
}
...
.text-1-3 {
text-align: left;
...
}
If you could offer some guidance or best practices while omitting my code to focus on the main purpose, I would greatly appreciate it. I am feeling a bit overwhelmed. Thank you!
Figma screenshot for reference: https://i.stack.imgur.com/GBMHC.png