Eine Terminal-404-Seite erstellen

Fehlerseiten müssen nicht langweilig sein. Anstatt einer einfachen "Seite nicht gefunden"-Nachricht habe ich einen interaktiven Terminal-Emulator erstellt, der das Verirren auf meiner Seite etwas unterhaltsamer macht.

Das Konzept

Die Idee war einfach: Wenn Entwickler ihre Tage im Terminal verbringen, warum nicht die 404-Seite wie zu Hause wirken lassen? Das Terminal spielt eine Startsequenz ab und akzeptiert dann cd-Befehle mit Tab-Vervollständigung.

Hauptfunktionen

• Tipp-Animation mit realistischem Timing und zufälliger Varianz
• Blinkender Cursor mit einem wiederverwendbaren useToggle Hook
• Tab-Vervollständigung für den cd-Befehl
• Tastaturkürzel (drücke 1 oder 2 zum Navigieren)
• Befehlsausführung mit Erfolgs-/Fehler-Feedback

Architektur

Das Terminal ist mit einer sauberen Trennung der Zuständigkeiten aufgebaut:

NotFound/
├── NotFoundTerminal.tsx    # Hauptkomponente
├── components/
│   ├── TerminalWindow.tsx  # Visueller Wrapper
│   ├── TerminalLine.tsx    # Zeilen-Renderer
│   ├── TerminalInput.tsx   # Eingabe mit Vorschlägen
│   └── NavigationLinks.tsx # Schnellnavigation
├── hooks/
│   ├── useTerminalTyping.ts   # Tipp-Animation
│   ├── useBlinkingCursor.ts   # Cursor-Blinken
│   └── useTerminalInput.ts    # Befehlsverarbeitung
└── constants/
    └── index.ts            # Konfiguration

Jeder Hook ist für eine einzelne Aufgabe zuständig, was den Code wartbar und testbar macht.

Blinkender Cursor

Das Cursor-Blinken verwendet einen wiederverwendbaren useToggle Hook:

export function useBlinkingCursor() {
  const [showCursor, { toggle }] = useToggle(true);
 
  useEffect(() => {
    const interval = setInterval(toggle, CURSOR_BLINK_INTERVAL);
    return () => clearInterval(interval);
  }, [toggle]);
 
  return showCursor;
}

Konfiguration

Alle Zeiteinstellungen sind über Konstanten konfigurierbar:

export const TYPING_SPEED = {
  character: { min: 30, variance: 20 },
  lineDelay: 300,
  outputDelay: 150,
  emptyLineDelay: 100,
};
 
export const CURSOR_BLINK_INTERVAL = 530;

Probier es aus

Navigiere zu /diese-seite-existiert-nicht um es in Aktion zu sehen. Versuche cd zu tippen und Tab zu drücken für die Autovervollständigung!

Fazit

Kleine Details wie eine kreative 404-Seite können ein Portfolio unvergesslich machen. Die modulare Architektur mit benutzerdefinierten Hooks hält den Code sauber und jedes Teil konzentriert sich darauf, eine Sache gut zu machen.