Base de sitio institucional desarrollada para FEMUCARIBE como servicio profesional independiente, con identidad municipal y presentación de seis cantones asociados. Sus componentes compartidos adaptan la navegación al espacio disponible y conservan el funcionamiento básico sin JavaScript.
Trasladar una identidad institucional extensa a una interfaz que conserve lectura, enlaces y foco en pantallas pequeñas, con texto ampliado y sin depender de JavaScript. La navegación también debe comunicar qué recursos están disponibles y cuáles siguen pendientes de contenido o destino.
Construí un layout público compartido con componentes para identidad, navegación, presentación y pie institucional. Usé HTML nativo como base y consultas de contenedor para responder al espacio real del componente. Pequeñas mejoras de JavaScript coordinan expansión, cierre y foco de los menús; los destinos ausentes se representan como recursos pendientes en lugar de enlaces ficticios.
Astro genera una salida estática con TypeScript estricto, estilos scoped y CSS Modules. PublicLayout compone la barra institucional, la navegación y el pie; InformationLayout comparte cabecera, breadcrumb y navegación entre Créditos y Aviso legal. El aviso incorpora su propio índice temático. ResponsiveDisclosure concentra la interacción sobre details/summary nativos: ResizeObserver coordina cambios de tamaño, Escape y clic exterior cierran menús y se gestiona el retorno del foco. Los contratos de los componentes validan sus destinos. Escudos y tipografía se sirven desde recursos del proyecto, y el layout serializa el schema WebSite escapando su contenido para insertarlo en HTML.
Servicio de diseño y desarrollo independiente para la Federación Municipal del Caribe Costarricense y Asociados. El alcance implementado comprende la página principal, créditos y aviso legal; búsqueda, acceso a plataforma y varios recursos institucionales se muestran como pendientes mientras el sitio se desarrolla por etapas.
El repositorio contiene pruebas Vitest para contratos, destinos inválidos y estados de recursos pendientes. Los escenarios Playwright en Chromium cubren navegación y foco, funcionamiento sin JavaScript, pantallas desde 280 px, orientación horizontal y texto al 200 %. Las páginas informativas tienen casos sobre contenido legal, cookies, almacenamiento del navegador y solicitudes externas.
Deja una base institucional coherente para ampliar contenido por etapas, con navegación compartida y comportamientos de adaptación y accesibilidad respaldados por casos de prueba. Los recursos pendientes mantienen un estado explícito hasta disponer de contenido y destinos reales.