Cómo presentar un proyecto

Un buen portfolio no solo lista tecnologías: cuenta una historia. Esta guía define una estructura que puedes copiar en src/content/projects para presentar cada proyecto con claridad, mockups y enlaces a demo y código.

Estructura recomendada

Sección	Qué incluir
Resumen	Una frase: qué es y para quién.
Contexto	Problema, usuario o restricciones.
Rol y stack	Tu responsabilidad y herramientas clave.
Solución	Decisiones de diseño y arquitectura.
Mockups	Vista escritorio, móvil o panel.
Resultados	Métricas, feedback o aprendizajes.
Enlaces	`demoURL` y `repoURL` en el frontmatter.

Frontmatter de ejemplo

---
title: "Nombre del proyecto"
description: "Resumen en una línea para listados y SEO."
date: "May 18 2026"
draft: false
demoURL: "https://tu-demo.vercel.app"
repoURL: "https://github.com/tu-usuario/proyecto"
---

Mockups en Markdown

Coloca imágenes en public/mockups/ o en la carpeta del proyecto. Usa pies de foto descriptivos.

Vista escritorio

Mockup de la página principal en escritorio

Pantalla principal: navegación, hero y llamada a la acción.

Vista móvil

Coloca varias capturas en fila con HTML si necesitas un layout más rico:

<div class="flex flex-wrap gap-6 items-start">
  <figure>
    <img src="/mockups/mobile.svg" alt="Listado móvil" />
    <figcaption>Listado</figcaption>
  </figure>
  <figure>
    <img src="/mockups/mobile.svg" alt="Detalle móvil" />
    <figcaption>Detalle</figcaption>
  </figure>
</div>

Panel o dashboard

Mockup de panel de administración

Vista de métricas y gestión para el equipo interno.

Sustituye los SVG de ejemplo por capturas reales (webp o png) cuando tengas el diseño final.

Texto que convence

Contexto

Una pyme necesitaba centralizar pedidos que llegaban por WhatsApp y hoja de cálculo. Perdían tiempo y cometían errores al copiar datos.

Solución

Explica qué hiciste, no solo qué herramientas usaste:

API en Node con validación de stock.
Panel en Astro con actualización en tiempo real.
Despliegue en Vercel con base de datos en Neon.

Resultados

Sé concreto cuando puedas:

Tiempo de respuesta a pedidos: de 2 h a 15 min.
Errores de inventario: −40 % en el primer mes.
Lighthouse en móvil: 95+ en rendimiento.

Plantilla lista para copiar

Copia el proyecto de ejemplo en el portfolio:

Plantilla: caso de estudio — incluye todas las secciones, mockups y enlaces de demostración.

Checklist antes de publicar

Título y descripción claros en español.
Al menos un mockup (escritorio o móvil).
Enlaces a demo y repositorio si existen.
draft: false cuando esté listo.
Revisión ortográfica y lectura en móvil.

Con esta base, cada proyecto del portfolio se lee como un caso de estudio profesional, no como una lista de repos.