Proyectos

Reto enlaces de perfil social

Desarrollo
Frontend Mentor
Social Links
Astro
HTML
CSS
Inter

Solución al reto Social Links Profile de Frontend Mentor, enfocado en diseño responsivo, accesibilidad y buenas prácticas de HTML y CSS. Implementado con Astro y técnicas modernas de frontend.

Captura de pantalla del componente Social Links Profile en modo responsivo

Este proyecto es mi solución al reto Social Links Profile de Frontend Mentor. El objetivo fue construir un perfil con enlaces sociales, siguiendo el diseño propuesto y aplicando técnicas modernas de desarrollo frontend.

Características principales

  • Diseño responsivo: El layout se adapta dinámicamente usando CSS Flexbox y media queries, asegurando una experiencia fluida en dispositivos móviles y escritorio.
  • Accesibilidad: Uso de HTML semántico (<main>, <section>, <h1>, <p>) y atributos aria-label en los enlaces sociales para mejorar la compatibilidad con lectores de pantalla.
  • Interacciones activas: Transiciones suaves en los estados hover y active de los enlaces sociales, mejorando la experiencia de usuario.
  • Estilizado personalizado: Variables CSS para colores y espaciado, y fuente “Inter” integrada desde Google Fonts para una apariencia profesional.

Proceso y aprendizajes

Durante el desarrollo, me enfoqué en mejorar la accesibilidad, el diseño responsivo y la gestión de estilos con variables CSS. Se resolvieron retos como la adaptación del layout a diferentes tamaños de pantalla y la personalización de los estados activos de los enlaces sociales.

Tecnologías utilizadas

  • Astro Framework
  • HTML5 semántico
  • CSS Flexbox y custom properties
  • Google Fonts (Inter)

Retrospectiva

Este proyecto me permitió profundizar en diseño responsivo y accesibilidad. Si lo retomara, exploraría el uso de SASS para escalar los estilos y añadir animaciones dinámicas.

Recursos

  • Frontend Mentor Style Guide
  • MDN Web Docs
  • Google Fonts

Autor

¿Tienes sugerencias o comentarios?