3.0 KiB

Raw Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Commands

npm run dev        # Dev-Server (http://localhost:3000) — erhöhter Node-Heap (4 GB)
npm run build      # Produktions-Build (TypeScript + Next.js)
npm run lint       # ESLint via next lint
npx tsc --noEmit   # TypeScript-Check ohne Build
git push           # Remote: https://gitea.mbo-tech-it.de/jonny/MBO-Tech-IT-Webseite.git

Architektur

Next.js 15 App Router, kein Pages Router. Alle Routen liegen unter app/.

app/
  page.tsx           # Startseite — reiht alle Sektionskomponenten auf
  layout.tsx         # Root Layout mit Metadata (DE, scroll-smooth)
  globals.css        # Tailwind-Imports, Design-Tokens, globale Klassen
  impressum/         # Statische Seite
  datenschutz/       # Statische Seite
  pakete/            # Statische Seite

components/          # Eine Komponente = eine Sektion oder ein UI-Primitiv
hooks/               # Client-only Hooks ("use client" in .ts-Dateien)

Komponentenmodell: Sektionskomponenten sind standardmäßig React Server Components. "use client" nur wenn Browser-APIs oder Hooks verwendet werden (ScrollReveal, StatsBar, Hero, useTypewriter).

Seitenaufbau (app/page.tsx): Header → Hero → TaglineBanner → StatsBar → Services → TaglineBanner → PaperlessSection → DataSovereignty → TaglineBanner → Technologies → About → TaglineBanner → Contact → Footer

Design-System

Farbpalette (in globals.css und tailwind.config.ts definiert):

Hintergrund: #18212f (Hauptseite), #111925 (Sektionen mit dunklem Hintergrund)
Akzent Orange: text-orange-400, bg-orange-500, border-orange-500/20
Akzent Blau: text-blue-400, bg-blue-500, border-blue-500/20

Utility-Klassen (in globals.css per @layer definiert):

.btn-primary — oranger Primär-Button
.btn-secondary — outlined Button
.btn-nav — kleiner Nav-Button
.text-gradient — Blau-Verlauf (für Highlights in Überschriften)
.text-gradient-orange — Orange-Verlauf
.bg-grid — Dot-Matrix-Hintergrundmuster (orange)
.animate-ticker — horizontales Lauf-Band (TaglineBanner)

Animations-Klassen (Tailwind-Config):

animate-pulse-slow — 3s Puls
animate-fade-in, animate-slide-up — einmalige Einblend-Animationen

Scroll-Animationen

components/ScrollReveal.tsx ist der Animations-Wrapper für alle Scroll-Effekte:

<ScrollReveal delay={150}>  {/* delay in ms, optional */}
  <IrgendEineKomponente />
</ScrollReveal>

Nutzt Intersection Observer (threshold 0.1), feuert einmalig
Inline-Styles statt Tailwind (wegen dynamischem Delay-Wert)
Muss in Client-Komponenten eingebettet oder selbst als Client-Komponente gerendert werden

TypeScript-Hinweise

@/* aliased auf das Root-Verzeichnis (z. B. @/components/Hero)
strict: true — keine impliziten any
JSX.Element nicht verwenden — stattdessen ReactElement aus react importieren (Next.js 15 / React 19 hat JSX-Namespace-Änderungen)

3.0 KiB Raw Blame History