🏫 I.E. N° 21601 Jorge Basadre Grohmann — Portal Web Institucional
Plataforma Educativa Digital Moderna, Rápida y Accesible
Sitio web oficial e institucional para la I.E. N° 21601 Jorge Basadre Grohmann, desarrollado para conectar a la comunidad educativa (directivos, docentes, alumnos y padres de familia), publicar comunicados oficiales en tiempo real y centralizar los recursos pedagógicos.
- 💻 Repositorio GitHub: github.com/Alecwce/ie-proyecto-jorge-basadre-2025 (Privado)
- ⚡ Motor: Astro 5.1 + Tailwind CSS v4 + TypeScript | Paquetes: PNPM
✨ Características Principales
flowchart TD Visitante([👥 Comunidad Educativa]) <--> Portal["🏫 Portal Web Jorge Basadre\n(Astro 5 + Tailwind 4)"] Portal --> News["📰 Sistema de Noticias y Comunicados\n(Colecciones Markdown / Content Collections)"] Portal --> Levels["🎓 Secciones por Nivel\n(Inicial • Primaria • Secundaria)"] Portal --> Docs["📂 Documentos de Gestión\n(PEI, PAT, RI, PCI para descarga)"] Portal --> Gallery["📸 Galería Fotográfica y Eventos\n(Optimización con Sharp y Lazy Loading)"] Portal --> Contact["📬 Mesa de Partes & Contacto Directo\n(WhatsApp, Ubicación y Formulario)"]
- Diseño Institucional Responsivo & Modo Dual:
- Paleta corporativa sobria acorde a la identidad del colegio, con soporte nativo para modo oscuro y claro.
- CMS de Noticias Ligero con Markdown:
- Uso de Astro Content Collections con validación estricta por esquemas Zod para publicar comunicados, cronogramas de matrícula y circulares oficiales sin depender de bases de datos pesadas.
- Módulos Educativos por Nivel:
- Fichas pedagógicas detalladas para Inicial, Primaria y Secundaria, con información de docentes tutores y horarios.
- Repositorio de Documentos Normativos:
- Descarga directa de archivos PDF oficiales: Proyecto Educativo Institucional (PEI), Plan Anual de Trabajo (PAT) y Reglamento Interno (RI).
- Máximo Rendimiento Core Web Vitals:
- Cero JavaScript innecesario en el cliente (arquitectura de islas de Astro), logrando puntajes de 95-100 en Google Lighthouse.
🛠️ Stack Tecnológico
| Módulo | Tecnología | Función |
|---|---|---|
| Framework Web | Astro 5.1 | Generación de sitios estáticos (SSG) de ultra alto rendimiento |
| Estilos & UI | Tailwind CSS v4 (@tailwindcss/vite) | Motor de estilos moderno y responsivo con tema institucional |
| Lenguaje | TypeScript | Tipado estricto en componentes y colecciones |
| Validación de Datos | Zod (Astro Content Collections) | Tipado y validación de frontmatter en noticias y eventos |
| SEO & Sitemap | @astrojs/sitemap | Generación automática de mapas de sitio para indexación en Google |
| Optimizador de Imágenes | Sharp | Compresión y conversión de fotos escolares a formato WebP/AVIF |
🚀 Comandos de Desarrollo
# Instalar dependencias con pnpm
pnpm install
# Iniciar servidor local de desarrollo
pnpm dev
# Compilar para producción (SSG optimizado)
pnpm build
# Previsualizar el build final
pnpm preview🔗 Relación con el Ecosistema
- 🌐 Sistemas Web Institucionales: Diseñado junto a iniciativas de digitalización local en Chupaca como Telsat Fibra Óptica y Whims Chupaca.
- 📚 Hub de Documentación: Integrado en el ecosistema de conocimiento de Proyectos Privados de Ryukami Labs.