walenso/3d-portfolio

Was macht 3d-portfolio?

Erstelle eine einseitige Portfolio-Website, die nur zu dieser Person gehören kann. Die Seite, aus der dieses Skill entstanden ist, wurde um die Plattensammlung eines DJs herum gebaut: Jedes Projekt ist ein Plattenteller, durch den man blättert, und die Platte dreht sich, wenn sie im Fokus ist. Beispiel: https://alessio-simoya.vercel.app

Kopiere dieses Konzept nicht. Folge dem Prozess und finde ihr oder seines.

1. Sammle zuerst die Eingaben

Frage danach, bevor du mit dem Design beginnst. Baue von Anfang an mit echten Inhalten.

• Projekte: Für jedes eine kurze Zusammenfassung der Fakten: was es ist, die eigene Rolle, Daten, was es erreicht hat, der Tech-Stack, ein Live-Link und eine Liste von Dingen, die nicht behauptet werden dürfen.
• Erfahrung: Unternehmen, Position, Daten, Ort und ein Ergebnis pro Job.
• Fähigkeiten: Gruppiert, mit Angabe, wo jede nachgewiesen wurde.
• Leben außerhalb der Arbeit: Hobbys, Teams, was sie kochen, wo sie waren. Hierher kommt das Konzept, also frage nach mehr, als sie anbieten.
• Assets: Logos, Produktscreenshots, Videos, Rive- oder Lottie-Dateien. Frage, wo die Projektordner liegen und durchsuche sie.
• Links: LinkedIn, GitHub und so weiter. Veröffentliche niemals ihre E-Mail-Adresse, es sei denn, sie bitten darum.

2. Finde das eine Konzept

Wähle das charakteristischste Element aus der Welt der Person und mache es zum Helden, als ein echtes 3D-Objekt, mit dem man interagieren kann. Ein DJ bekommt eine Kiste mit Platten. Ein Kletterer bekommt vielleicht eine Wand voller Griffe, ein Bäcker ein Tablett voller Brote. Jedes Projekt wird zu einem Teil dieses Objekts.

Setze dort die Kühnheit ein. Halte den Rest der Seite ruhig: flache Farbflächen, eine charaktervolle Display-Schrift, eine schlichte Textschrift, vier oder fünf benannte Farben.

3. Stack

• Vite, React und TypeScript im Strict-Modus
• three.js für 3D, direkt geschrieben (kein Scene-Framework nötig)
• Rive nur, wenn die Person bereits .riv-Dateien hat; lade dessen WASM lazy
• tRPC und Zod für die API, als Vercel-Funktion unter api/trpc/[trpc].ts
• Resend für E-Mail, Cloudflare Turnstile für Spam, Neon Postgres für Daten
• Selbst gehostete variable Schriftarten über @fontsource-variable/*

4. Wie das 3D zusammengesetzt wird

Verwende einen festen, vollbildfähigen WebGL-Canvas mit pointer-events: none und zeichne jede 3D-Ansicht in das Rechteck eines DOM-Platzhalters:

const r = el.getBoundingClientRect();
renderer.setViewport(r.left, innerHeight - r.bottom, r.width, r.height);
renderer.setScissor(r.left, innerHeight - r.bottom, r.width, r.height);
renderer.render(scene, camera);

Leere einmal pro Frame, schalte den Scissor-Test ein und überspringe jedes Element, das sich außerhalb des Bildschirms befindet. So erhält man viele 3D-Objekte auf der Seite für die Kosten eines einzigen Kontexts, und sie scrollen mit dem Layout.

Gib jedem kleinen Objekt ein „Rig“: eine Gruppe, eine Kameraposition, einen Look-At-Punkt und eine tick(t)-Funktion, die von einer gemeinsamen Uhr gesteuert wird. Baue Rigs lazy auf und zeige jeweils nur eines an. Zeichne Texturen auf einem 2D-Canvas (Logos, Beschriftungen, Muster), so dass keine Modelldateien geladen werden müssen.

Dinge, die schiefgelaufen sind und wie man sie vermeidet:

• Eine Boden-Schattenebene, die größer als das Element ist, erscheint als hartes Rechteck. Passe sie an die Größe der Ansicht an.
• Drehe eine Gruppe, drehe dann ein Kind, wenn du „um die eigene Achse drehen“ benötigst.
• Sprites und transparente Ebenen werden nach massiven Meshes gezeichnet; ein Leuchten unter einem Objekt sollte eine flache Ebene darunter sein, kein kamerablickendes Sprite.

5. Abschnitte, die funktioniert haben

1. Held: Name sehr groß gesetzt, ein Aufkleber, der durch die Rollen wechselt, ein Satz und das interaktive Objekt. Eine farbige Scheibe dahinter ändert sich mit dem fokussierten Element.
2. Arbeit: Jede Fallstudie öffnet sich auf einem Band in der Markenfarbe mit dem echten Logo, dann einer seitlichen Rolle von Bildern, Videos und Animationen, drei kurzen Highlights, ein paar großen Zahlen und dem Stack als Chips. Langer Text kommt hinter „Die ganze Geschichte lesen“.
3. Erfahrung: Eine Zeile pro Job mit jeweils einer großen Zahl.
4. Werdegang: Schulen oder Meilensteine, jeweils mit einem eigenen animierten Objekt.
5. Fähigkeiten: Zeilen mit bewegter Schrift, keine Tabelle.
6. Außerhalb der Arbeit: Ein animiertes Objekt pro Interesse.
7. Reisen: Orte als Kühlschrankmagnete an einer Stahltür, die gezogen werden können.
8. Hallo sagen: Das Kontaktformular.

Ein schwebender Pill-Kopfzeilen-Header markiert den aktuellen Abschnitt mit einem IntersectionObserver.

6. Hausregeln

• Nur Fakten. Verwende, was die Person geliefert hat. Wenn ein Abschnitt etwas braucht, das sie nicht angegeben hat, lasse ihn weg. Führe die „Nicht beanspruchen“-Liste jedes Projekts in der Inhaltsdatei als Kommentar.
• Keine Eitelkeitszahlen. Commits, Codezeilen, Seitenzahlen oder gelesene Modelle wirken unreif. Zeige das Produkt und was es erreicht hat.
• Weniger Text zeigen. Wenn ein Bildschirm hauptsächlich aus Absätzen besteht, mach daraus eine visuelle Darstellung.
• Respektiere die Arbeit anderer. Baue keine kostenpflichtige Vorlage aus ihrer Vorschau nach und kopiere nicht das Produktdesign einer Marke (z. B. einen benannten Spielball); zeichne ein Original im gleichen Geist. Verwende nur frei lizenzierte Bilder und gebe die Quellen auf der Seite an.
• Screenshots dürfen keine echten Kundennamen, Beträge oder Gesichter zeigen.
• Bewegung hat einen Aus-Schalter. Respektiere prefers-reduced-motion, füge einen „Bewegung pausieren“-Button hinzu und gebe einen flachen Fallback, wenn WebGL fehlt.
• Lege alle Inhalte in eine einzige typisierte Datei (src/content/portfolio.ts), damit die Person Wörter bearbeiten kann, ohne Komponenten anzufassen.

7. Das Kontaktformular

Eine tRPC-Prozedur, contact.send, mit Zod-Eingabe. In dieser Reihenfolge:

1. gibt es stillen Erfolg zurück, wenn das versteckte Honeypot-Feld ausgefüllt ist;
2. wendet es ein kleines Rate-Limiting pro Adresse an;
3. verifiziert es das Turnstile-Token mit Cloudflare und lehnt ab, wenn es fehlschlägt;
4. sendet es eine E-Mail an den Besitzer über Resend, mit dem Absender als reply_to;
5. speichert es jede Nachricht in einer messages-Tabelle;
6. nur wenn der Besucher ein standardmäßig nicht aktiviertes „Auf dem Laufenden halten“-Kästchen angekreuzt hat, speichert es ihn in einer subscribers-Tabelle (mit dem Einwilligungstext und der Zeit) und in einer Resend-Zielgruppe.

Füge niemals Personen ohne dieses Ankreuzen zu einer Mailingliste hinzu.

Umgebungsvariablen: RESEND_API_KEY, ENQUIRY_TO_EMAIL, ENQUIRY_FROM_EMAIL, RESEND_AUDIENCE_ID, DATABASE_URL, TURNSTILE_SECRET und der öffentliche Site-Key für den Browser.

Dinge, die schiefgelaufen sind:

• Der from-Wert kann bereits Name <Adresse> sein. Erneutes Einpacken führt zu einer Antwort 422 von Resend. Verwende ihn wie gegeben, wenn er < enthält.
• Vite macht nur Variablen verfügbar, die mit einem Präfix in envPrefix beginnen. Wenn der Site-Key unter einem anderen Namen ankommt, füge dieses Präfix hinzu.
• Ein Turnstile-Widget funktioniert nur für Hostnamen, die in Cloudflare dafür aufgelistet sind.
• In der Produktion, wenn kein Turnstile-Geheimnis vorhanden ist, verweigere das Senden. Verwende die von Cloudflare veröffentlichten Testschlüssel nur in der lokalen Entwicklung.
• Füge einen CONTACT_DRY_RUN=1-Schalter hinzu, der in der Produktion ignoriert wird, damit der gesamte Pfad getestet werden kann, ohne E-Mails zu senden.
• Um denselben Handler unter vite dev auszuführen, füge ein kleines Plugin hinzu, das die Funktion mit server.ssrLoadModule lädt und ihr eine Request übergibt.
• Baue E-Mail-HTML mit Tabellen und Inline-Stilen und escaped jedes Feld.

8. Überprüfe deine Arbeit während des Prozesses

Nach jeder Änderungsrunde:

• führe den Build aus;
• mache Playwright-Screenshots von jedem Abschnitt bei 1440 und 390 Pixeln Breite (starte Chromium mit --use-gl=swiftshader, damit WebGL headless rendert);
• bestätige, dass document.documentElement.scrollWidth - innerWidth 0 ist;
• schau dir die Screenshots selbst an, bevor du sagst, dass es fertig ist.

Sage klar, was nicht geprüft wurde: echte Handys, Safari, das Gefühl der Bewegung, echte E-Mail-Zustellung.

9. Ausliefern

• git init, mit .env* und .vercel ignoriert. Scanne bereitgestellte Dateien vor dem ersten Commit auf Schlüssel.
• vercel link, füge die Umgebungsvariablen hinzu, vercel --prod.
• Überprüfe, ob die Live-Seite ohne fehlgeschlagene Anfragen lädt und ob die API eine Anfrage ohne Turnstile-Token ablehnt.
• Bitte den Besitzer, eine echte Nachricht über das Live-Formular zu senden.

Starter-Prompt

Gib der Person dieses Formular zum Ausfüllen:

Erstelle mein 3D-Portfolio mit dem 3d-portfolio-Skill.

Name und einzeilige Beschreibung von mir:
Rollen, die im Heldenbereich durchlaufen werden sollen (4 bis 6):
Projekte (für jedes: Fakten, meine Rolle, Daten, Link, was nicht beansprucht werden soll):
Erfahrung (Unternehmen, Position, Daten, jeweils ein Ergebnis):
Fähigkeiten, gruppiert:
Schulen oder Meilensteine:
Interessen außerhalb der Arbeit (konkret):
Orte, an denen ich war:
Wo meine Logos, Screenshots und Animationen auf diesem Rechner liegen:
Zu zeigende Links (LinkedIn, GitHub und so weiter):
Dinge, die ich niemals auf der Seite haben möchte: