Guía de Componentes
Este portafolio incluye varios componentes reutilizables para enriquecer tus artículos.
1. Link Cards (Previews de Enlaces)
Crea tarjetas visuales para enlaces externos con título, descripción e imagen.
Uso Básico
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<div class="link-card">
<a href="https://ejemplo.com" class="link-card-overlay" target="_blank" rel="noopener noreferrer" aria-label="Título del Enlace"></a>
<div class="link-card-content">
<div class="link-card-image">
<img src="https://ejemplo.com/imagen.jpg" alt="Título del Enlace" loading="lazy">
</div>
<div class="link-card-body">
<h4 class="link-card-title">Título del Enlace</h4>
<p class="link-card-description">Descripción breve del contenido</p>
<span class="link-card-url">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
<polyline points="15 3 21 3 21 9"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line>
</svg>
ejemplo.com
</span>
</div>
</div>
</div>
|
Sin Imagen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<div class="link-card">
<a href="https://ejemplo.com" class="link-card-overlay" target="_blank" rel="noopener noreferrer" aria-label="Título del Enlace"></a>
<div class="link-card-content">
<div class="link-card-body">
<h4 class="link-card-title">Título del Enlace</h4>
<p class="link-card-description">Descripción breve del contenido</p>
<span class="link-card-url">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
<polyline points="15 3 21 3 21 9"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line>
</svg>
ejemplo.com
</span>
</div>
</div>
</div>
|
Ejemplo Real
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<div class="link-card">
<a href="https://www.deeplearningbook.org/" class="link-card-overlay" target="_blank" rel="noopener noreferrer" aria-label="Deep Learning Book"></a>
<div class="link-card-content">
<div class="link-card-image">
<img src="https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=400" alt="Deep Learning Book" loading="lazy">
</div>
<div class="link-card-body">
<h4 class="link-card-title">Deep Learning Book</h4>
<p class="link-card-description">El libro definitivo sobre aprendizaje profundo por Ian Goodfellow</p>
<span class="link-card-url">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
<polyline points="15 3 21 3 21 9"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line>
</svg>
deeplearningbook.org/
</span>
</div>
</div>
</div>
|
2. Embeds (Videos, iFrames)
Inserta videos de YouTube, Vimeo o cualquier contenido embebible.
YouTube
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div class="embed-container" style="padding-bottom: 56.25%;">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Título del video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
loading="lazy">
</iframe>
</div>
|
Con Ratio Personalizado
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div class="embed-container" style="padding-bottom: 42.85%;">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Título del video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
loading="lazy">
</iframe>
</div>
|
Ratios disponibles:
16:9 (por defecto)4:321:9
Ejemplo Real
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div class="embed-container" style="padding-bottom: 56.25%;">
<iframe
src="https://www.youtube.com/embed/aircAruvnKk"
title="But what is a neural network?"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
loading="lazy">
</iframe>
</div>
|
Resalta información importante con cajas de colores.
Tipos Disponibles
Info (Azul)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<div class="callout callout-info">
<div class="callout-title">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
Información
</div>
<div class="callout-content">
<p>Contenido del callout. Puedes usar <strong>markdown</strong> aquí.</p>
</div>
</div>
|
Warning (Amarillo/Naranja)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<div class="callout callout-warning">
<div class="callout-title">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
<line x1="12" y1="9" x2="12" y2="13"></line>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
Advertencia
</div>
<div class="callout-content">
<p>Esto es una advertencia importante.</p>
</div>
</div>
|
Danger (Rojo)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<div class="callout callout-danger">
<div class="callout-title">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line>
</svg>
Peligro
</div>
<div class="callout-content">
<p>Esto puede causar problemas si no tienes cuidado.</p>
</div>
</div>
|
Success (Verde)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<div class="callout callout-success">
<div class="callout-title">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
Éxito
</div>
<div class="callout-content">
<p>¡Bien hecho! Has completado este paso.</p>
</div>
</div>
|
Sin Título
1
2
3
4
5
6
7
8
9
10
11
12
|
<div class="callout callout-info">
<div class="callout-content">
<p>Callout sin título, solo con contenido.</p>
</div>
</div>
|
4. Fórmulas Matemáticas (LaTeX)
Usa MathJax para renderizar fórmulas matemáticas.
Inline (en línea)
1
| La función sigmoide es $\sigma(x) = \frac{1}{1+e^{-x}}$ y se usa mucho en ML.
|
Bloque (display)
1
2
3
| $$
f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}
$$
|
Ejemplos Comunes
Sumatoria:
Integral:
1
| $$\int_{a}^{b} f(x) \, dx$$
|
Matriz:
1
2
3
4
5
6
| $$
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
$$
|
Sistema de ecuaciones:
1
2
3
4
5
6
| $$
\begin{cases}
x + y = 5 \\
2x - y = 1
\end{cases}
$$
|
5. Bloques de Código
Código Inline
1
| Usa `código inline` con backticks simples.
|
Bloques de Código
1
2
3
4
| ```python
def hola_mundo():
print("¡Hola, mundo!")
```
|
Con Numeración de Líneas
Configurado automáticamente en _config.yml.
6. Tablas
Usa sintaxis estándar de Markdown:
1
2
3
4
| | Columna 1 | Columna 2 | Columna 3 |
|-----------|-----------|-----------|
| Dato 1 | Dato 2 | Dato 3 |
| Dato 4 | Dato 5 | Dato 6 |
|
Las tablas tienen efectos hover automáticos.
Combinando Componentes
Puedes combinar varios componentes en un solo artículo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
| ---
layout: post
title: "Mi Artículo"
---
## Introducción
Aquí está mi contenido con una fórmula: $E = mc^2$
<div class="callout callout-info">
<div class="callout-title">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
Nota
</div>
<div class="callout-content">
<p>Esto es importante.</p>
</div>
</div>
Más contenido...
<div class="link-card">
<a href="https://ejemplo.com" class="link-card-overlay" target="_blank" rel="noopener noreferrer" aria-label="Recurso Útil"></a>
<div class="link-card-content">
<div class="link-card-body">
<h4 class="link-card-title">Recurso Útil</h4>
<p class="link-card-description">Descripción</p>
<span class="link-card-url">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
<polyline points="15 3 21 3 21 9"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line>
</svg>
ejemplo.com
</span>
</div>
</div>
</div>
$$
\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$
```python
print("Código de ejemplo")
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
## Tips de Uso
1. **Link Cards**: Úsalos para recursos externos relevantes
2. **Embeds**: Agrega videos solo cuando aporten valor real
3. **Callouts**: No abuses, usa solo para info importante
4. **LaTeX**: Verifica que las fórmulas se rendericen correctamente
5. **Imágenes en Links**: Usa URLs directas de imágenes (preferiblemente optimizadas)
## Imágenes Gratuitas
Para imágenes en link cards, puedes usar:
- [Unsplash](https://unsplash.com/)
- [Pexels](https://www.pexels.com/)
- Logos oficiales de proyectos
Formato recomendado: `https://images.unsplash.com/photo-XXXXX?w=400`
## Recursos
- **Markdown Guide**: https://www.markdownguide.org/
- **MathJax Docs**: https://www.mathjax.org/
- **Jekyll Liquid**: https://jekyllrb.com/docs/liquid/
---
## 7. Resaltador de Texto (Text Highlighter) ✨
El portafolio incluye un sistema de resaltado de texto con 6 colores diferentes y persistencia en el navegador.
### Características
- **6 colores** disponibles: amarillo, verde, azul, rosa, morado y naranja
- **Persistencia**: Los resaltados se guardan en localStorage y se restauran al volver
- **Responsive**: Funciona tanto en desktop como en móvil (táctil)
- **Modo oscuro**: Los colores se adaptan automáticamente al tema
- **Remover resaltados**: Botón para eliminar el resaltado seleccionado
### Cómo Usar
#### Desktop (Computadora)
1. **Selecciona** el texto que quieres resaltar
2. Aparecerá un menú flotante con **colores**
3. **Haz clic** en el color deseado
4. El texto se resaltará automáticamente
5. Para **quitar** un resaltado: selecciona el texto resaltado y haz clic en la **X**
#### Móvil (Táctil)
1. **Mantén presionado** (long press) el texto que quieres seleccionar
2. **Arrastra** para seleccionar el texto completo
3. Aparecerá el menú de colores
4. **Toca** el color que deseas
5. Para **quitar**: mantén presionado el texto resaltado y toca la **X**
### Colores Disponibles
| Color | Modo Claro | Modo Oscuro | Uso Sugerido |
|-------|------------|-------------|--------------|
| 🟡 Amarillo | Brillante | Dorado oscuro | Ideas importantes |
| 🟢 Verde | Claro | Esmeralda oscuro | Conceptos clave |
| 🔵 Azul | Cielo | Azul marino | Definiciones |
| 🌸 Rosa | Pastel | Rosa oscuro | Ejemplos |
| 🟣 Morado | Lavanda | Púrpura | Referencias |
| 🟠 Naranja | Suave | Terracota | Advertencias |
### Persistencia
- Los resaltados se **guardan automáticamente** en localStorage
- Se **restauran** cada vez que vuelves a la página
- Son **específicos por página**: cada artículo guarda sus propios resaltados
- **Privados**: Solo tú puedes ver tus resaltados (no se comparten)
### Gestión
- **Limpiar todo**: Para borrar todos los resaltados de una página, abre la consola del navegador (F12) y ejecuta:
```javascript
localStorage.removeItem('text-highlights');
location.reload();
|
- Ver resaltados guardados:
1
| JSON.parse(localStorage.getItem('text-highlights'));
|
Limitaciones
- Solo funciona dentro del contenido del artículo (
.post-content)
- No funciona en código, tablas o elementos embebidos
- Los resaltados son por navegador (no sincronizados entre dispositivos)
Tips de Uso
- Organiza con colores: Usa diferentes colores para diferentes tipos de información
- No abuses: Resalta solo lo más importante
- Compatibilidad: Funciona en Chrome, Firefox, Safari y Edge modernos
- Mobile first: En móvil, usa long-press en lugar de doble-tap
Desactivar Temporalmente
Si quieres desactivar el highlighter temporalmente sin borrar los datos, agrega esto a tu navegador:
1
2
| // En la consola del navegador
document.querySelector('#highlighter-menu').style.display = 'none';
|
Para reactivarlo:
1
| document.querySelector('#highlighter-menu').style.display = '';
|