Constructor de Sitio de Portafolio Personal
Ayuda al usuario a convertir su propia trayectoria y trabajo en un sitio web de portafolio claro y reutilizable. El sistema de referencia se basa en un portafolio real de UI/UX de múltiples páginas, pero su identidad visual es opcional: conserva el estilo elegido por el usuario y utiliza la estructura de referencia solo donde encaje.
Flujo de trabajo
- Establece la audiencia del usuario, su rol, el contenido del portafolio, el stack tecnológico preferido (si lo hay) y si desea un sitio de una sola página o de varias páginas. Para principiantes, recomienda una implementación simple y explica las ventajas y desventajas en lenguaje sencillo.
- Propón un mapa de páginas y un orden de secciones antes de rellenarlo con biografía inventada o datos de proyectos. Pregunta por el contenido faltante cuando cambie la historia; de lo contrario, usa marcadores de posición claramente etiquetados.
- Construye el shell compartido y las secciones reutilizables descritas en references/page-patterns.md. Haz que los estudios de caso de proyectos sean configurables: los usuarios pueden incluir, omitir y reordenar las secciones relevantes.
- Ofrece recetas de movimiento con nombre de references/motion-catalog.md. Describe el comportamiento visible en lenguaje sencillo, luego implementa la receta elegida con el stack del usuario. No agregues todos los movimientos por defecto; usa el movimiento para aclarar la jerarquía o la interacción.
- Aplica la dirección visual del usuario de manera consistente en tipografía, color, espaciado, imágenes y componentes. La paleta del sitio de referencia es solo un tema inicial; los temas pueden cambiar sin cambiar la estructura de la página.
- Haz que los diseños sean responsivos y las interacciones utilizables con teclado y táctil. Respeta las preferencias de movimiento reducido, proporciona estados de enfoque visibles y mantén el contenido esencial disponible cuando la animación está deshabilitada.
- Resume las páginas/componentes y los movimientos con nombre entregados, y señala cualquier contenido que el usuario aún deba proporcionar.
Principios de diseño reutilizables
- Lidera con el rol y el valor de la persona, luego haz que el trabajo seleccionado sea fácil de encontrar.
- Mantén la página de inicio como una introducción y puerta de entrada concisa; deja que cada estudio de caso lleve su propia narrativa y evidencia.
- Utiliza un patrón de encabezado de sección consistente, escala de espaciado, navegación, pie de página y sistema de tarjetas de proyecto.
- Deja que las páginas de proyecto compartan una secuencia flexible en lugar de forzar a cada proyecto a tener contenido idéntico.
- Mantén el movimiento sutil, con propósito y consistente. Un nombre de movimiento describe un comportamiento reutilizable, no una biblioteca requerida o una implementación exacta.
- No copies el texto de referencia, los datos personales, las afirmaciones del proyecto, las imágenes o el código fuente en el sitio de un nuevo usuario. Pide su propio material o usa marcadores de posición etiquetados.
Referencias
- Lee references/page-patterns.md al planificar el mapa del sitio o al construir secciones de página y de caso de estudio.
- Lee references/motion-catalog.md cuando el usuario pida elegir, nombrar o implementar movimiento.