Hola Estudiante, espero que estés bien

Veo que estás trabajando en la responsividad de tu proyecto de portafolio. Vamos a revisar tu código y los puntos que necesitas ajustar:

1. Espacio entre texto e imagen: Ya has utilizado la propiedad gap en la clase .presentacion, lo cual es correcto para crear espacio entre los elementos. Asegúrate de que este valor sea suficiente para evitar que la imagen se pegue al texto en pantallas más pequeñas.

2. Disposición en columnas para pantallas pequeñas: Has implementado correctamente una media query para cambiar la dirección de los elementos a columna cuando la pantalla es menor de 1023px. Esto está bien para seguir el diseño móvil.

3. Orden de los elementos: Para cambiar el orden de los elementos cuando la pantalla es inferior a 1200px, puedes usar flex-direction: column-reverse en la media query correspondiente. Sin embargo, ya estás utilizando order: -1 para la imagen, lo cual también es válido.

4. Ajustes en el encabezado: Has ajustado el padding del encabezado para pantallas más pequeñas, lo cual es correcto. Asegúrate de que estos valores se alineen con el diseño deseado.

5. Centrado del menú: Ya has usado justify-content: center en la clase .header__menu, lo cual es correcto para centrar los elementos del menú.

6. Refinamiento del diseño: Continúa ajustando los valores de padding y gap según sea necesario para que el diseño se vea bien en todas las resoluciones.

Parece que ya has implementado la mayoría de los ajustes necesarios. Si notas algún comportamiento no deseado, intenta ajustar los valores de gap, padding y order hasta lograr el diseño deseado.

Espero haber ayudado y buenos estudios!