Portfolio

Markdown → paged.js → PDF
Formato: A4 horizontal (297 × 210 mm) · Tema editorial oscuro

---

Stack

Herramienta	Rol
Markdown	Contenido
Pandoc	Convierte .md → .html
paged.js	Pagina el HTML en el navegador
CSS Paged Media	Controla el layout de impresión

---

Estructura

portfolio/
├── content.md        ← Edita aquí tu contenido
├── style.css         ← Diseño y tipografía
├── template.html     ← Plantilla HTML para Pandoc (no tocar)
├── build.sh          ← Compila y abre Chrome para previsualizar
├── export-pdf.sh     ← Compila y exporta el PDF automáticamente
└── images/
    └── ...           ← Tus imágenes aquí

---

Instalación

# macOS
brew install pandoc

# Ubuntu / Debian
sudo apt install pandoc

# Windows — descargar desde:
# https://pandoc.org/installing.html

---

Uso

chmod +x build.sh export-pdf.sh
./build.sh       # compila y abre Chrome para previsualizar
./export-pdf.sh  # compila y exporta el PDF automáticamente

Exportación automática (export-pdf.sh)

Requiere instalar Playwright una sola vez:

pip install playwright
playwright install chromium

Genera portfolio.pdf directamente sin abrir el navegador.

Previsualización manual (build.sh)

Abre portfolio.html en Google Chrome:

1. Espera a que paged.js termine de paginar
2. Cmd+P → Guardar como PDF
3. Configurar:
   • Papel: A4 · Orientación: Horizontal
   • Márgenes: Ninguno
   • ✅ Activar Gráficos de fondo

---

Secciones disponibles

Cada sección se escribe en content.md usando ::: con una clase. Los comentarios en el propio content.md explican cada campo.

Portada

::: {.cover}
# Título del portafolio {.cover-title}

::: {.cover-meta}
[Nombre Artista]{.artist-name}

[https://tu-sitio.com](https://tu-sitio.com){.url}
:::
:::

La imagen de fondo se define en style.css → .cover { background-image: ... }.

---

Biografía

Admite hasta 3 párrafos dentro de .bio-body.

::: {.bio}
## Biografía

::: {.bio-body}
Párrafo uno...

Párrafo dos...

Párrafo tres...
:::

:::

---

Statement

La columna izquierda contiene la etiqueta y una imagen vertical opcional.
Para omitir la imagen, elimina el bloque .statement-image completo.

::: {.statement}
::: {.statement-left}
## Statement

::: {.statement-image}
![](./images/foto-vertical.jpg)
:::
:::

::: {.statement-body}
Tu texto aquí...
:::
:::

---

Proyecto

Usa {.project} para imagen a la izquierda o {.project .project-right} para imagen a la derecha.
El texto alternativo de la imagen aparece como crédito fotográfico superpuesto.

::: {.project}
::: {.project-image}
![Crédito fotográfico](./images/foto.jpg)
:::

::: {.project-text}
[Galеría Nombre. Ciudad, País]{.project-location}

## Título de la obra

[Instalación]{.project-subtitle}
[Materialidad: Circuitos, parlantes, madera, etc.]{.project-materials}

Descripción de la obra...

[Técnica / Año — Ver proyecto →](https://url.com)
:::
:::

Campos opcionales que pueden omitirse: .project-location, .project-materials.

El lugar (.project-location) aparece encima del título, pegado a él.

---

Página imagen completa

El texto alternativo aparece como crédito en la esquina inferior derecha.

::: {.fullpage}
![Título, año. Foto: Nombre Apellido](./images/foto.jpg)
:::

---

Docencia y residencias

Página de dos columnas para información curricular síntetica.

::: {.cv-spread}
::: {.cv-col .cv-col-left}
## Docencia

[Nota o número de cursos]{.cv-meta}

[Nombre del curso]{.cv-item-title}
[Institución · Período]{.cv-item-detail}
:::

::: {.cv-col .cv-col-right}
## Residencias

[Año · Nombre de la residencia]{.cv-item-title}
[Lugar]{.cv-item-detail}
:::
:::

---

Página de cierre

Página final con imagen de fondo, datos de contacto centrados y un footer.

::: {.closing style="background-image: url('./images/foto.jpg')"}
::: {.closing-content}
## Nombre Artista

[tu-sitio.com](https://tu-sitio.com){.closing-link}

[instagram.com/usuario](https://instagram.com/usuario){.closing-link}

[contacto@email.com](mailto:contacto@email.com){.closing-link}
:::

::: {.closing-footer}
Texto de pie de página
:::
:::

---

Crédito fotográfico oscuro

Por defecto los créditos de imagen son claros (para fondos oscuros). Añade .caption-dark cuando la imagen tiene zonas claras donde el texto se pierde:

::: {.fullpage .caption-dark}
![Crédito](./images/foto.jpg)
:::

::: {.project .project-right .caption-dark}
...
:::

---

Colores

:root {
  --bg:       #222222;   /* Fondo general */
  --text:     #f0ece6;   /* Texto principal */
  --text-dim: #807d7a;   /* Texto secundario */
  --accent:   #b8b8b8;   /* Gris claro (títulos, enlaces) */
  --border:   #313131;   /* Líneas separadoras */
}

Tipografía

• IBM Plex Mono — cuerpo de texto, títulos de proyectos, descripciones
• Cormorant — etiqueta BIOGRAFÍA

Las fuentes se cargan desde Google Fonts en template.html.

---

Notas

• paged.js funciona mejor en Chrome o Chromium
• Si las imágenes no cargan, verifica que estén en images/

---

Créditos

Diseñado y desarrollado por Matías Serrano Acevedo.
Estructura, layout y CSS generados en colaboración con GitHub Copilot (Claude Sonnet 4.6), abril 2026.