mohammadNafia/portfolio

Esta es la copia original, conservada para referencia. No es la copia de trabajo.

El sistema autoritativo vive en docs/pixel-portfolio-style/, con sus cuatro archivos de referencia y assets/base.css. Lee ese.

Este archivo es anterior a dos adiciones de las que depende la construcción: la regla #0 (aplicar el sistema en su lugar; nunca reescribir una aplicación funcional y probada para adoptar un aspecto — la regla que decidió toda la reestructuración) y la regla #9 más el puntero references/rtl-and-locales.md. Seguir esta copia en su lugar haría que te perdieras ambas.

Estilo Pixel Portfolio

Un sistema visual y de movimiento completo. Síguelo al pie de la letra. Cuando algo no esté cubierto aquí, elige la opción que sea más sutil, más redondeada y más geométrica — nunca introduzcas un nuevo color, una nueva fuente, un nuevo radio o una nueva curva de easing.

Innegociables (léelos cada vez)

1. Solo dos fuentes. Fuente de visualización Pixel para los títulos de sección y la palabra del héroe. Sans-serif geométrica para todo lo demás.
2. Solo un color de acento. Azul #0B8DF8. Negro #111 para botones secundarios. Nada más.
3. Cada título de sección es: fuente pixel en mayúsculas + subrayado ondulado SVG dibujado a mano, centrado.
4. Cada sección se revela al hacer scroll con la misma transición de desenfoque (ver references/motion.md).
5. Los radios son tipo píldora o 20px. Nunca 4px, nunca 8px, nunca esquinas afiladas (excepto el divisor de diente de sierra).
6. Sin bordes. La separación viene de rellenos #F2F2F2 y sombras suaves, no de líneas de 1px.
7. Columna de contenido centrada, máximo 1080px. Ritmo vertical generoso (120–160px entre secciones).
8. El texto es amigable con minúsculas y autocrítico/humano, nunca corporativo. Frases cortas.

Flujo de trabajo al añadir algo nuevo

1. Lee references/design-tokens.md → usa las variables CSS, nunca el hex en bruto.
2. Lee references/components.md → comprueba si la cosa ya existe como patrón (píldora, etiqueta, tarjeta, encabezado de sección, marquesina, carrusel, campo de formulario). Reutilízalo. No inventes un segundo estilo de tarjeta.
3. Lee references/motion.md → añade el comportamiento estándar de revelación + hover.
4. Si es una sección completamente nueva, lee references/section-recipes.md y sigue la "plantilla de nueva sección" exactamente (espaciado, encabezado, revelación, contenedor).
5. Alterna los fondos de sección --bg / --bg-hero. Si dos secciones adyacentes tienen fondos diferentes, coloca un divisor de diente de sierra entre ellas (nunca una línea recta).
6. Registra el id de la sección en los enlaces de navegación tipo píldora solo si es un destino de nivel superior (máximo 4 enlaces de navegación; si añades un quinto, pregunta al usuario cuál eliminar).
7. Añade cualquier nuevo espacio para imagen a assets/IMAGES.md con la relación de aspecto exacta necesaria, para que el usuario sepa qué proporcionar.

Autocomprobación antes de finalizar

• ¿Cada nuevo encabezado usa la fuente pixel + subrayado ondulado?
• ¿Algún código hex fuera de la lista de tokens? Elimínalo.
• ¿Algún radio que no sea 999px o 20px / 16px / 14px? Arrégialo.
• ¿El nuevo bloque aparece con blur(10px) → 0 y y: 30px → 0?
• ¿Los estados hover usan scale(1.03) + elevación de sombra + 250ms?
• Móvil: ¿el abanico/carrusel/rejilla se colapsa según las reglas móviles en references/components.md?
• ¿Mantuve el relleno vertical de la sección en clamp(80px, 10vw, 160px)?

Archivos de referencia

Archivo	Leer cuando
references/design-tokens.md	Siempre — colores, escala tipográfica, espaciado, sombras, fuentes
references/components.md	Construir cualquier elemento de UI (navegación, tarjetas, etiquetas, formularios, marquesina, carrusel, divisor)
references/motion.md	Cualquier animación, revelación, hover o coreografía de carga de página
references/section-recipes.md	Añadir una sección o página completamente nueva
assets/base.css	Hoja de estilo preparada con todos los tokens + primitivas ya implementadas
assets/IMAGES.md	Qué imágenes necesita el sitio y en qué proporción