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 atributosaria-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
- Frontend Mentor: @JoelBuenrostro
- GitHub: JoelBuenrostro
- Instagram: @joel_buenrostro
¿Tienes sugerencias o comentarios?