All solutions

I am open to any suggestions, opinions and corrections on how I can make this better.

Is there any better way to achieve the layout in the "text-img overlap" - the second section of the web page? I used position properties to do that in this solution

I used grid to make the re-ordering of items when viewport changes easy. I will love to know if there is any other way I can do that🤗🤗

For the top section of the profile card where bg-pattern-card image is, I used the bg-pattern-card image as the background image - I set it not to cover the whole container so as to have white background for the profile image and used margin-top to push the profile image down. I want to know if there are other ways to this.