Page d'accueil de projets perso

Portal UI (Portail UI)

Un portail sert plusieurs intentions. Une page d'atterrissage n'en gagne qu'une. Si la page a une offre et une action, arrêtez-vous et utilisez un skill de page d'atterrissage. Ce fichier est la couche de décision pour le travail d'une personne.

Deux sources définissent les valeurs par défaut que ce fichier ne répète pas. Les interdictions de costume visuel suivent Leonxlnx/taste-skill (MIT). L'espacement, la mise au point et le rythme du mouvement suivent elayadesign/ai-design-skills landing-page-design (MIT) uniquement là où ce fichier les nomme. Lorsque ces deux entrent en conflit sur un portail, ce fichier l'emporte.

Idée

Écrivez une phrase avant de modifier :

Sur cette page, [un artefact qui n'existe qu'ici] devient [le seul dispositif actif].

Le terminal, le projet en cours ou l'interface réelle compte. Une scanline, une grille néon ou « SYS.ONLINE » ne compte pas : la même phrase fonctionne pour tout développeur. Gardez un seul dispositif actif. Il doit fonctionner au doigt, avoir une solution de repli sans script et ne jamais bloquer le travail.

Marquez un fragment d'interface réelle avec data-ui. Le monospace reste à l'intérieur de ce fragment, à l'intérieur de pre/code, et sur les chiffres tabulaires.

Ordre de la page

1. Premier écran : qui est-ce, ce qu'il/elle crée, le dispositif actif. Un seul h1, deux lignes ou moins à toutes les largeurs. Une phrase en dessous qui dit quoi faire.
2. Travail personnel, avec la vraie image ou vidéo. Le logiciel de quelqu'un d'autre est un guide. Nommez l'auteur dans la ligne du guide. Ne le mettez pas dans la grille de travaux.
3. Liste en direct facultative (un flux, un classement) si elle est effectivement récupérée.
4. Guides : comment utiliser l'outil, en une phrase. Les nombres d'étoiles sont secondaires et peuvent se mettre à jour eux-mêmes.
5. Documents qui existent déjà. Ne titrez pas le site avec une section qui n'a pas de documents. Un blog promis obtient une vraie liste, ou le mot sort du titre.
6. Pied de page : le nom, le contact, et toute offre payante ou de support. L'offre de support n'est pas un pair des travaux.

Chaque élément de la navigation a un titre et une cible réelle. La mise en page téléphone conserve cette navigation. Si la barre disparaît en dessous d'un point de rupture, ajoutez un contrôle qui ouvre un panneau plat en pleine hauteur. Les liens arrivent dans l'ordre de lecture, espacés de 60 ms, total sous 400 ms. Le fond du panneau est le fond de la page, pas un flou.

Coupes visuelles

Supprimez ces éléments avant d'ajouter quoi que ce soit : dégradés de texte, barres de verre, scanlines, grilles animées, bordures coniques, lueurs, émojis dans les titres, numéros d'index (01 //), badges piluliers au-dessus du titre, et plus d'un effet ambiant derrière le travail.

Conservez le fond, l'encre et un seul accent existants lorsque le site les a déjà. N'introduisez pas une deuxième police d'affichage. Le poids reste à 700 ou moins.

Le mouvement utilise cubic-bezier(0.22, 1, 0.36, 1). Animez uniquement transform et opacity. Révélez chaque section une fois avec IntersectionObserver. Un écouteur de défilement qui doit exister est contrôlé par requestAnimationFrame. prefers-reduced-motion garde chaque mot à l'écran et supprime le déplacement.

CSS partagé : mettez les coupes propres au portail dans la feuille de style de la page d'accueil. Modifiez le fichier partagé uniquement pour un bogue que toutes les pages ont, comme un anneau de focus manquant.

Livraison

• Lien d'évitement, :focus-visible visible, élément de navigation actuel marqué.
• Pas de href="#".
• og:image est une grande image du travail. Carte Twitter est summary_large_image.
• Texte alternatif sur les images de travail. Le dispositif actif a un nom accessible.

Vérification

Exécutez node scripts/check.mjs <index.html> <css files> à partir de ce skill. Ouvrez ensuite la page à 1440, 768 et 390. Sur le téléphone, ouvrez le menu et suivez chaque lien. Avec le mouvement réduit, le premier écran nomme toujours la personne et le travail.

Corrigez un FAIL du script. Ne restylez pas les pages sœurs pour correspondre à une coupe de la page d'accueil.