Флексбокс сложный дизайн ⇐ CSS

[Anonymous]

Я работаю над проектом React. Я хочу создать гибкий макет, но изо всех сил пытаюсь добиться желаемого дизайна.
Скажите, пожалуйста, как бы вы это сделали? Или, может быть, порекомендуйте какой-нибудь другой подход?
Разметка цели:
Изображение макета
На данный момент это мой код:
HTML



[img]{profile}
className="profilePic"
/>



Hola! Soy Oscar Garza




Desarrollador web y móvil con experiencia en…

[img]{coding}
className="coding"
/>



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;
}


Подробнее здесь: https://stackoverflow.com/questions/792 ... lex-design