Tarjeta de Perfil avanzada

Resumen general

Este proyecto construye una tarjeta de perfil más avanzada que incluye información del usuario, enlaces a redes sociales, progreso visual de participación en organizaciones, número de seguidores y un botón de acción.

Se centra en consolidar el uso de Flexbox, el manejo de columnas, espaciado mediante gap, y principios básicos de adaptabilidad visual.

Tecnologías utilizadas:

• HTML5 semántico
• CSS3 moderno (Flexbox avanzado, Box Model, uso de fuentes externas)

Conceptos aplicados

Modelo de Caja (Box Model)

El proyecto sigue el modelo de caja estándar, usando box-sizing: border-box de forma global para manejar márgenes, padding y bordes de forma predecible.

Flexbox avanzado

El layout principal utiliza Flexbox para crear dos columnas (social y user-info), separadas por column-gap. Se gestionan distintos anchos (flex-basis) y se evita que los elementos colapsen usando flex-shrink: 0.

Estructura jerárquica y semántica

La estructura HTML se divide en dos section principales, organizadas dentro de un article, lo que mejora la semántica y el acceso para tecnologías asistivas.

Componentes reutilizables y consistencia

El patrón de nombres (social__avatar, social__bio, user-info__cta) sigue una convención que permite una lectura rápida del propósito de cada elemento y facilita su mantenimiento.

Diseño fluido

Aunque no se usan media queries explícitamente en esta primera versión, el diseño se adapta en parte al ancho del contenedor gracias al uso de width: 100% y max-width en la tarjeta principal.

Uso de linear-gradient

Se aplica un degradado simple (linear-gradient) en la barra de progreso para representar de forma visual el porcentaje de organizaciones a las que pertenece el usuario.

Puntos de atención

Responsividad básica

Aunque el diseño es flexible en desktop, aún no se adapta perfectamente a dispositivos móviles. Una futura iteración debería considerar media queries específicas.

Accesibilidad

Los alt de las imágenes están definidos correctamente. Como mejora, podrían ser más descriptivos (por ejemplo: "Icono de GitHub" en lugar de solo "GitHub").

Jerarquía visual

Se utiliza adecuadamente el tamaño de fuentes (font-size) y los pesos tipográficos (font-weight) para reforzar la importancia relativa de cada sección.

Mantenimiento de clases

Aunque hay buena separación de responsabilidades en las clases, sería ideal estandarizar completamente los nombres siguiendo BEM estricto, ya que se observa un pequeño desliz (user__info-icon debería ser user-info__icon para ser coherente).

Consistencia de tamaños

El column-gap de 250px es muy amplio y puede dificultar la responsividad en pantallas más pequeñas. Se podría ajustar dinámicamente más adelante.

Mejoras sugeridas

Adaptabilidad total

Añadir Media Queries para que en pantallas pequeñas las columnas se reorganicen verticalmente en lugar de mantenerse en horizontal.

Interacciones

Agregar efectos de :hover o :focus a los enlaces y botones para mejorar la experiencia de usuario.

Progreso dinámico

En una versión más avanzada, el ancho del linear-gradient podría ser dinámico en base a datos reales usando CSS custom properties o JavaScript.

Optimización de iconos

Cargar los iconos sociales como SVGs inline o sprites para mejorar el rendimiento y la escalabilidad del proyecto.