Very good work dude, well done.
Colour scheme and design looks really rich, very good.
The layout for desktop looks superb, but for mobile?! no it’s seems it’s scaling! check:
I’m not sure, but seems the flex layouting, and applying some percent of space for image and some for text scale the content somehow.
First, add following tag to your header tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I recommend you, you may never override default global font-size(which is 1em, browser decides itself based on user screen size, an other user confs), especially with absolute values(as you did). Removing the font-size won’t break your layout, let user have its font-size specified.
And if you like to go with more globally large font size, use em(not pixel), example 1.3 means 30% more than default size.
for mobile: I just removed the flex layouting form, and let the image goes above (or below) the text, now the text is much better in size. Also removed default font-size you specified(in pixel) and used 1.3em.
This is also better to bring more line-height for mobile view as I applied 2.5em. Same changes the pixel unit sized padding values with relative em for
p tag, check:
You may apply the same thing about the Life of ada section which is great for desktop, but not for mobile.
For mobile: my suggestion is you remove the center vertical line(elements borders), and place each entry next to each other row by row. something like this:
you also set images alt tag, same applied caption for it, really good! pro.
Keep going on great work dude, happy programming