Casos de uso

Complementa las historias de usuario: las HU expresan la necesidad; los casos de uso detallan cómo el actor interactúa con el sistema.

1. Actores

2. Diagrama de casos de uso

Versión UML (Mermaid): B1 — Casos de uso.

Vista en texto

                    ┌─────────────────────────────────────┐
                    │     Portafolio / Hoja de vida       │
                    │                                     │
 Visitante ─────────┤  CU-01 Consultar presentación       │
                    │  CU-02 Recorrer perfil (scroll)      │
                    │  CU-03 Navegar a sección             │
                    │  CU-04 Consultar experiencia         │
                    │  CU-05 Consultar educación           │
                    │  CU-06 Consultar habilidades         │
                    │  CU-07 Consultar proyectos           │
                    │  CU-08 Abrir evidencia de proyecto   │
                    │  CU-09 Contactar al profesional      │
                    │  CU-10 Descargar hoja de vida (PDF)  │
                    │  CU-11 Usar en dispositivo móvil     │
                    │  CU-12 Acceder por URL pública       │
                    │                                     │
 Dueño ─────────────┤  CU-13 Actualizar contenido          │
                    │  CU-14 Publicar / actualizar sitio   │
                    └─────────────────────────────────────┘

3. Catálogo de casos de uso

CU-01 — Consultar presentación profesional (Hero)

Flujo principal

1. El visitante ingresa la URL del portafolio.
2. El sistema carga la página principal.
3. El sistema muestra el hero con nombre, rol, tagline y foto (o placeholder).
4. El sistema muestra los botones “Ver experiencia” y “Descargar CV”.
5. El sistema reproduce animaciones de entrada (si no hay reduced-motion).
6. El visitante identifica el perfil en segundos.

Flujos alternativos

• A1. El visitante tiene prefers-reduced-motion: el sistema omite o reduce animaciones no esenciales (CU-01 + RNF-03).
• A2. No existe foto real: el sistema muestra placeholder/monograma (RF-12).

Excepciones

• E1. La página no carga: el visitante ve error del navegador/hosting; fuera del control de la app estática (ver runbook operativo).

CU-02 — Recorrer el perfil por scroll

Flujo principal

1. El visitante hace scroll hacia abajo.
2. El sistema revela secciones (sobre mí, experiencia, educación, skills, proyectos, contacto).
3. El sistema aplica animaciones de entrada al entrar en viewport.
4. El visitante continúa o se detiene en la sección de interés.

Flujos alternativos

• A1. Reduced-motion activo: reveal mínimo o instantáneo.

CU-03 — Navegar a una sección específica

Flujo principal

1. El visitante selecciona un ítem del menú (ej. Experiencia, Proyectos, Contacto) o “Ver experiencia”.
2. El sistema realiza scroll suave hasta el id de la sección.
3. El visitante visualiza el contenido de esa sección.

Flujos alternativos

• A1. Móvil: el visitante abre el menú hamburguesa, elige la sección y el menú se cierra.
• A2. El visitante usa el botón “Ver experiencia” del hero (mismo destino que #experiencia).

Excepciones

• E1. El id no existe: no hay desplazamiento útil (defectos de implementación; debe evitarse en QA).

CU-04 — Consultar experiencia laboral

Flujo principal

1. El visitante llega a #experiencia (scroll o navegación).
2. El sistema muestra el timeline ordenado (más reciente primero).
3. El visitante lee cada puesto y sus highlights.

CU-05 — Consultar educación y certificaciones

Flujo principal

1. El visitante llega a #educacion.
2. El sistema muestra cards o listado de estudios/certificaciones.
3. El visitante lee la información.

CU-06 — Consultar habilidades

Flujo principal

1. El visitante llega a #habilidades.
2. El sistema muestra skills agrupadas (chips/tarjetas).
3. En escritorio, el visitante puede hacer hover sobre ítems (microinteracción).
4. El visitante identifica coincidencias con su búsqueda.

CU-07 — Consultar proyectos destacados

Flujo principal

1. El visitante llega a #proyectos.
2. El sistema muestra cards de proyectos (o placeholders).
3. El visitante lee nombre, descripción y stack.

Flujos alternativos

• A1. No hay proyectos reales: el sistema muestra placeholders o la sección se oculta según configuración.

CU-08 — Abrir evidencia de proyecto (demo o repositorio)

Flujo principal

1. El visitante hace clic en “Demo” o “Repo”.
2. El sistema abre la URL en una nueva pestaña (noopener).
3. El visitante consulta el recurso externo.

Excepciones

• E1. El enlace no está configurado: el botón no se muestra.
• E2. El recurso externo no responde: el visitante ve el error del sitio externo (fuera de alcance del portafolio).

CU-09 — Contactar al profesional

Flujo principal

1. El visitante llega a #contacto (o usa iconos del hero).
2. El sistema muestra los canales disponibles.
3. El visitante elige un canal (email, LinkedIn, GitHub, WhatsApp).
4. El sistema abre mailto: o la URL externa correspondiente.
5. El visitante continúa el contacto fuera del sitio.

Flujos alternativos

• A1. Un canal opcional no está configurado: no se muestra ese botón.

CU-10 — Descargar hoja de vida (PDF)

Flujo principal

1. El visitante hace clic en “Descargar CV” (hero, nav o contacto).
2. El sistema sirve el archivo /cv.pdf.
3. El navegador descarga o abre el PDF.
4. El visitante puede usarlo en su proceso de selección.

Excepciones

• E1. PDF ausente: el botón está deshabilitado u oculto (estado vacío documentado en diseño).
• E2. Error de red al descargar: el navegador muestra fallo de descarga.

CU-11 — Usar el portafolio en dispositivo móvil

Flujo principal

1. El visitante abre la URL en móvil.
2. El sistema renderiza layout de una columna.
3. El visitante usa el menú móvil si necesita saltar de sección.
4. El visitante lee contenidos y usa CTAs sin zoom forzado.

CU-12 — Acceder por URL pública y compartir

Flujo principal

1. El visitante (o un tercero) abre o comparte la URL pública.
2. El sistema responde la landing por HTTPS.
3. Si se comparte en una red social, se exponen metadatos Open Graph.

CU-13 — Actualizar contenido del portafolio

Flujo principal

1. El dueño edita src/data/profile.ts y/o reemplaza archivos en public/.
2. El dueño verifica en entorno local (npm run dev).
3. El dueño publica los cambios (CU-14).

Excepciones

• E1. Ruta de imagen/PDF incorrecta: el asset no se ve o el botón falla (corregir rutas).

CU-14 — Publicar o actualizar el sitio

Flujo principal

1. El dueño ejecuta el build (npm run build).
2. El dueño despliega en Vercel o GitHub Pages.
3. El sistema queda disponible en la URL pública.
4. El dueño realiza smoke test (checklist de release).

Excepciones

• E1. Build falla: no se publica; se corrige según logs (runbook).

4. Matriz caso de uso → historia de usuario

5. Relación con otros documentos

6. Nota metodológica (para portafolio)

En proyectos ágiles a veces se usan solo HU. Aquí se incluyen ambos formatos a propósito:

• HU → priorización y valor
• Casos de uso → interacción detallada actor–sistema

Así el repositorio demuestra manejo de documentación de análisis funcional completa.