Creando un Portafolio Minimalista con Astro y JSON

·1h 48m

En este tutorial práctico, se desarrolla un portafolio minimalista y altamente eficiente que funciona como un currículum imprimible. La premisa principal es la simplicidad y la capacidad de actualización mediante la edición de un único archivo JSON.

Estructura y Tecnologías

Astro: Se elige como framework principal por su excelente rendimiento y capacidad para generar sitios estáticos, siendo la mejor solución para proyectos con poco contenido dinámico.
JSON Resume: Se utiliza este esquema open source como formato estándar para estandarizar la información del perfil, lo que permite centralizar todos los datos (experiencia, educación, proyectos, etc.) en un solo archivo.
CSS en lugar de Tailwind: El proyecto apuesta por estilos nativos con Astro, aprovechando el scope local de los componentes para mantener un código limpio sin dependencias pesadas.

Características Destacadas

Gestión de Paleta de Comandos: Se integra Ninja Keys mediante web components para habilitar la navegación con teclado, facilitando el acceso a acciones como imprimir el documento.
Diseño Optimizado para Impresión: Se implementan media queries de impresión (@media print) para asegurar que, al exportar a PDF o imprimir, toda la información se presente de forma elegante, ocultando elementos innecesarios como los iconos interactivos.
Animaciones CSS: Se añade un sutil efecto de fade-in al hacer scroll utilizando CSS scroll-driven animations para una experiencia de usuario fluida.

"¿Por qué lo hacemos? Uno, para aprender. Dos, porque tengo una idea que va un poquito más allá: configurando un solo JSON, podáis tener toda la información sin necesidad de tocar ni una línea de código."

Este enfoque no solo resulta en un sitio web extremadamente rápido, sino también en una herramienta profesional extremadamente fácil de mantener y exportar.

Temas

Astro JSON Portafolio DesarrolloWeb CSS Curriculum Minimalismo

Capítulos

9 chapters