lixyd/portal-ui

Portal UI

Ein Portal erfüllt mehrere Absichten. Eine Landing Page gewinnt eine einzige. Wenn die Seite ein Angebot und eine Handlung hat, stoppe und verwende eine Landing-Page-Fähigkeit. Diese Datei ist die Entscheidungsebene für die eigene Arbeit einer Person.

Zwei Quellen legen die Standardwerte fest, die diese Datei nicht wiederholt. Visuelle Kleidungsverbote folgen Leonxlnx/taste-skill (MIT). Abstände, Fokus und Bewegungs-Timing folgen elayadesign/ai-design-skills landing-page-design (MIT) nur dort, wo diese Datei sie benennt. Wenn diese beiden bei einem Portal in Konflikt geraten, gewinnt diese Datei.

Idee

Schreibe einen Satz, bevor du etwas bearbeitest:

Auf dieser Seite wird [ein Artefakt, das es nur hier gibt] zu [dem einen Live-Gerät].

Das Terminal, das laufende Projekt oder die echte Schnittstelle zählt. Ein Scanline, ein Neon-Gitter oder „SYS.ONLINE” zählt nicht: Der gleiche Satz funktioniert für jeden Entwickler. Behalte ein Live-Gerät. Es muss mit einem Daumen funktionieren, einen No-Script-Fallback haben und darf niemals die Arbeit blockieren.

Markiere ein echtes Schnittstellenfragment mit data-ui. Monospace bleibt innerhalb dieses Fragments, innerhalb von pre/code und bei tabellarischen Abbildungen.

Seitenreihenfolge

1. Erster Bildschirm: Wer das ist, was sie machen, das Live-Gerät. Ein h1, zwei Zeilen oder weniger bei jeder Breite. Ein Satz darunter, der sagt, was zu tun ist.
2. Eigene Arbeit, mit dem echten Bild oder Clip. Die Software von jemand anderem ist ein Leitfaden. Nenne den Autor in der Leitfaden-Zeile. Setze sie nicht in das Arbeitsraster.
3. Optionale Live-Liste (ein Feed, eine Rangliste), wenn sie tatsächlich abgerufen wird.
4. Leitfäden: Wie man das Werkzeug benutzt, in einem Satz. Sternanzahlen sind zweitrangig und können sich selbst aktualisieren.
5. Dokumente, die bereits existieren. Betiteln die Website nicht mit einem Abschnitt, der keine Dokumente hat. Ein versprochener Blog erhält eine echte Liste, oder das Wort verschwindet aus dem Titel.
6. Fußzeile: Name, Kontakt und jedes bezahlte oder Support-Angebot. Das Support-Angebot ist kein gleichwertiger Bestandteil der Arbeit.

Jeder Eintrag in der Navigation hat eine Überschrift und ein echtes Ziel. Das Telefon-Layout behält diese Navigation. Wenn die Leiste unterhalb eines Breakpoints verschwindet, füge ein Steuerelement hinzu, das ein vollhohes flaches Panel öffnet. Links erscheinen in Lesereihenfolge, 60 ms Abstand, insgesamt unter 400 ms. Der Panel-Hintergrund ist der Seitenhintergrund, kein Weichzeichner.

Visuelle Einschnitte

Entferne diese, bevor du etwas hinzufügst: Textverläufe, Glasleisten, Scanlines, animierte Gitter, konische Ränder, Glüheffekte, Emojis in Überschriften, Indexnummern (01 //), Pill-Badges über der Schlagzeile und mehr als einen Umgebungseffekt hinter der Arbeit.

Behalte den vorhandenen Hintergrund, die Tinte und eine Akzentfarbe, wenn die Seite sie bereits hat. Führe kein zweites Display-Gesicht ein. Die Schriftstärke bleibt bei 700 oder darunter.

Bewegung verwendet cubic-bezier(0.22, 1, 0.36, 1). Animiere nur transform und opacity. Zeige jeden Abschnitt einmal mit IntersectionObserver an. Ein Scroll-Listener, der existieren muss, wird durch requestAnimationFrame gesteuert. prefers-reduced-motion hält jedes Wort auf dem Bildschirm und entfernt die Bewegung.

Gemeinsames CSS: Platziere portal-spezifische Einschnitte im Stylesheet der Startseite. Ändere die gemeinsame Datei nur für einen Fehler, den jede Seite hat, z. B. einen fehlenden Fokusring.

Ausliefern

• Skip-Link, sichtbares :focus-visible, aktuelles Navigationselement markiert.
• Kein href="#".
• og:image ist ein breites Bild der Arbeit. Twitter-Karte ist summary_large_image.
• Alt-Text auf den Arbeitsbildern. Das Live-Gerät hat einen zugänglichen Namen.

Prüfen

Führe node scripts/check.mjs <index.html> <css files> aus dieser Fähigkeit aus. Öffne dann die Seite bei 1440, 768 und 390. Öffne auf dem Telefon das Menü und folge jedem Link. Bei reduzierter Bewegung zeigt der erste Bildschirm immer noch den Namen der Person und die Arbeit an.

Behebe einen FAIL aus dem Skript. Gestalte Schwester-Seiten nicht neu, damit sie zu einem Startseiten-Einschnitt passen.