Flexbox complex design

I’m working on a React project. I want to create a flex layout but I’m struggling to achieve the design I’m looking for.

Can you please tell me how would you do it? Or maybe recommend any other approach to it?

The goal layout:Layout image

This is my code so far:

HTML

<div className="main"><div className="secondRow"><div className="profilePicContainer"><img                    src={profile}                    alt="profilePic"                    className="profilePic"                /><div className="profilePicBackground"></div></div><div className="welcomeContainer"><h1>Hola! Soy Oscar Garza</h1></div></div><div className="thirdRow"><div className="description"><p>Desarrollador web y móvil con experiencia en…</p></div><img                src={coding}                alt="coding gif"                className="coding"            /></div></div>

CSS

@import '../../assets/styles.css';.secondRow {    flex: 1;    display: flex; } .profilePicContainer {    flex: 1;    display: flex;    justify-content: center;    position: relative; } .profilePicBackground {     background-color: var(--red);     border-radius: 16px;     width: 170px;     height: 150px;     margin-top: 100px;     align-items: center;     justify-content: center; } .profilePic {     position: absolute;     top: 0;     left: 10;     z-index: 1; } .welcomeContainer {     flex: 3;     background-color: orange;     border-radius: 16px; } .thirdRow {     flex: 1; }