En esta etapa del proyecto, aprendí a aplicar Media Queries para adaptar el diseño a diferentes tamaños de pantalla. También ajusté el encabezado y los enlaces del menú para que se vean bien en dispositivos móviles. Además, personalicé el contenido del portafolio para que refleje mi identidad como desarrollador. Usar flex-direction, gap y padding me permitió lograr una estructura más limpia y responsiva.
1) Espacio entre imagen y texto
.presentacion {
gap: 82px;
}
2) Cambiar diseño en pantallas menores a 1023px
@media (max-width: 1023px) {
.presentacion {
flex-direction: column;
}
}
3) Invertir orden de elementos en pantallas menores a 1200px
@media (max-width: 1200px) {
.presentacion {
flex-direction: column-reverse;
}
}
4) Ajustar encabezado
@media (max-width: 1200px) {
.header {
padding: 10%;
}
}
5) Centrar elementos del menú
@media (max-width: 1200px) {
.header__menu {
justify-content: center;
}
}
