yousefnaim/yousefnaim-protofolio

Neo-brutalistisches Portfolio-Kit

Ein vollständiges, getestetes Portfolio-Template, das von einer Produktionsseite extrahiert wurde. Alles befindet sich in assets/ — kopiere es in ein neues Vite + React-Projekt, ersetze die Platzhalterdaten durch die des Eigentümers und veröffentliche es. Das Kit wurde getestet: vite build von Grund auf ausgeführt und ohne Konsolenfehler gerendert.

Was du bekommst

• Designsystem — flache, gesättigte Farben, 3px Ränder, solide Offset-Schatten, geneigte Kacheln (assets/src/brutal/brutal.css, unter .nb begrenzt).
• Abschnitte — Ladebildschirm · feste Navigation (Scroll-Spy, Theme + Sprach- + Sound-Umschalter, mobiles Menü) · Heldensektion mit Hover-Effekt pro Buchstabe · Über-mich · Arbeitsraster mit einem Vollbild- Case-Study-Overlay (Vorher/Nächster, Tastaturnavigation, Fokus-Wiederherstellung) · Technologie-Stack · Erfahrungsakkordeon · Kontaktformular · Footer mit einer Live-Uhr.
• Zweisprachigkeit + RTL — Englisch/Arabisch mit logischen CSS-Eigenschaften; Hell/Dunkel ohne Flackern.
• Sound — Generativer 124 BPM Synthwave-Loop und Hover-/Klick-Effekte (jeder Buchstabe im Heldentitel spielt eine pentatonische Note). Keine Audiodateien, keine Lizenzierung.
• Assistent — Schwebender Chat, unterstützt durch api/chat.js: RAG über die eigenen Daten des Besitzers (Arabisch-kompatibles BM25 + Gemini Embeddings), fundierte Antworten, Modell-Fallback, Same-Origin + Ratenbegrenzung. Der API-Schlüssel gelangt nie in den Browser.
• Deploy-Konfiguration — vercel.json (SPA-Rewrites), .vercelignore.

Schnellstart (neues Projekt)

1. npm create vite@latest my-portfolio -- --template react und installiere die Abhängigkeiten aus assets/package.deps.json (i18next react-i18next lenis framer-motion lucide-react @emailjs/browser @google/genai).
2. Kopiere den Inhalt von assets/ in das Projekt-Root-Verzeichnis (führe src/ zusammen, ersetze index.html und vite.config.js, füge api/, vercel.json, .vercelignore hinzu). Lösche die Standard-Importe von src/App.css/index.css — das Kit bringt sein eigenes CSS über brutal.css mit.
3. Fülle die Daten des Eigentümers ein (siehe Was personalisiert werden muss).
4. Füge das Porträt unter src/Imgs/portrait.jpg und Projekt-Screenshots unter public/projects/ hinzu (WebP, max. 1280px breit).
5. npm run dev → überprüfe Hell/Dunkel, EN/AR, 375px und 1440px. npx vite build muss fehlerfrei durchlaufen.
6. Deploy: siehe references/deploy-and-secrets.md.

Was personalisiert werden muss (die einzigen Dateien mit Inhalt)

Datei	Was du einfügen sollst
src/data/siteFacts.js	Name (EN/AR), Aufteilung des Heldentitels, Navigations-Initialen, Standort, Zeitzone, Kontaktlinks, EmailJS-öffentliche IDs, Technologie-Stack-Spalten, Werkzeuge
src/data/projectsMeta.js	Projekte: Titel, Tags, Live-URL (oder null), order, i18nIndex
src/data/projectImages.js	Screenshots pro Projekt; erstes Bild ist das Kartencover
src/i18n/locales/{en,ar}.json	Sämtliche Texte — Helden-Statement, Über-mich-Text/Statistiken, Highlights, Erfahrung, Untertitel/Beschreibung/Bildschirmbezeichnungen pro Projekt, Projekt-„Arten", Kontakttext, Assistenten-Prompts
index.html	<title>, Beschreibung, Favicon

Regeln beim Ausfüllen: Schreibe nur Fakten, die der Eigentümer bestätigen kann; erfinde niemals Kunden, Zahlen, Daten oder Links; behalte Technologienamen in beiden Sprachen auf Englisch; projects.items[i] in den Lokalisierungsdateien muss mit i18nIndex übereinstimmen.

Designsprache (Zusammenfassung — genaue Werte in references/design-system-spec.md)

• Nur flache Farbe. Keine Verläufe, Leuchteffekte, Weichzeichner, Glas-Effekte oder violette „KI"-Optik. Tiefe = Rand + harter Schatten.
• Ränder 3px solid var(--nb-line) · Schatten solide Offsets (5px/8px 8px 0, 12–14px bei Hover) · Neigung -2°…2°, bei Hover ausrichten.
• Schriftarten: Bricolage Grotesque 800 in Großbuchstaben für Überschriften, Space Grotesk für Fließtext, JetBrains Mono in Großbuchstaben für Beschriftungen. Arabisch: Cairo 700–900, keine Laufweite, keine Großbuchstaben.
• Kontrastregel: Text auf einer gesättigten Fläche ist immer #111 mit #111 Rändern in beiden Themes; nur neutrale Oberflächen wechseln mit dem Theme.
• Abschnitts-Rhythmus: Helden-Gelb → Über-mich-Papier → Arbeiten-Blau → Stack-Papier → Erfahrung-Lila → Kontakt-Pink → Footer-Schwarz. Umfärben durch Ändern der --nb-* Tokens; den Rhythmus beibehalten.

Technische Regeln (beim Bearbeiten beachten)

• Enthüllungsstatus in einem Datenattribut (data-reveal → data-in), niemals in einer Klasse — React-Neu-Renderings überschreiben Klassen.
• Case-Overlay benötigt data-lenis-prevent, sonst blockiert Lenis das Scrollen darin. Gleiches gilt für jedes scrollbare Overlay (Assistenten-Chat, mobiles Menü).
• Logisches CSS verwenden (inline-start/end, margin-inline), Pfeile in RTL umdrehen, Zahlenzähler in dir="ltr" einschließen, niemals arabischen Text mit Buchstabenabstand versehen.
• Niemals localhost im Produktionscode aufrufen — Browser fragen Besucher um Erlaubnis für das lokale Netzwerk. Eine API nur aufrufen, wenn die entsprechende Umgebungsvariable gesetzt ist.
• Performance: Lazy-Load von Abschnitten unterhalb der Sichtbarkeitsgrenze; WebP-Bilder mit loading="lazy"; nur transform/opacity animieren; prefers-reduced-motion respektieren; keine schweren 3D-/UI-Bibliotheken im öffentlichen Pfad.
• Geheimnisse: API-Schlüssel leben nur in Server-Umgebungsvariablen (GEMINI_API_KEY). Niemals ein Geheimnis mit VITE_ präfixieren (es wird in den Browser gebündelt). Öffentliche EmailJS-IDs sind im Client-Code in Ordnung.
• Barrierefreiheit: Sichtbarer Fokusring, Skip-Link, aria-pressed auf Umschaltern, role="dialog" + Fokus-Wiederherstellung bei Overlays, Unterstützung für reduzierte Bewegung.

Überprüfen, bevor du „erledigt" sagst

1. npx vite build läuft fehlerfrei durch.
2. Hell + Dunkel, EN + AR (RTL), 375px und 1440px; kein horizontaler Überlauf.
3. Öffne eine Fallstudie → Vorher/Nächster/Esc, darin mit dem Mausrad scrollen.
4. Bewege die Maus über den Heldentitel und die Steuerelemente (nach einem Klick), um die Sounds zu bestätigen; die Umschalter bleiben erhalten.
5. Wenn der Assistent deployed ist: stelle eine Kontaktfrage, eine Frage, die alle Projekte auflistet, und etwas, das nicht in den Daten ist (er muss sagen, dass er es nicht weiß).
6. Der Vorschaubereich kann ausgeblendet sein (Animationen pausiert) — bestätige die Bewegung mit einem zweiten Screenshot oder einem echten Browser.

Designsystem-Artefakte

• DESIGN-SYSTEM.md — Übersicht + Tabelle mit Palette/Regeln und Links.
• design-system/tokens.css und tokens.json — die Tokens zur Verwendung außerhalb des React-Kits.
• design-system/styleguide.html — lebendiger Styleguide (im Browser öffnen): Palette mit Kontrast, Schriftgrößen, Schatten-/Neigungsskalen, jede Komponente, Bewegung, Do's/Don'ts.

Referenzen (bei Bedarf lesen)

• references/design-system-spec.md — das exakte Designsystem: Prinzipien, jede Farbe und wohin sie gehört, Kontrastzahlen, Schriftgrößenskala, Abstände, Schatten-/Rand-/Neigungsskalen, Bewegungs-Tokens, Z-Index, Breakpoints, Komponenten-Anatomie und -Zustände.
• references/design-system.md — Klassenkatalog, Abschnitts-Rezepte, wie man umfärbt oder einen Abschnitt hinzufügt.
• references/interaction-and-sound.md — Hover-/Klick-Verhalten, Enthüllungssystem, Musik- + SFX-Architektur und -Tuning.
• references/i18n-and-rtl.md — Lokalisierungsstruktur, Schlüsselzuordnung, arabische Typografie, RTL-Checkliste.
• references/assistant-rag.md — wie der Chat-Endpunkt funktioniert, Wissensblöcke, Abruf und Prompt optimieren.
• references/deploy-and-secrets.md — GitHub + Vercel-Schritte, Umgebungsvariablen, Schlüsselrotation, Fehlerbehebung.