Patricio Pantaleo - Personal Website & Blog

Este repositorio contiene el sitio web personal y blog de Patricio Pantaleo, especialista en Humanidades Digitales y Publicación Académica.

📋 Descripción del Proyecto

El proyecto combina dos tecnologías principales:

Sitio Principal: Aplicación Next.js con TypeScript y Tailwind CSS
Blog: Generado con Quarto desde archivos fuente y compilado a HTML estático

🏗️ Arquitectura

├── app/                    # Aplicación Next.js principal
│   ├── recursos/          # Página de recursos académicos
│   │   └── page.tsx       # Página principal de recursos
├── components/             # Componentes React reutilizables
│   ├── LinkedInFeed.tsx   # Componente de posts de LinkedIn
│   └── ui/                # Componentes shadcn/ui
├── public/
│   ├── blog/              # ✅ OUTPUT del proyecto Quarto (HTML compilado)
│   ├── recursos/          # 📁 Archivos de recursos descargables
│   │   ├── presentaciones/ # Presentaciones PPT, PDF
│   │   ├── documentos/    # Documentos, guías, manuales
│   │   ├── herramientas/  # Scripts, plantillas, utilidades
│   │   └── datasets/      # Conjuntos de datos
│   └── images/            # Imágenes del sitio principal
├── public/blog/blog_src/  # 📝 FUENTES del blog en Quarto
│   ├── posts/             # Posts del blog (.qmd)
│   │   ├── cuentos/       # Cuentos y relatos breves
│   │   ├── aforismos/     # Aforismos y reflexiones
│   │   └── ...            # Posts académicos
│   ├── _quarto.yml        # Configuración de Quarto
│   ├── custom.scss        # Estilos personalizados
│   ├── cuentos.qmd        # Página de todos los cuentos
│   └── aforismos.qmd      # Página de todos los aforismos
└── ...

🚀 Tecnologías Utilizadas

Sitio Principal (Next.js)

Framework: Next.js 15 con App Router
Lenguaje: TypeScript
Estilos: Tailwind CSS + shadcn/ui
Deployment: Exportación estática para GitHub Pages
Fuentes: Montserrat (sans-serif) + Tan Pearl (serif)

Blog (Quarto)

Generador: Quarto (sistema de publicación científica)
Formato fuente: Archivos .qmd (Quarto Markdown)
Output: HTML estático en public/blog/
Estilos: SCSS personalizado que replica el diseño del sitio principal

🛠️ Instalación y Desarrollo

Prerrequisitos

Node.js 18+
Quarto CLI (para el blog)

Configuración Inicial

# Clonar el repositorio
git clone https://github.com/Ppantaleo/page.git
cd page

# Instalar dependencias
npm install

Desarrollo del Sitio Principal

# Servidor de desarrollo
npm run dev

# Build para producción
npm run build

Desarrollo del Blog

# Navegar al directorio del blog
cd public/blog/blog_src

# Servidor de desarrollo para el blog (opcional)
quarto preview

# NOTA: Ya NO necesitas hacer 'quarto render' manualmente
# GitHub Actions se encarga del render automáticamente

📝 Gestión de Contenido

Estructura del Blog

El blog está organizado en tres categorías principales:

Posts Académicos: Artículos de investigación, metodología y reflexiones académicas
Cuentos: Relatos breves y narrativa literaria
Aforismos: Reflexiones breves y sentencias sobre la experiencia humana

Crear un Nuevo Post Académico

Crear archivo .qmd en public/blog/blog_src/posts/nombre-post/
Incluir metadatos YAML en el frontmatter:

---
title: "Título del Post"
author: "Patricio Iván Pantaleo"
date: "2025-06-16"
categories: [posts, categoria]
description: "Descripción del post"
downloads: [pdf, epub]
sharing: [twitter, facebook, linkedin]
license: "CC BY"
doi: 10.62059/ejemplo
---

Escribir contenido en Markdown
Renderizar con quarto render

Crear un Nuevo Cuento

Crear archivo .qmd en public/blog/blog_src/posts/nombre-cuento/
Usar plantilla simplificada:

---
title: "Título del Cuento"
author:
  - name: Patricio Iván Pantaleo
    orcid: 0000-0002-8104-8975
date: "2025-08-04"
categories: [cuentos, spanish]
description: |
  Breve descripción del cuento.

downloads: [pdf, epub]
sharing: [twitter, facebook, linkedin]
license: "CC BY"
copyright: >
  © 2025 Patricio Iván Pantaleo.

comments:
  hypothesis: true

format:
  html: default
  pdf:
    documentclass: scrartcl
    toc: true
    number-sections: false
    fontsize: 11pt
  epub:
    toc: true
lang: es
---

Gestionar Aforismos

Los aforismos se gestionan de forma centralizada en un solo archivo:

Editar public/blog/blog_src/posts/aforismos/index.qmd
Agregar nuevos aforismos siguiendo el formato:

## [Mes Año]

**[fecha]**
> "[aforismo]"

**[otra fecha]**
> "[otro aforismo]"
*[tema opcional]*

---

Los aforismos aparecen automáticamente en la página principal y en la sección dedicada

Estructura de un Post

posts/nombre-post/
├── index.qmd          # Contenido principal
├── post.jpg           # Imagen destacada
├── post.bib           # Referencias (opcional)
└── archivos/          # Recursos adicionales

🎨 Organización del Contenido en el Blog

Página Principal del Blog (`index.qmd`)

La página principal está organizada en secciones:

Posts Académicos: Artículos principales (excluye cuentos y aforismos)
Cuentos: Sección horizontal deslizable con los últimos cuentos
Aforismos: Sección minimalista con enlace al archivo completo

Categorización Automática

El sistema usa las categorías para organizar el contenido:

categories: [posts, ...] → Aparece en la sección principal
categories: [cuentos, ...] → Aparece en la sección de cuentos
categories: [aforismos, ...] → Aparece en la sección de aforismos

Páginas Especializadas

cuentos.qmd: Todos los cuentos en formato grid
aforismos.qmd: Vista completa de aforismos organizados por fecha

📱 Actualizar Posts de LinkedIn

🔄 Cómo actualizar el componente LinkedIn Feed

El sitio incluye una sección que muestra los últimos posts de LinkedIn mediante iframes embebidos.

Ubicación: components/LinkedInFeed.tsx

Pasos para actualizar:

Obtener la URL del embed:
- Ve a tu post en LinkedIn
- Clic en los 3 puntos (...) del post
- Selecciona "Insertar esta publicación"
- Copia la URL del atributo src del iframe

Actualizar el componente:

// En components/LinkedInFeed.tsx
const linkedinEmbeds = [
  {
    id: 1,
    src: "https://www.linkedin.com/embed/feed/update/urn:li:share:TU_NUEVO_POST_ID",
    title: "Descripción de tu post"
  },
  // ... otros posts
]

Hacer deploy:

git add .
git commit -m "Update LinkedIn posts"
git push origin main

⚠️ Limitaciones:

No todos los posts de LinkedIn permiten embed
Usa solo posts que tengan la opción "Insertar esta publicación"
Los posts muy antiguos pueden no funcionar

💡 Consejos:

Mantén solo los 3 posts más recientes
Verifica que los embeds funcionen antes de hacer commit
Los iframes se cargan automáticamente desde LinkedIn con datos actualizados

🎨 Personalización de Estilos

Sitio Principal

Configuración en tailwind.config.ts
Colores y variables CSS en app/globals.css
Componentes en components/ui/

Blog

Estilos principales en public/blog/blog_src/custom.scss
Variables SCSS que replican el diseño del sitio principal
Estilos específicos para secciones de cuentos y aforismos
Footer y header personalizados en footer.html y header.html

Estilos por Sección

Cuentos: Diseño horizontal deslizable con cards destacadas
Aforismos: Diseño minimalista con tipografía elegante
Posts Académicos: Diseño estándar de blog con metadatos completos

🚀 Deployment

El sitio se despliega automáticamente en GitHub Pages mediante GitHub Actions:

Trigger: Push a la rama main
Quarto Render: Renderiza archivos .qmd a HTML automáticamente
Build: Next.js exporta estático con blog renderizado
Deploy: Archivos estáticos a gh-pages
URL: https://patricio.pantaleo.ar

Configuración de Deployment

# .github/workflows/build-and-deploy.yml
- name: Setup Quarto
  uses: quarto-dev/quarto-actions/setup@v2
  
- name: Render Quarto Blog
  run: |
    cd public/blog/blog_src
    quarto render
    
- name: Build
  run: npm run build

🔄 Flujo de Trabajo Automatizado

Ya NO necesitas renderizar Quarto manualmente:

Edita archivos .qmd en public/blog/blog_src/
Haz commit y push de los archivos fuente únicamente
GitHub Actions automáticamente:
- Instala Quarto en el runner
- Renderiza .qmd → HTML
- Hace build de Next.js
- Despliega todo junto

Solo commitea archivos fuente (.qmd), NO los HTML generados

📁 Estructura de Archivos Clave

├── app/
│   ├── layout.tsx         # Layout principal con metadatos
│   ├── page.tsx           # Página de inicio
│   └── globals.css        # Estilos globales
├── components/
│   ├── header.tsx         # Navegación principal
│   ├── LinkedInFeed.tsx   # Componente de LinkedIn
│   └── ui/                # Componentes shadcn/ui
├── public/
│   ├── blog/              # Blog compilado (NO EDITAR)
│   │   ├── index.html     # Lista de posts con secciones
│   │   ├── cuentos.html   # Página de todos los cuentos
│   │   ├── aforismos.html # Página de todos los aforismos
│   │   └── posts/         # Posts individuales
│   └── blog/blog_src/     # Fuentes del blog (EDITAR AQUÍ)
│       ├── posts/
│       │   ├── cuentos/   # Cuentos individuales
│       │   ├── aforismos/ # Archivo único de aforismos
│       │   └── ...        # Posts académicos
│       ├── custom.scss    # Estilos del blog
│       ├── cuentos.qmd    # Página de cuentos
│       └── aforismos.qmd  # Página de aforismos
├── next.config.mjs        # Configuración Next.js para export
└── package.json           # Dependencias y scripts

📄 Licencia

Este proyecto está bajo la licencia GPL-3.0. Ver LICENSE para más detalles.

🤝 Contribución

Fork del proyecto
Crear feature branch (git checkout -b feature/nueva-funcionalidad)
Commit cambios (git commit -am 'Agregar nueva funcionalidad')
Push al branch (git push origin feature/nueva-funcionalidad)
Crear Pull Request

📧 Contacto

Autor: Patricio Iván Pantaleo
Email: patricio@pantaleo.ar
Website: https://patricio.pantaleo.ar
ORCID: 0000-0002-8104-8975

Nota: El blog se genera con Quarto desde public/blog/blog_src/ y el output se coloca en public/blog/. No editar directamente los archivos HTML del blog.

📁 Gestión de Recursos

Estructura de Recursos

La sección de recursos está implementada en Next.js y organizada por categorías:

Presentaciones: Slides de conferencias, talleres y charlas
Documentos: Guías, manuales, referencias y papers
Herramientas: Scripts, plantillas, utilidades y código
Datasets: Conjuntos de datos para investigación

Agregar un Nuevo Recurso

Subir archivo a la carpeta correspondiente:

# Ejemplo para una presentación
cp mi-presentacion.pptx public/recursos/presentaciones/

Actualizar el código en app/recursos/page.tsx:

const resources: Resource[] = [
  {
    id: 'unique-id',
    title: 'Título del Recurso',
    description: 'Descripción breve del contenido',
    type: 'presentation', // 'document', 'tool', 'dataset'
    format: 'PPT', // 'PDF', 'HTML', 'ZIP', etc.
    url: '/recursos/presentaciones/mi-archivo.pptx',
    date: '2024-01-15',
    tags: ['tag1', 'tag2', 'tag3']
  },
  // ... otros recursos
]

Hacer deploy:

git add .
git commit -m "Add new resource: [nombre]"
git push origin main

Tipos de Recursos Soportados

Presentaciones: .pptx, .pdf, .key
Documentos: .pdf, .docx, .html, .epub
Herramientas: .zip, .tar.gz, .py, .js, .r
Datasets: .csv, .json, .xlsx, .zip

Características de la Página de Recursos

Diseño responsive con grid adaptativo
Categorización visual con iconos y colores
Sistema de tags para filtrado
Enlaces de descarga directos
Metadatos (fecha, formato, tipo)
Estado vacío elegante cuando no hay recursos

📖 Flujo de Trabajo Recomendado

Para posts académicos: Crear nueva carpeta en posts/ con metadatos completos
Para cuentos: Crear nueva carpeta en posts/ con categoría cuentos
Para aforismos: Editar directamente posts/aforismos/index.qmd
Para recursos: Subir archivo a public/recursos/ y actualizar array en page.tsx
Deploy: git push origin main (automático - incluye render de Quarto)

⚠️ IMPORTANTE: Solo commitea archivos .qmd fuente, NO los HTML generados. GitHub Actions se encarga del render automáticamente.

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
app		app
components		components
hooks		hooks
lib		lib
public		public
styles		styles
CNAME		CNAME
LICENSE		LICENSE
README.md		README.md
components.json		components.json
next.config.mjs		next.config.mjs
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation