Blog personal de alto rendimiento construido con Astro 5, React 19, Tailwind CSS v4, MDX y animaciones avanzadas con GSAP.
- 🚀 Performance Extremo: Basado en Astro para una carga instantánea y mínima hidratación JS.
- 🎨 Diseño Moderno: Interfaz premium con Tailwind CSS v4 y animaciones suaves con GSAP.
- 📖 Contenido en MDX: Escribe con el poder de Markdown y la flexibilidad de componentes React.
- 🛠️ Gestión de Proyectos: Portafolio dinámico con sistema de bitácora (diario de desarrollo).
- 🏷️ Sistema de Tags Universal: Navegación y agrupación de contenido (blog, proyectos, posts, bitácoras) mediante etiquetas dinámicas.
- 📰 RSS Inteligente: Feed automático para tus posts visuales.
- 📅 Deploy Programado: Publicación automática de entradas futuras mediante GitHub Actions.
git clone https://github.com/yamilayma/blog.git
cd blognpm installnpm run devEl sitio estará disponible en http://localhost:4321
src/
├── components/ # Componentes Astro (Header, Footer, etc.)
├── config/ # Configuración de temas
├── content/
│ ├── blog/ # Entradas del blog (.mdx)
│ ├── posts/ # Posts visuales (.mdx)
│ ├── journal/ # Bitácoras de proyectos (.mdx)
│ ├── projects/ # Detalles de proyectos (.mdx)
│ └── pages/ # Páginas estáticas (.mdx)
├── layouts/ # Layouts (Layout, BlogPost)
├── pages/ # Rutas del sitio
├── styles/ # Estilos CSS
└── utils/ # Utilidades (tema)
- Crear archivo en
src/content/posts/mi-post.mdx:
---
image: /images/posts/mi-imagen.png
imageAlt: 'Descripción técnica de la infografía'
title: 'Titular SEO Impactante' # Opcional
copy: 'Resumen de alto impacto para redes sociales' # Máx 300 caracteres
date: 2026-03-31
published: true # false para ocultar
category: 'General'
tags: ['IA', 'Automatización'] # Opcional
socials:
linkedin: https://linkedin.com/in/usuario
instagram: https://instagram.com/usuario
twitter: https://x.com/usuario
---
Contenido del post ampliado aquí...
Usar saltos de línea normales para que el RSS los procese correctamente.- El post aparece en
/postssipublished: trueydate <= hoy
- Crear archivo en
src/content/blog/mi-entrada.mdx:
---
title: 'Título de mi entrada'
description: 'Descripción corta'
date: '2025-12-11'
category: 'Personal'
tags: ['tag1', 'tag2']
image: '/images/stickers/1200x630-og.png'
---
# Contenido aquí
Contenido en Markdown/MDX...- La entrada aparecerá automáticamente en
/blog
Las páginas están en src/content/pages/:
sobre-mi.mdx→/sobre-micontacto.mdx→/contactogaleria.mdx→/galeria
Edita src/config/themes.ts para modificar colores, fuentes y estilos.
- Crear archivo en
src/content/projects/mi-proyecto.mdx:
---
title: 'Nombre del Proyecto'
description: 'Descripción corta del proyecto'
image: '/images/portfolio/projects/mi-imagen.png'
imagenes:
- '/images/portfolio/projects/foto-1.png'
periodo: 'Enero 2024 - Presente'
tags: ['React', 'Astro']
features:
- 'Funcionalidad A'
- 'Funcionalidad B'
tecnologias:
- 'https://img.shields.io/badge/Astro-BC52EE?logo=astro&logoColor=white'
links:
- type: 'github'
url: 'https://github.com/...'
- type: 'demo'
url: 'https://demo.com'
order: 1
---
## Descripción
Contenido en Markdown...- El proyecto aparecerá en
/portafolioy tendrá su propia URL en/proyectos/mi-proyecto.
Edita src/config.ts para cambiar:
- Título del sitio
- Descripción
- Autor
- Enlaces sociales
- Localizar el slug del proyecto en
src/content/projects/(ej:mi-proyecto.mdx→ slug:mi-proyecto). - Crear archivo en
src/content/journal/mi-proyecto/mi-avance.mdx:
---
title: 'Título del avance'
description: 'Resumen corto'
date: 2026-03-31
project: 'mi-proyecto'
tags: ['Tag1', 'Tag2'] # Opcional
published: true
---
# Mi progreso de hoy
Contenido detallado con imágenes...- El avance aparecerá al final de la página del proyecto y en "Entradas Recientes" de la Home.
Puedes usar estos componentes enriquecidos en cualquier archivo .mdx (blog, diario, posts) para mejorar la legibilidad.
Ideal para dar un resumen ejecutivo al inicio de un post largo. Incluye una animación de entrada suave.
<TLDR>
Aquí va el resumen rápido de lo que el lector aprenderá o los puntos clave del artículo.
</TLDR>Crea una sección de acordeones interactivos. Los items se expanden verticalmente con una transición suave.
<FAQs>
<FAQItem question="¿Qué es este proyecto?">
Es un sistema de gestión de contenido estático optimizado para velocidad.
</FAQItem>
<FAQItem question="¿Cómo puedo contribuir?">
Haciendo un fork del repositorio y enviando un Pull Request.
</FAQItem>
</FAQs>Ideal para destacar testimonios, referencias externas o pensamientos importantes con un diseño limpio. Soporta los alias <Quote>, <Cita> y <Opinion>.
<Quote cite="Yamil Ayma" role="Desarrollador" url="https://github.com/yamilayma">
La modularización no es solo separar archivos, es definir cómo conversan las partes de un todo.
</Quote>Ideal para listar fuentes bibliográficas, materiales de estudio o enlaces de interés con un estilo académico y profesional. Usa el tag <References />.
<References
title="Fuentes Consultadas"
references={[
{
text: "Doe, J. R. (2023). Understanding Minimalist Tech: A Gentle Introduction. Ayma Press.",
link: "https://example.com/tech-intro"
},
{
text: "Smith, A. L. (2022). 'Designing for Accessibility'. Journal of Soft Technology.",
link: "https://doi.org/10.1000/j.st.2022"
}
]}
/>npm run buildLos archivos estáticos se generan en dist/
npm run deployEl sitio está configurado para GitHub Pages. Sube los cambios a main y configura GitHub Pages para usar la carpeta dist/ o GitHub Actions.
El workflow .github/workflows/scheduled-deploy.yml ejecuta un build automatico cada día a las 5:00 AM UTC, permitiendo que los posts con fecha programada aparezcan automáticamente sin intervención manual.