I'm trying to make a circular contact card for a website

I'm currently stuck on making a contact card for a website. I got some working prototypes with a lot of position: relative and absolute, but whenever I tried resizing the parent to make it responsive, it just breaks. The prototype was just hacked together to work, and the code was really long and bad, so I'm interested in how you would solve such a problem. I made a quick sketch to illustrate my problem. As you can see in the picture I want a circular picture in 1:1 ratio. On the right I want a small title with a different background color, a small paragraph about the person, and lastly a small footer. If you know any good frameworks that could help, feel free to recommend. Thanks!