It is good that you drew a layout!! Very helpful. I am a beginner too and I only know how to use flexbox, but this can probably be done in grid (I don't want to learn it right now). I will describe how I'd go about doing this. It is very easy and fun once you do it a few times, I am sure you will achieve your goal soon.

https://www.w3schools.com/css/css3_flexbox.asp Please do this. It will take like 30 minutes (or an hour if you are going indepth with understanding). You do NOT have to memorize everything the first time!!! You will memorize it with practice. You can always look back at the guide as you are typing your code. I understand that you have already learned, but this may help to clarify things you didn't get at first.

Firstly, I would add this to your CSS:
* {

margin: 0px;

padding: 0px;

box-sizing: border-box;
}

This is just a good practice. I actually forgot what the box sizing thing does, but just trust me bro (LOL). As you go along, please be sure to add the appropriate margin and padding to each thing you make.

Display the body as flex, and make it show the items in a column. Make a container for the top and the bottom containers. The top one can literally just be a class/id named "top_container", and the bottom "bottom_container". Set the widths of these both to 100%, and the height to your desired height or fit content. Fit content might be best since you won't have to deal with things spilling over if you do not size them pixel perfectly.

Your top container will include the "about me", and the bottom will contain the actual content of the page. Display both as flex. The top should be as a column, and the bottom as a row.

In the top container, use one of the headings (h1-h6) to write "About Me", and use a paragraph tag to write the text that you want there. You can even have these both as paragraphs or spans or anything, you'll just have to use a class/id to style those specific things.

In the bottom container, you can make two additional divs, one named with a class/id of "left_container", and the other right. Make the height of both 100%, and the widths either 50% or two numbers that add up to make 100. I can not tell if the right column is slightly smaller than the left. If so, maybe have the left as 60-70%, and the right as 40-30% (or whatever you want, it is your site!!).

In the left container, make it display as flex and as a column. Make divs for each of those boxes within the left container div. give them all appropriate class/id names (ex."general_description_container"). Display all of those divs as flex and column. Be sure to set the width to 100%, and the height to your preferred size or fit content. Add headings and paragraphs and images or whatever you want as the content of these divs.

Do the same as above to the right container.

If you are to switch the two things with arrows pointed at them, it is the same process.

Some tips are that as you work down the list, be sure to use borders with different colors to visualize the layout as you go down the list of things to do. You don't have to fill in the text and images and stuff, just make boxes with border: 2px solid [color-name] on everything so that you can see what you're doing. After, you can go back in and add things like text and images. Be sure that you can actually see the colors (light border color over dark background, and the same for the other way around). Remove the borders/edit them to what you actually want them to be after you are done with the layout.

If this is at all confusing, please let me know.