Portafolio & Bitácora — Francisco S. Tabares U.

Application Security & QA Engineer | Python (FastAPI) | DevSecOps

Portafolio web con formato de bitácora de avances: cada entrada muestra evidencia del trabajo (auditorías de seguridad, pruebas de QA, desarrollos backend y despliegues DevSecOps). Construido con Vite, Vanilla JavaScript y Tailwind CSS, y pensado para desplegarse en GitHub Pages mediante GitHub Actions.

• Bilingüe (Español / Inglés) con conmutador en la navbar.
• Contenido desacoplado en JSON: se edita sin tocar HTML ni JS.
• Bitácora / posts con soporte de imágenes, código, listas y citas.

---

🛠️ Stack Tecnológico

• Build Tool: Vite
• Styling: Tailwind CSS v3 (tema oscuro, tokens y Bento Grid)
• Icons & Typography: Google Material Symbols Outlined, fuentes Geist y JetBrains Mono
• Capa de datos: src/data/{es,en}/*.json

---

📁 Estructura del Proyecto

.
├── .github/
│   └── workflows/
│       └── deploy.yml              # CI/CD a GitHub Pages
├── public/
│   └── evidence/                   # Imágenes y evidencias (ver README interno)
│       ├── README.md
│       └── placeholder.svg
├── src/
│   ├── components/                 # Módulos JS reutilizables
│   │   ├── Navbar.js
│   │   ├── Hero.js
│   │   ├── PostsSection.js         # Bitácora + modal de lectura (Markdown)
│   │   ├── ProjectsSection.js      # Showcase con filtrado por tipo
│   │   ├── SkillsGrid.js
│   │   ├── Timeline.js
│   │   ├── ContactCard.js
│   │   └── Footer.js
│   ├── data/                       # Capa de datos desacoplada (JSON)
│   │   ├── es/                     # profile, skills, projects, posts, experience, ui
│   │   └── en/                     # mismos archivos en inglés
│   ├── styles/
│   │   └── global.css
│   ├── utils/
│   │   └── dom.js                  # escapeHtml, safeUrl, resolveAsset
│   └── main.js                     # Punto de entrada / ensamblado
├── index.html
├── package.json
├── tailwind.config.js
├── postcss.config.js
└── vite.config.js

---

🚀 Desarrollo Local

npm install       # instalar dependencias
npm run dev       # servidor de desarrollo
npm run build     # compilar a dist/
npm run preview   # previsualizar la build de producción

---

✍️ Cómo agregar un avance a la bitácora

Toda la bitácora se alimenta de dos archivos (uno por idioma):

• src/data/es/posts.json
• src/data/en/posts.json

Agrega un objeto al arreglo. Ejemplo:

{
  "id": "slug-unico-del-post",
  "date": "2026-10-14",
  "title": "Título de la entrada",
  "summary": "Resumen corto que aparece en la tarjeta.",
  "tags": ["OWASP", "QA", "FastAPI"],
  "readingTime": "5 min de lectura",
  "cover": "evidence/slug-unico-del-post/portada.png",
  "body": "Texto en Markdown (ver más abajo).",
  "links": [
    { "label": "Repositorio", "url": "https://github.com/...", "icon": "code" }
  ]
}

Mantén el mismo id en es y en para que el conmutador de idioma muestre la entrada equivalente.

Markdown soportado en body

El cuerpo acepta un subconjunto seguro de Markdown (se escapa el HTML, así que no hay riesgo de XSS):

Sintaxis	Resultado
## Texto / ### Texto	Encabezados
**negrita**, *cursiva*	Énfasis
`código`	Código inline
```bash ... ```	Bloque de código con lenguaje
- item o 1. item	Listas
> cita	Cita
[texto](https://url)	Enlace
	Imagen con caption

Cómo subir imágenes (evidencias)

Las imágenes se sirven desde public/evidence/. La forma recomendada:

1. Crea una carpeta con el slug del post, por ejemplo public/evidence/owasp-assessment-webgame/.
2. Copia ahí tus capturas con nombres sin espacios (01-reporte.png, 02-payload-xss.png, ...).
3. Referéncialas con ruta relativa, sin slash inicial: "evidence/owasp-assessment-webgame/01-reporte.png".

Consulta public/evidence/README.md para más detalle. Mientras no tengas capturas reales, los posts de ejemplo usan evidence/placeholder.svg.

---

🗂️ Cómo agregar o modificar proyectos

Edita src/data/es/projects.json y src/data/en/projects.json. Los filtros de la sección de proyectos usan el campo type:

type	Filtro mostrado
security	AppSec & QA
backend	Backend
devops	DevSecOps & Cloud

Formato de un proyecto:

{
  "id": "nuevo-proyecto",
  "title": "Nombre del Proyecto",
  "category": "AppSec & QA",
  "type": "security",
  "icon": "shield",
  "cover": "evidence/nuevo-proyecto/portada.png",
  "description": "Descripción técnica...",
  "highlights": ["Logro 1", "Logro 2"],
  "tags": ["Python", "FastAPI", "Docker"],
  "repoUrl": "https://github.com/usuario/repo",
  "docUrl": "https://github.com/usuario/repo#readme"
}

• cover es opcional (si se omite, la tarjeta no muestra imagen).
• repoUrl / docUrl son opcionales (si se omiten, no se muestra el pie de enlaces).
• icon usa nombres de Material Symbols.

---

📝 Otros archivos de datos

Archivo	Contenido
profile.json	Nombre, rol, bio, estado, disponibilidad, contacto y redes.
skills.json	Matriz técnica por categorías (seguridad, backend, DevSecOps, datos).
projects.json	Proyectos con filtros por tipo e imágenes.
posts.json	Entradas de la bitácora.
experience.json	Experiencia laboral, educación y certificaciones.
ui.json	Textos de la interfaz (nav, hero, secciones, footer).

---

🌐 Despliegue en GitHub Pages

• vite.config.js usa base: './', así que los assets funcionan aunque el sitio se publique en un subdirectorio (/portfolio/).
• .github/workflows/deploy.yml compila y despliega en cada push a main.