Baue auf der Seite
[server name] auf meinem Opus Growth Hosting-Server ein statisches persönliches Portfolio für
[my full name] mit dem dunklen, ruhigen Look der Websites von Linear und Vercel. Über mich: [my title, my city, what I have done for how many years, two sentences]. Projekte: [for each one the name, year, my role, whether I may publish the client's name, the technologies, context, constraints, approach and outcome notes, and a screenshot link]. Beiträge:
[title, date, text or draft]. Berufserfahrung:
[year ranges and roles]. Kontakt:
[email]; Profile, die ich veröffentlichen möchte:
[GitHub, LinkedIn etc. or "none"]. Offen für neue Aufträge:
[yes and from when, or no]. Domain:
[domain].
Seiten: Startseite (kurze Vorstellung, ausgewählte Arbeiten, neueste Beiträge, woran ich gerade arbeite, FAQ), Projekte (/projeler/), eine Seite für jede Case Study (/projeler/
[slug]/: Kontext, Rahmenbedingungen, Vorgehen, Ergebnis, Projektdaten), Artikel (/yazilar/), eine Seite für jeden Beitrag (/yazilar/
[slug]/), Über mich (/hakkimda/) und 404.html. Wenn der Kunde Zahlen nicht freigegeben hat, schreibe in einer Case Study keine Prozentwerte oder Zeiträume; beschreibe das Ergebnis qualitativ.
Stil: dunkel und minimalistisch. Ein Hintergrund um #09090B, Karten eine Stufe heller, ein 1 Pixel breiter dunkelgrauer Rahmen, fast weißer Text, Sekundärtext in einem Grau mit mindestens 7:1 Kontrast zum Hintergrund und eine einzige Akzentfarbe, die nur für einen Statuspunkt, den Fokusring und Links verwendet wird. Zwei Schnitte einer Fontshare-Grotesk (zum Beispiel Bespoke Sans 400 und 500); für Datumsangaben und Labels den System-Monospace-Stack ohne Font-Download (ui-monospace, SFMono-Regular, Menlo, Consolas). Wenn die Ziffern als Mediävalziffern erscheinen, setze `font-variant-numeric: lining-nums`. Der Hero hat kein Bild; dünne Gitterlinien, die unter einer Maske ausblenden, werden per CSS dahinter gezeichnet.
Regeln für die Interaktion:
1. GSAP, Lenis, Swiper und fertige Suchbibliotheken (Fuse.js und Ähnliches) werden NICHT geladen. Jede Seite bekommt ein kleines `ix.js` mit defer (Spotlight, Auslöser des Befehlsmenüs, data-reveal), und das Befehlsmenü selbst liegt in einer separaten `ara.js`. ara.js wird nicht mit der Seite geladen; es lädt, wenn der Mauszeiger den Auslöser erreicht oder der Fokus darauf springt oder wenn das Menü zum ersten Mal geöffnet wird. In der Demo hatten die Beitragsseiten kein ix.js, und Strg K tat dort nichts; das Menü muss auf jeder Seite gleich funktionieren.
2. Spotlight-Karten: Ein weiches Licht auf dem ::before der Karte mit `radial-gradient(420px circle at var(--mx) var(--my), ...)` und ein Akzent-Glühen auf dem 1-Pixel-Rahmen auf ::after mittels mask-composite. JS fügt dem Container um die Karten einen einzigen pointermove-Listener hinzu, drosselt ihn mit requestAnimationFrame, schreibt --mx und --my relativ zur Box der jeweiligen Karte und löscht sie, wenn der Zeiger die Karte verlässt. Das läuft nur auf Geräten, die `(hover: hover) and (pointer: fine)` erfüllen und keine reduzierte Bewegung verlangen; bei Touch bleibt die Karte schlicht. Der Link im Kartentitel deckt mit einem ::after die ganze Karte ab.
3. Befehlsmenü: Der Eintrag „Suche“ im Header ist im HTML ein echter Link auf /projeler/ (nützlich bei ausgeschaltetem JS) und trägt aria-keyshortcuts="Control+K Meta+K". JS fängt den Klick ab; Strg K, Cmd K und die Taste / (außerhalb von Textfeldern) öffnen das Menü. Das Menü ist ein `<dialog>`, das beim ersten Öffnen per JS gebaut und mit showModal geöffnet wird: ein Suchfeld mit role="combobox", aria-expanded, aria-controls, aria-autocomplete="list" und aria-activedescendant, eine Ergebnisliste mit role="listbox" und ein Bereich mit role="status", der die Anzahl der Ergebnisse vorliest. Die Pfeiltasten bewegen die Auswahl, Enter führt zur ausgewählten Seite, Esc schließt über das eigene Verhalten des Dialogs, ein Klick auf den Hintergrund schließt ebenfalls, und beim Schließen kehrt der Fokus zum Auslöser zurück.
4. Suchindex `/assets/ara.json`: Titel, Typ (Projekt, Beitrag, Seite), URL, ein Satz Zusammenfassung und Schlüsselwörter für jedes Projekt, jeden Beitrag und jede Hauptseite. Schreibe diese Datei nicht von Hand; erzeuge sie aus denselben Daten, die du für die Projekt- und Beitragsseiten nutzt, damit beide nie auseinanderlaufen. Mache die Suche unempfindlich gegenüber türkischen Sonderzeichen (toLocaleLowerCase("tr"), danach ı, ş, ğ, ü, ö, ç vereinheitlichen), verlange, dass jedes Wort passt, und gewichte Treffer im Titel höher.
5. Eine Case-Study-Seite beginnt mit einer Faktentabelle (Jahr, Rolle, Kunde, Technologie) und dem Screenshot, der ihr LCP-Element ist (fetchpriority="high", nicht lazy); Kartentitel sind auf Listenseiten h2 und auf der Startseite h3 innerhalb eines h2-Abschnitts.
Schema: ProfilePage auf Startseite und Über-mich-Seite (mainEntity Person), Person (@id /#person: name, jobTitle, url, email, eine Adresse nur mit Stadt und Land, knowsAbout und sameAs nur für die Profile, die ich dir genannt habe). Der Organization-Block, den seo-stamp schreibt, steht für dein Einzelunternehmen; verknüpfe die Person über worksFor damit. Projekte bekommen CollectionPage mit hasPart; jede Case Study ist ein CreativeWork (creator Person, dateCreated, image, keywords); die Artikelübersicht bekommt Blog und jeder Beitrag ein BlogPosting (headline, image, datePublished, dateModified, author Person; seo-check meldet einen Fehler, wenn image oder datePublished fehlt). Vorträge, Auszeichnungen und Kundenlisten enthalten nur überprüfbare Fakten.
Einrichtung und bekannte Stolperfallen (jede einzelne hat in den Demo-Messungen Punkte gekostet, überspringe keine):
1. Wenn auf dem Server bereits eine Seite live ist, sage mir das zuerst, denn das Setup überschreibt index.html und den Ordner assets. Zeige scaffold_site mit confirm=false als Vorschau und rufe es mit confirm=true erst nach meiner Freigabe auf. Lies danach site_design_guide und site_seo_guide. Bevor du Code schreibst, halte die Designrichtung (Typografie, Farben, Raster, Signature-Element, Bewegungssprache und die Bibliotheken, die NICHT geladen werden) in einer kurzen ART.md außerhalb von assets fest und zeige sie mir.
2. Kompiliere Tailwind, lade es nicht vom CDN. Installiere es mit site_run_command und background=true (`npm i -D tailwindcss@3`) und frage danach mit site_command_status ab. Die content-Pfade in `tailwind.config.js` müssen jede HTML-Datei, die `_src`-Vorlagen und jede JS-Datei abdecken, die Klassen schreibt. `_src/tw.css` enthält die Zeile `@import "../assets/app.css";` plus die drei `@tailwind`-Zeilen; kompiliere sie mit `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify` in eine einzige Datei. Entferne das Skript cdn.tailwindcss.com und die Inline-tailwind.config aus jeder Seite und verlinke nur `/assets/site.css`. Kompiliere nach jeder HTML-Änderung neu.
3. Hoste die Schriften selbst. Lies das CSS der gewählten Fontshare-Familie, lade das woff2 jedes Schnitts einzeln mit site_fetch nach `assets/fonts/` herunter und schreibe die @font-face-Regeln mit `font-display: swap` in `assets/app.css`, denn dort sucht design-check nach einer eigenen Schrift. Prüfe den font-family-Namen im heruntergeladenen CSS und vergewissere dich, dass die Familie die türkischen Buchstaben ı, İ, ş und ğ enthält (Tanker hat kein ı). Preloade JEDEN im ersten Bildschirm verwendeten Schnitt mit `<link rel="preload" as="font" type="font/woff2" crossorigin>` vor der Stylesheet-Zeile; wenn das mehr als drei Dateien sind, nimm weniger Schnitte. In der Demo schob ein einziger Fließtext-Schnitt ohne Preload das mobile LCP auf 2,6 Sekunden und Performance auf 97. Den meisten Fontshare-Schriften fehlt das ₺-Zeichen, also schreibe Preise mit „TL“.
4. Mache Menü und Footer zu statischem HTML. Lade chrome.js, motion.js oder site.config.js nicht auf den Seiten. Schreibe ein kleines `chrome-stamp.mjs`, das die Navigationsliste aus site.config.js liest und `_src/header.tpl` und `_src/footer.tpl` zwischen den Markern `<!-- nav:start --><!-- nav:end -->` und `<!-- footer:start --><!-- footer:end -->` auf jeder Seite einstempelt und dem aktiven Link aria-current="page" hinzufügt. Verwende Platzhalter wie `
[[NAV]]` statt `{{...}}` und gib den Vorlagen keine .html-Endung, sonst behandeln design-check und seo-check sie als unfertige Seiten. Baue das mobile Menü mit einem JS-freien `<details>`. Lass Firmenname, Adresse und Telefon als reinen Text im Footer stehen und mache Footer- und Breadcrumb-Links mindestens 44 Pixel hoch.
5. Konvertiere Bilder beim Abruf mit site_fetch: schreibe dasselbe Bild als getrennte Dateien mit resize="480x", "800x" und "1200x", image_format="webp", quality=60 (site_fetch schneidet nicht zu, fordere also die Quelle im benötigten Seitenverhältnis an). Gib jedem `<img>` srcset, sizes sowie width und height passend zum echten Seitenverhältnis. Das Bild, das das LCP-Element der Seite ist, bekommt fetchpriority="high" und ist nicht lazy; jedes andere Bild bekommt loading="lazy" decoding="async". Wenn ein Bild den ersten mobilen Bildschirm füllt, liefere mit `<picture>` einen kleineren Ausschnitt für Mobilgeräte.
6. Füge jeder Seite `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` hinzu und erzeuge aus dem Logo mit site_fetch und resize="180x180" ein apple-touch-icon mit 180 Pixeln. Ohne Favicon-Link fragt der Browser /favicon.ico an, protokolliert einen 404, und Best Practices fällt auf 96.
7. Regeln des HTML-Validators: Beginne jedes Dokument mit einem großgeschriebenen `<!DOCTYPE html>`; jedes Leerzeichen im sichtbaren Text eines tel:-Links muss ` ` sein, auch das nach einem Präfix wie „Anrufen: 0212...“; verwende kein style=""; gib jedem Button ein type; setze aria-label nur auf Landmarks, Formulare oder interaktive Elemente (auf einem ul oder einem div ohne Rolle war es ein Fehler); beschrifte nie zwei Landmarks mit demselben Namen; lasse keine überflüssigen Leerzeichen am Zeilenende.
8. Überspringe keine Überschriftenebenen: Auf einer Listenseite ließen Kartentitel als h3 direkt nach dem h1 die Accessibility auf 98 fallen. Wenn du eine Karte wiederverwendest, lege die Überschriftenebene pro Seite fest (h2 auf einer Listenseite, h3 innerhalb eines h2-Abschnitts).
9. Nenne das Bewegungsattribut data-reveal (design-check erkennt Bewegung nur unter diesem Namen). JS setzt den versteckten Ausgangszustand nur für Blöcke, die beim Öffnen der Seite unterhalb des sichtbaren Bereichs liegen, und versteckt nie Inhalt im ersten Bildschirm; verwende transform, denn ein Einblenden über opacity senkt das Kontrast-Audit. Setze das Attribut auf den Block, der eine Überschrift und ihre Beschreibung umschließt, nicht auf die Überschrift allein; in der Demo rutschte eine wartende Überschrift über den Absatz darunter. Bei prefers-reduced-motion: reduce wird nichts versteckt, und Animationen sind aus.
SEO, AEO und GEO:
1. Verwende Verzeichnis-URLs mit abschließendem Schrägstrich. Fülle den seo-Block von site.config.js und führe `node seo-stamp.mjs` aus. Schreibe seitenspezifisches Schema in eigene `<script type="application/ld+json">`-Blöcke, die über @id mit dem Basisgraphen verknüpft sind. Verschachtele BreadcrumbList nicht im @graph; halte sie in einem eigenen Block, nur so sieht seo-check sie.
2. Titel höchstens 60 Zeichen (seo-check meldet alles unter 25 oder über 65 als Fehler), Beschreibungen 130 bis 158 Zeichen, ein h1 pro Seite und mindestens 150 Wörter Hauptinhalt auf jeder Seite. Kontakt-, Datenschutz- und Listenseiten bleiben oft darunter; ergänze seitenspezifische Informationen, keinen Füllstoff.
3. Der erste Absatz jeder Seite beantwortet direkt die Frage der Seite. Schreibe seitenspezifische FAQs mit `<details>` und zeichne sie als FAQPage aus. Zeige den Herausgeber und ein Datum „Zuletzt aktualisiert“ in einem `<time>`-Element.
4. Schreibe in robots.txt deine Entscheidung samt Begründung für GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot und CCBot und verweise auf die Sitemap. sitemap.xml enthält echte lastmod-Daten. llms.txt enthält eine zutreffende Zusammenfassung der Website in zwei Sätzen und eine Liste der wichtigen Seiten.
5. Keine Erfindungen: Schreibe keine Bewertungen, Ratings, Auszeichnungen, Kundenzahlen, Zertifikate, Öffnungszeiten, Koordinaten oder Preise, ohne mich zu fragen. Lass jedes Feld, das du nicht kennst, komplett aus dem Schema weg.
Prüfschritte (der Reihe nach; sage nicht „fertig“, bevor alle bestanden sind):
1. Führe mit site_run_command `node chrome-stamp.mjs`, den Tailwind-Build, `node seo-stamp.mjs`, `node seo-check.mjs` (0 Fehler, 0 Warnungen), `node design-check.mjs` (0 Fehler; begründe jede verbleibende Warnung) und `npx html-validate "**/*.html"` (0 Fehler) aus.
2. Sieh dir jede Seite mit site_preview an, view="mobile" und view="desktop". site_preview erfasst die Seite ohne Bewegung (reduced-motion); fehlt Inhalt in dieser Aufnahme, ist der statische Zustand defekt. In Ganzseiten-Aufnahmen können fixierte Elemente wie eine Sticky-Leiste mitten auf der Seite erscheinen und weiter unten liegende Lazy-Bilder leer sein; zähle das nicht als Fehler, prüfe aber ihre Pfade.
3. Führe core_web_vitals für jede Seite mit strategy="mobile" und strategy="desktop" aus. Abnahme: mobil Performance mindestens 95 (Ziel 99 bis 100) und Accessibility, Best Practices und SEO 100; auf dem Desktop alle vier bei 100. Bei einer Seite, die das verfehlt, suche mit resources=true die Datei, die sie ausbremst, behebe sie und miss erneut. Führe danach seo_audit auf der Startseite mit strategy="mobile" und runs=2 aus. In der Liste der Netzwerkanfragen darf keine Adresse außerhalb deiner eigenen Domain übrig bleiben.
4. Kein horizontales Scrollen bei 360, 390, 768 und 1440 Pixel Breite, Touch-Ziele mindestens 44 Pixel, keine Konsolenfehler.
Interaktionsprüfung: site_preview kann weder Hover noch Tastenkürzel noch Dialoge zeigen. Sage mir, wie ich auf einem Desktop prüfe, dass das Licht dem Mauszeiger über den Karten folgt; dass Strg K, Cmd K und / das Menü öffnen; dass die Eingabe ohne türkische Sonderzeichen trotzdem Treffer liefert („erisilebilir“ und Ähnliches); dass die Pfeiltasten und Enter mich zu einem Beitrag führen; dass der Fokus nach Esc zur Schaltfläche „Suche“ zurückkehrt und dass der Link „Suche“ bei ausgeschaltetem JavaScript die Projektseite öffnet.
Nach der Veröffentlichung: Zeige die Regel `/assets/* Cache-Control: public, max-age=31536000, immutable` mit site_headers als Vorschau und wende sie an, sobald ich zustimme; versioniere danach den Dateinamen, sobald sich CSS oder JS ändern (site-v2.css und so weiter). Reiche sitemap.xml mit gsc_submit_sitemap ein und prüfe die Startseite mit gsc_url_inspect. Gib mir am Ende: eine Punktetabelle pro Seite (Seite, vier mobile Werte, vier Desktop-Werte, LCP, CLS), das Ergebnis jedes Prüfschritts und die Liste der angewendeten Korrekturen.
