• Astro
• Figma
• Preact
• Figma
• VSCode
• TypeScript
• Netlify

Academia

Definición del proyecto

Academia es el sitio personal de César Martínez, donde se presentan sus proyectos de análisis de datos y administración de bases de datos, destacando su experiencia con Power BI y SQL Server. El proyecto venía construido en Next.js, y mi labor como freelance consistió en migrarlo a Astro para mejorar su rendimiento y dejar una estructura más sencilla que le permitiera al cliente seguir publicando cursos por su cuenta.

Actividades realizadas

1. Migración completa del proyecto de Next.js a Astro, manteniendo la estructura existente para la creación de nuevos cursos.

2. Definición del formato JSON para registrar un curso, incluyendo metadata, recursos asociados y enlaces externos a video, GitHub, Looker, Power BI, dataset, diagramas, documentación y PDF.

3. Implementación del flujo de documentación basado en archivos Markdown, donde cada curso se asocia a un .md mediante un fileId y se carga directamente en la vista del curso.

4. Integración de ViewTransitions de Astro para lograr transiciones suaves entre vistas y mejorar la experiencia de navegación entre cursos.

5. Desarrollo de un buscador de cursos rápido y de bajo consumo, usando Preact para construir un componente que filtra por título o tags directamente desde el archivo courses.json, sin llamadas adicionales al servidor.

6. Despliegue del proyecto en Netlify, plataforma elegida por el cliente debido a su facilidad de uso y su plan gratuito.

Información adicional del proyecto

Formato JSON para registrar un nuevo curso:

{
    "title": "",
    "imageId": "",
    "fileId": "",
    "type": "",
    "description": "",
    "metadata": {
        "date_publish": "",
        "time_read": ""
    },
    "resources": {
        "videoId": "",
        "powerbi": "",
        "github": "",
        "diagram": "",
        "docs": "",
        "looker": "",
        "dataSource": "",
        "pdf": ""
    }
}

A partir de la versión 2.0.0 de Astro, la forma correcta de importar ViewTransitions es la siguiente:

import { ClientRouter } from "astro:transitions";

Resultados obtenidos

La migración fue un éxito: el sitio quedó más rápido, más flexible y más fácil de mantener para el cliente. El sistema basado en Markdown simplifica la creación y documentación de nuevos cursos, las ViewTransitions mejoraron notablemente la experiencia de navegación, y el buscador con Preact permite filtrar cursos al instante sin sacrificar rendimiento. El despliegue en Netlify cerró el flujo dejando una publicación sencilla y un mantenimiento de bajo costo.

Conclusión

Como proyecto freelance, este trabajo me permitió entender mejor la dinámica cliente-desarrollador: traducir un requerimiento concreto (mejorar el sitio y facilitar la publicación de cursos) en una solución técnica realista y mantenible en el tiempo. Negociar el alcance, elegir el stack adecuado y entregar un producto que el cliente pueda operar por sí mismo fue una experiencia muy enriquecedora. Estoy satisfecho con el resultado y con la relación profesional que se construyó alrededor del proyecto.