Portada personal de proyectos

Portal UI

Un portal cumple varios propósitos. Una página de aterrizaje gana uno. Si la página tiene una sola oferta y una acción, detente y usa un skill de página de aterrizaje. Este archivo es la capa de decisión para el trabajo de una persona.

Dos fuentes establecen los valores predeterminados que este archivo no repite. Las prohibiciones de disfraz visual siguen Leonxlnx/taste-skill (MIT). El espaciado, el enfoque y la sincronización de movimiento siguen elayadesign/ai-design-skills landing-page-design (MIT) solo donde este archivo los nombra. Cuando esos dos entren en conflicto sobre un portal, este archivo tiene prioridad.

Idea

Escribe una oración antes de editar:

En esta página, [un artefacto que solo existe aquí] se convierte en [el único dispositivo activo].

Cuenta el terminal, el proyecto en ejecución o la interfaz real. Una línea de escaneo, una cuadrícula de neón o "SYS.ONLINE" no cuentan: la misma oración funciona para cualquier desarrollador. Mantén un único dispositivo activo. Debe funcionar con un pulgar, tener un fallback sin script y nunca bloquear el trabajo.

Marca un fragmento de interfaz real con data-ui. El espacio monoespaceado permanece dentro de ese fragmento, dentro de pre/code, y en figuras tabulares.

Orden de la página

1. Primera pantalla: quién es esto, qué hacen, el dispositivo activo. Un h1, dos líneas o menos en cualquier ancho. Una oración debajo que diga qué hacer.
2. Trabajo propio, con la imagen o clip real. El software de otra persona es una guía. Nombra al autor en la fila de la guía. No lo pongas en la cuadrícula de trabajo.
3. Lista activa opcional (un feed, una clasificación) si realmente se obtiene.
4. Guías: cómo usar la herramienta, en una oración. Los conteos de estrellas son secundarios y pueden actualizarse solos.
5. Documentos que ya existen. No titules el sitio con una sección que no tenga documentos. Un blog prometido obtiene una lista real, o la palabra sale del título.
6. Pie de página: el nombre, el contacto y cualquier oferta paga o de soporte. La oferta de soporte no es un par del trabajo.

Cada elemento en la navegación tiene un encabezado y un objetivo real. El diseño del teléfono mantiene esa navegación. Si la barra se oculta por debajo de un punto de interrupción, agrega un control que abra un panel plano de altura completa. Los enlaces llegan en orden de lectura, con 60 ms de diferencia, total por debajo de 400 ms. El fondo del panel es el fondo de la página, no un desenfoque.

Cortes visuales

Elimina esto antes de agregar cualquier cosa: degradados de texto, barras de vidrio, líneas de escaneo, cuadrículas animadas, bordes cónicos, brillos, emojis en encabezados, números de índice (01 //), insignias de píldora sobre el título, y más de un efecto ambiental detrás del trabajo.

Mantén el fondo, la tinta y un acento existentes cuando el sitio ya los tenga. No introduzcas una segunda cara de visualización. El peso se mantiene en 700 o menos.

El movimiento usa cubic-bezier(0.22, 1, 0.36, 1). Anima solo transform y opacity. Revela cada sección una vez con IntersectionObserver. Un oyente de desplazamiento que debe existir está controlado por requestAnimationFrame. prefers-reduced-motion mantiene cada palabra en pantalla y elimina el viaje.

CSS compartido: coloca los cortes solo del portal en la hoja de estilo de la página de inicio. Cambia el archivo compartido solo por un error que tenga cada página, como un anillo de enfoque faltante.

Envío

• Enlace de salto, :focus-visible visible, elemento de navegación actual marcado.
• Sin href="#".
• og:image es una imagen amplia del trabajo. La tarjeta de Twitter es summary_large_image.
• Texto alternativo en las imágenes de trabajo. El dispositivo activo tiene un nombre accesible.

Verificación

Ejecuta node scripts/check.mjs <index.html> <archivos css> desde este skill. Luego abre la página en 1440, 768 y 390. En el teléfono, abre el menú y sigue cada enlace. Con el movimiento reducido, la primera pantalla aún nombra a la persona y el trabajo.

Corrige un FAIL del script. No cambies el estilo de las páginas hermanas para que coincidan con un corte de la página de inicio.