emdev — Website

Offizielle Website von emdev (Maurice Schreiter, Einzelunternehmen, Deutschland).
Das Unternehmen bietet Softwareentwicklung, Prozessautomatisierung und KI-Beratung für den deutschen Mittelstand.

„Prozesse, die vorher Stunden gedauert haben.“

---

🚀 Features

• Markenkonformes Design-System: Strikte Einhaltung des emdev Markenhandbuchs. Radii von 0 für Flächen/Karten und 3–4 px (rounded-[3px]) für Interaktionselemente. Keine Schlagschatten oder Verläufe.
• Vollständiger Light & Dark Mode:
  • Light Mode: Helle Hauptflächen (#FFFFFF / #F2F2F0) mit dunklem Text (#22272F) und Violett-Akzent (#5B34C7 Akzent-Text, #7B52DD Brand-Farbe).
  • Dark Mode: Dunkle Flächen (#171B21 / #1F242B) mit hellem Text (#F2F2F0) und separatem Token-Set (#B49BFF Akzent-Text, #7B52DD Brand-Farbe).
  • FOUC-Schutz: Ein synchrones Inline-Script im <head> verhindert ein weißes Aufblitzen vor dem ersten Rendering.
  • Header-Toggle: Barrierefreier Icon-Umschalter (44 × 44 px) im Header mit aria-label und aria-pressed.
• Performance & Typografie: Self-hosted Google Fonts (Figtree & JetBrains Mono) via next/font/google für 0 Layout-Shift und kein Render-Blocking.
• Barrierefreiheit (a11y): Tastaturbedienbarer Skip-Link (Zum Hauptinhalt springen), sichtbarer Fokusring in Akzentfarbe (#7B52DD), Kontrastwerte ≥ 4.5:1 und Mindest-Trefferflächen von 44 px.
• Kontaktformular mit Spamschutz: Serverseitige API-Route (/api/contact) mit Honeypot-Feld (website_hp), Validierung und in-place Danke-Zustand ohne Seitenwechsel.
• SEO & Structured Data: LocalBusiness / ProfessionalService JSON-LD Schema Markup, metadataBase, OpenGraph-Metadaten sowie automatische Generierung von sitemap.xml, robots.txt und manifest.webmanifest.
• Subtile Schwestermarken-Integration: Hinweise auf msdesign studio (WordPress & Webdesign) und Mauro Pictures (Imagefilm).

---

🛠️ Technologie-Stack

• Framework: Next.js 16.3.1 (App Router mit Turbopack)
• Sprache: TypeScript 5
• UI-Library: React 19 (19.2.8)
• Styling: Tailwind CSS v4 (@import "tailwindcss", CSS-Variablen in globals.css & @theme Extension)
• Fonts: next/font/google (Figtree 800/600/400 & JetBrains Mono 500)
• Vektorgrafiken: Inline SVG-Symbol mit Cursor-Blink-Animation (animate-cursor-blink) & optimierte SVGs in public/ und brand/

---

📥 Installation

# Repository klonen
git clone https://git.bude3000.de/emdev/emdev.git

# In das Projektverzeichnis wechseln
cd emdev

# Abhängigkeiten installieren
npm install

---

💻 Entwicklungsstart

npm run dev

Die Anwendung ist anschließend im Browser erreichbar unter: 👉 http://localhost:3000

---

📂 Projektstruktur

├── brand/                 # Markenpaket, Markenhandbuch, Logos (.svg) & Icons
├── docs/ai/               # AI Engineering Dokumentation (Architecture, Decisions, Security etc.)
├── public/                # Logos, Favicons & Web-Manifest Assets
│   ├── app-icon-180.png / app-icon-512.png / app-icon-1024.png
│   ├── emdev-logo-horizontal.svg / emdev-logo-negativ.svg / emdev-logo-web.svg / emdev-wortmarke.svg
│   ├── emdev-zeichen.svg / emdev-zeichen-negativ.svg
│   └── favicon-32.png / favicon-64.png
├── src/
│   ├── app/
│   │   ├── api/contact/   # Server-side Route Handler für Kontaktanfragen
│   │   ├── datenschutz/   # Datenschutzerklärung (/datenschutz)
│   │   ├── impressum/     # Impressum (/impressum)
│   │   ├── globals.css    # Design-Tokens (Light & Dark Mode) und Tailwind @theme
│   │   ├── layout.tsx     # Root-Layout mit Fonts & Anti-Flicker Inline Script
│   │   ├── manifest.ts    # Generierung von manifest.webmanifest
│   │   ├── page.tsx       # Startseite (/) mit allen 9 Sektionen & Schema Markup
│   │   ├── robots.ts      # Generierung von robots.txt
│   │   └── sitemap.ts     # Generierung von sitemap.xml
│   └── components/
│       ├── ContactForm.tsx # Formular mit Honeypot-Schutz & Status-Handling
│       ├── Footer.tsx      # Markenkonformer Footer mit Schwestermarken
│       ├── Header.tsx      # Sticky Header mit Logo, Navigation & ThemeToggle
│       ├── Logo.tsx        # HTML-Wortmarke + SVG-Zeichen (Standard/Responsive)
│       ├── LogoNegative.tsx# Invertiertes Logo für dunkle Flächen
│       └── ThemeToggle.tsx # Icon-Umschalter für Light/Dark Mode (44px)
├── AGENTS.md              # KI-Entwicklungsregeln für Antigravity/Agents
├── next.config.ts         # Next.js Konfiguration (allowedDevOrigins etc.)
├── package.json           # Projektabhängigkeiten und Skripte
└── tsconfig.json          # TypeScript Konfiguration

---

📜 Wichtige Skripte

Befehl	Beschreibung
npm run dev	Startet den Entwicklungs-Server mit Hot Reloading auf Port 3000
npm run build	Kompiliert und erstellt den optimierten Produktions-Build
npm run start	Startet die gebaute Anwendung im Produktionsmodus
npm run lint	Führt ESLint zur statischen Code-Analyse aus
npx tsc --noEmit	Führt die TypeScript-Typprüfung durch

---

📘 Entwickler- & AI-Dokumentation (docs/ai/)

Ausführliche Projekt- und Architektur-Dokumentationen befinden sich im Verzeichnis docs/ai/:

• PROJECT_CONTEXT.md — Projektziel, Stakeholder, Tech-Stack & Befehle
• ARCHITECTURE.md — Komponentenübersicht, Datenfluss & Grenzen
• CODING_STANDARDS.md — Naming, Imports, Formate & Design-Tokens
• SECURITY.md — Input-Validierung, Honeypot & Datenschutz
• OPERATIONS.md — Deployment, Umgebungen & Logging
• DECISIONS.md — Architekturentscheidungen (ADRs)
• TESTING.md — Teststrategie & Verifikationskommandos
• HANDOVER.md — Aktueller Arbeitsstand & offene Punkte
• ROADMAP.md — Nächste Meilensteine & technische Schulden
• WORKFLOW.md — AI-Entwicklungs-Workflow & Bootstrap-Anleitungen

---

⚙️ Konfiguration

• Design-Tokens (src/app/globals.css):
  Enthält die Farbvariablen für :root (Light) und html.dark (Dark Mode).
• Netzwerk-Zugriff (next.config.ts):
  allowedDevOrigins ist vorkonfiguriert, um HMR-Sperren bei Zugriffen über die lokale Netz-IP (192.168.1.44) zu verhindern.

---

🚢 Deployment

Das Projekt ist für ein statisches Export-Deployment oder ein Serverless-Deployment auf Vercel bzw. eigenen Docker/Node.js-Umgebungen optimiert.

1. Repository mit Vercel verbinden oder npm run build auf dem Zielserver ausführen.
2. Umgebungsvariablen für Mailversand (falls gewünscht) hinterlegen.

---

⚠️ Bekannte Einschränkungen & Offene Punkte

• src/app/impressum/page.tsx: Anschrift, Telefonnummer und USt-IdNr. enthalten noch [TODO]-Markierungen.
• src/app/datenschutz/page.tsx: Postanschrift und Auftragsverarbeitungs-Details enthalten noch [TODO]-Markierungen.
• src/app/page.tsx (#referenzen): Der Referenzbereich ist als Platzhalter markiert, bis reale Kunden-Fallstudien freigegeben sind.
• E-Mail-Versand (src/app/api/contact/route.ts): Der scharfe E-Mail-Versand an hallo@emdev.io erfordert vor dem Produktivgang das Anbinden eines E-Mail-Dienstes (z. B. Resend oder Nodemailer).