Strixhaven es un sitio web inmersivo diseñado para una campaña de Dungeons & Dragons, estructurado como el portal oficial de una universidad mágica. Este proyecto destaca como un trabajo integral de desarrollo web frontend.
La plataforma permite a los jugadores explorar la historia de la academia, la oferta académica y los cinco colegios fundadores, simulando una experiencia institucional real.
Desarrollé la totalidad del proyecto desde cero utilizando HTML5, CSS3 y JavaScript puro. Como pilar de este desarrollo web frontend, el enfoque principal fue crear una interfaz de usuario (UI) responsiva y temáticamente coherente, integrando un diseño oscuro con acentos dorados, grids para las tarjetas de información y navegación dinámica para optimizar la inmersión de los usuarios.
Tecnologías
- Desarrollo Web (Frontend)
- HTML5, CSS3 y JavaScript
- Diseño UI y Maquetación Responsiva
Logros Técnicos: Desarrollo Web Frontend
Maquetación Semántica y UI/UX
La estructura del portal exigió un uso avanzado de Flexbox y CSS Grid para organizar la amplia cantidad de información, desde las sedes del campus hasta los programas de estudio. Siguiendo las mejores prácticas de desarrollo web frontend, el diseño responsivo garantiza que la lectura y navegación sean accesibles desde cualquier dispositivo, manteniendo la jerarquía visual.
Interactividad en el DOM con JS
Para elevar la experiencia de usuario, implementé JavaScript en el manejo de interacciones, animaciones de los colegios y el flujo de navegación del menú. Esto transforma una página estática en un portal dinámico que responde de forma ágil a las acciones del jugador.
¿Te gustó lo que viste?
Aquí te dejo otros proyectos o blogs relacionados: