# Nextjs Portfolio Template, das dir Kunden bringt

> Ein Nextjs Portfolio Template, das Kunden bringt: Case Studies im Sheet, Timeline, Leistungen mit Preisen, Formular und was du für die Jobsuche streichst.

- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 6. Nov. 2026
- Kategorie: [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build)
- Lesezeit: 9 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/nextjs-portfolio-template
- Englische Fassung: https://wingo-ui.com/blog/nextjs-portfolio-template

## Kurz gesagt

Ein Portfolio, das Aufträge bringt, beantwortet schnell drei Fragen: Was hast du für Kunden wie mich gemacht, was kostet es, dich zu buchen, und wie erreiche ich dich? Die Portfolio Page von Wingo UI ist eine Next.js-Vorlage mit Hero, Case Studies, die sich in einem Sheet öffnen (auf dem Smartphone als Bottom Sheet), einer Timeline für deine Erfahrung, Leistungen mit Preisen, Beiträgen und einem validierten Kontaktformular, alles über Props befüllt, und jeder Abschnitt nach den Arbeiten lässt sich abschalten. Für die Jobsuche streichst du die Leistungen, die Testimonials, bis du echte hast, und das Kontaktformular bleibt in jeder Version.

Wer nach einem Nextjs Portfolio Template oder einer Nextjs Portfolio Vorlage sucht, will meistens eine Website, die Arbeit bringt: einen Kunden, einen Vertrag, ein Vorstellungsgespräch. Was man dann findet, ist ein hübscher Hero, ein Raster mit jedem Nebenprojekt samt GitHub-Sternen und ganz unten ein mailto-Link. Das ist ein Lebenslauf mit Animationen, mehr nicht. Dieser Guide zeigt, was eine Portfolio-Seite braucht, damit aus einem Besucher eine Nachricht wird, wie die [Vorlage Portfolio Page](https://wingo-ui.com/templates/portfolio-page) von Wingo UI genau darauf aufgebaut ist, was du als Entwickler statt als Designer streichen solltest und wie das Ganze auf dem Smartphone wirkt.

## Was fehlt den beliebten Next.js Portfolio Templates?

Sie decken vor allem den Stack ab und lassen das Verkaufen weg. Die [GitHub-Topic-Seite nextjs-portfolio-template](https://github.com/topics/nextjs-portfolio-template) listete bei unserer Prüfung am 6. November 2026 25 öffentliche Repositories. Die Einträge mit den meisten Sternen beschreiben sich über ihren Stack (Next.js 16, Tailwind CSS, Framer Motion, Three.js) oder als persönliche Website, die andere wiederverwenden dürfen, nicht über die Abschnitte, die sie mitbringen. [Vercels Galerie für Portfolio-Vorlagen](https://vercel.com/templates/portfolio) (am selben Tag geprüft) führt Next.js-Starter wie das Portfolio Starter Kit, Magic Portfolio for Next.js und ein Portfolio mit Seitenaufrufzähler. Ihre Kurzbeschreibungen nennen Markdown, einen Blog, Projekte und eine Galerie; keine erwähnt Case Studies, Preise oder ein Kontaktformular.

Diese Starter halten, was sie versprechen. Willst du bis heute Abend eine kostenlose persönliche Website mit Markdown-Blog, würden wir das Portfolio Starter Kit nehmen. Die Lücken zeigen sich, sobald die Website eine Aufgabe hat:

- **Case Studies statt Thumbnails.** Eine Karte mit Titel und drei Tags sagt einem Kunden nichts. Das Problem, deine Rolle, dein Vorgehen und ein Ergebnis schon.
- **Ein Preisanker.** „Ab $6,500“ filtert unpassende Anfragen heraus und gibt einem ernsthaften Kunden einen Grund zu schreiben.
- **Ein Kontaktformular mit Validierung und Fehlerzustand.** Ein mailto-Link bringt Besuchern ohne eingerichtete Mail-App nichts, und du erfährst nie, dass sie es versucht haben.
- **Ein Smartphone-Layout, bei dem Besucher ihre Position auf der Seite behalten.** Eine eigene Route pro Case Study heißt: ein kompletter Seitenwechsel, und wer zwei Projekte vergleicht, muss jedes Mal zurück zum Raster.

## Welche Abschnitte braucht ein Portfolio, das Kunden gewinnt?

Sechs, in dieser Reihenfolge: Hero, ausgewählte Arbeiten, Erfahrung, Leistungen, Testimonials und Beiträge sowie Kontakt. Die Portfolio Page ist ein Tailwind Portfolio Template, das standardmäßig alle sechs rendert. Daten-Props füllen sie, und `show*`-Props schalten die optionalen ab:

| Abschnitt | Was er leistet | Prop |
|---|---|---|
| Hero | Name, Rolle, Pitch in einem Satz, Verfügbarkeits-Pill, „Start a project“ und „See my work“, Kennzahlen | `owner`, `labels.heroTitle`, `facts`, `available` |
| Arbeiten | Case-Study-Karten als Raster oder Liste; jede öffnet ein Sheet | `projects`, `layout` |
| Erfahrung | Stationen auf einer vertikalen Timeline, die aktuelle mit „Now“ markiert | `experience`, `showExperience` |
| Leistungen | Angebote mit Startpreisen; eines lässt sich mit dem Badge „Most booked“ hervorheben | `services`, `showServices`, `currency` |
| Testimonials und Beiträge | Kundenzitate und kurze Essays | `testimonials`, `posts`, `showTestimonials`, `showWriting` |
| Kontakt | E-Mail mit Kopier-Button und ein Formular, das Name, E-Mail und Nachricht prüft | `onContact`, `showContact` |

Der Erfahrungsabschnitt ist unsere [Timeline Section](https://wingo-ui.com/components/timeline-section) mit Punktmarkern und Jahreszahlen, die auf dem Desktop beim Scrollen neben jeder Karte stehen bleiben, und die Zitate kommen aus der [Testimonials Section](https://wingo-ui.com/components/testimonials-section). Beide nehmen Overrides über `experienceProps` und `testimonialsProps` an, eine horizontale Timeline oder ein Karussell mit Zitaten ist also nur eine Prop entfernt.

> Live-Demo (Portfolio Page): Scroll durch die Seite und tipp dann auf eine Projektkarte: Die Case Study öffnet sich in einem Sheet. „Book this“ bei einer Leistung springt zum Formular, mit dieser Leistung schon ausgewählt. Probier sie unter [Portfolio Page](https://wingo-ui.com/templates/portfolio-page) aus und installier sie mit `npx wingo-ui@latest add portfolio-page`.

## Warum Case Studies in einem Sheet statt auf einer neuen Seite öffnen?

Weil Besucher deine Projekte vergleichen, und mit einem Sheet geht das, ohne dass sie das Raster verlieren. Jede Karte ist ein einziger Button. Sie öffnet die [Komponente Sheet](https://wingo-ui.com/components/sheet) von rechts in der Größe `xl`, mit Kunde, Jahr, Rolle und Zeitrahmen, dem Problem, dem Vorgehen in nummerierten Schritten, Ergebniszahlen und einem Bildstreifen zum Wischen. Die Pfeil-Buttons im Footer springen zum vorherigen oder nächsten Projekt, Escape schließt das Sheet, und der Fokus kehrt zur Karte zurück, die es geöffnet hat. „Start a similar project“ schließt das Sheet und setzt den Cursor ins Kontaktformular.

Das Sheet wird über `project` und `onProjectChange` gesteuert oder mit `defaultProject` vorbelegt. So kannst du die offene Case Study in der URL spiegeln und einen Link darauf teilen. Lies den Query-Parameter in der Server-Page aus und schreib Änderungen mit der nativen History API zurück, die Next.js mit seinem Router synchron hält:

```tsx
// app/portfolio.tsx
"use client";

import { PortfolioPage } from "@/components/templates/portfolio-page";

export function Portfolio({ initialProject }: { initialProject: string }) {
  return (
    <PortfolioPage
      defaultProject={initialProject}
      onProjectChange={(slug) => {
        const url = slug ? `?work=${encodeURIComponent(slug)}` : window.location.pathname;
        window.history.replaceState(null, "", url);
      }}
    />
  );
}
```

```tsx
// app/page.tsx
import { Portfolio } from "./portfolio";

export default async function Page({ searchParams }: { searchParams: Promise<{ work?: string }> }) {
  const { work } = await searchParams;
  return <Portfolio initialProject={work ?? ""} />;
}
```

Weil die Route `searchParams` liest, wird sie bei jedem Request gerendert, und das ganze Portfolio bleibt im Server-HTML. Würdest du stattdessen im Client `useSearchParams` aufrufen, würde auf einer vorgerenderten Route alles bis zur nächsten `Suspense`-Grenze im Client gerendert, und das ist hier die ganze Seite. Soll jede Case Study einzeln indexiert werden, behalte für Suchmaschinen zusätzlich eine echte Seite `/work/<slug>`; das Sheet ist für Menschen, die schon auf der Seite sind.

## Was sollte ein Entwickler anders als ein Designer streichen?

Weniger Bilder, mehr Belege, dass das Ding läuft. Die Beispieldaten gehören einer Produktdesignerin, Emma Carter in New York. Um daraus ein Developer Portfolio Template zu machen, tauschst du die Inhalte und behältst das Layout:

| Abschnitt | Freelance-Entwickler | Produktdesigner | Auf Jobsuche |
|---|---|---|---|
| Arbeiten | `cover: "flow"` oder `"dashboard"`, ein `href` aufs Live-Produkt, ein kurzes Vorgehen | Fotos in `gallery`, ein längeres Vorgehen | Zwei oder drei Projekte, deine Rolle klar benannt |
| Erfahrung | Behalten, kurz | Behalten | Behalten, das ist der Lebenslauf |
| Leistungen | Behalten, mit Preisen | Behalten, mit Preisen | `showServices={false}` |
| Testimonials | Nur echte Zitate, die du verwenden darfst | Genauso | Aus, bis du welche hast |
| Beiträge | Behalten, wenn du schreibst | Behalten, wenn du schreibst | Behalten, sie zeigen, wie du denkst |
| Kontakt | Behalten | Behalten | Behalten |

Zwei Regeln gelten für alle. Füll den Testimonials-Abschnitt nicht mit Platzhalterzitaten, denn wer ein falsches Zitat entdeckt, glaubt auch den echten nicht mehr; setz `showTestimonials={false}`, bis du zwei oder drei hast. Und ein leeres `facts`-Array blendet die Kennzahlen im Hero aus. Das ist besser als „5+ Jahre“ ohne irgendeinen Beleg.

## Wie richte ich es als Freelance-Entwickler ein?

Installier die Vorlage. Sie funktioniert wie jedes shadcn Portfolio Template: Die CLI kopiert den Quellcode in dein Projekt, und die Dateien gehören dir. Mit dabei sind das Sheet, die Timeline, die Abschnitte für Testimonials und Blog, die Formularfelder und die gemeinsamen Hooks:

```bash
npx wingo-ui@latest add portfolio-page
```

Dann ersetzt du die Beispielinhalte. Die Typen liegen in der Datendatei neben der Vorlage:

```tsx
// app/page.tsx
"use client";

import Link from "next/link";
import { PortfolioPage } from "@/components/templates/portfolio-page";
import type {
  PortfolioExperience,
  PortfolioProject,
  PortfolioService,
} from "@/components/templates/portfolio-page-data";
import { sendMessage } from "./actions";

// ersetz Kunde, Texte und Zahlen durch deine eigene, echte Arbeit
const projects: PortfolioProject[] = [
  {
    slug: "globex-checkout",
    title: "Ein Checkout, neu gebaut auf einer Seite",
    client: "Globex",
    summary: "Einen Checkout mit fünf Schritten auf eine Next.js-Seite mit Server Actions und einem gemeinsamen Formular-Kit umgestellt.",
    year: "2026",
    role: "Lead Frontend Engineer",
    duration: "10 Wochen",
    tags: ["Next.js", "Performance", "Formulare"],
    color: "#2563EB",
    cover: "flow",
    problem: "Kunden sind zwischen Versand und Zahlung abgesprungen, und jeder Schritt war ein eigener Seitenaufruf.",
    process: [
      { title: "Den Funnel gemessen", description: "Events in jeden Schritt eingebaut, um zu sehen, wo Leute abspringen." },
      { title: "Die Schritte zusammengelegt", description: "Eine Seite, ein Formular, Validierung auf dem Server und beim Verlassen des Felds." },
      { title: "Hinter einem Flag ausgeliefert", description: "Beide Checkouts zwei Wochen lang parallel betrieben." },
    ],
    outcome: "Der einseitige Checkout hat den alten Ablauf für alle Kunden ersetzt.",
    metrics: [{ value: "1 Seite", label: "statt fünf" }],
    href: "https://example.com",
  },
];

const experience: PortfolioExperience[] = [
  { company: "Selbstständig", role: "Frontend-Entwickler", start: "2023", description: "Next.js-Projekte und Audits für Startups." },
  { company: "Globex", role: "Senior Engineer", start: "2019", end: "2023", location: "Austin", description: "Leitung des Web-Checkout-Teams." },
];

const services: PortfolioService[] = [
  { id: "audit", title: "Performance-Audit", description: "Ein schriftlicher Bericht mit den zehn Fixes, die am meisten bringen.", price: 2500, duration: "1 Woche", features: ["Review der Core Web Vitals", "Bundle-Analyse", "Ein Call, in dem wir ihn durchgehen"] },
  { id: "build", title: "Feature-Entwicklung", description: "Ein Feature von der Spezifikation bis in Produktion.", price: 9000, duration: "4 bis 6 Wochen", features: ["Wöchentliche Demos", "Tests und Doku", "Zwei Wochen Support"], featured: true },
  { id: "partner", title: "Frontend-Partner", description: "Ein paar Tage im Monat an deiner Codebase.", price: 6000, unit: "/ Monat", features: ["Code Review", "Architektur-Calls", "Pairing mit deinem Team"] },
];

export default function Home() {
  return (
    <PortfolioPage
      linkComponent={Link}
      owner={{ name: "Liam Brooks", role: "Frontend-Entwickler", location: "Austin", email: "liam@example.com", socials: [{ label: "GitHub", href: "https://github.com" }] }}
      labels={{
        heroTitle: "Ich baue schnelle, barrierefreie Next.js-Apps.",
        heroDescription: "Frontend-Entwickler in Austin. Ich helfe kleinen Teams, Checkouts, Dashboards und Design-Systeme auszuliefern.",
        experienceTitle: "Sieben Jahre UI in Produktion",
      }}
      facts={[]}
      projects={projects}
      experience={experience}
      services={services}
      layout="list"
      showTestimonials={false}
      showWriting={false}
      onContact={sendMessage}
    />
  );
}
```

`layout="list"` gibt jedem Projekt eine breite Karte mit dem Cover neben dem Text. Das passt zu einem Entwickler mit weniger, dafür tieferen Projekten. Weil diese Seite eine Client-Komponente ist, kann `export const metadata` nicht in ihr stehen: Setz Titel und Beschreibung in `app/layout.tsx`, oder verschieb das Markup wie im URL-Beispiel oben in eine eigene Client-Datei und lass `page.tsx` auf dem Server. Die Leistungen werden außerdem zu den Optionen der Gruppe „What do you need?“ im Formular. Wer beim Audit auf „Book this“ tippt, landet also im Formular, und das Audit ist schon ausgewählt.

## Wie verbinde ich das Kontaktformular?

Gib `onContact` eine Funktion, die ein Promise zurückgibt. Solange sie läuft, dreht sich ein Spinner im Button; wird das Promise abgelehnt, bleibt alles erhalten, was die Person eingegeben hat, und über „Send message“ erscheint der Fehler. Ohne `onContact` wartet die Seite 900 ms und bedankt sich, ohne etwas zu senden. Für eine Demo ist das in Ordnung, in Produktion ist es ein verlorener Lead. Eine Server Action reicht dafür:

```ts
// app/actions.ts
"use server";

import type { PortfolioContactValues } from "@/components/templates/portfolio-page";

export async function sendMessage(values: PortfolioContactValues) {
  // das Formular prüft das schon im Client; prüf es auf dem Server noch einmal
  if (!values.email.includes("@") || values.message.trim().length < 20) {
    throw new Error("Invalid message");
  }
  // schick { name, email, projectType, message } hier über deinen Mail-Anbieter
}
```

Im Client gelten dieselben Prüfungen: ein Name, eine gültige E-Mail und mindestens 20 Zeichen zum Projekt, und der Fokus springt zum ersten Problem. Brauchst du stattdessen eine vollständige Kontaktseite mit Bürozeiten, Kanälen und Karte, ist die [Vorlage Contact Page](https://wingo-ui.com/templates/contact-page) kostenlos.

## Wie wirkt das Portfolio auf dem Smartphone?

Die Seite ist Mobile first gebaut. Unter 768px fallen das Raster und das Listen-Layout auf eine Spalte zusammen, und das Sheet mit der Case Study kommt von unten (`mobileSide="bottom"` am Sheet), mit einem Griff zum Herunterwischen. Die Timeline zieht die Jahreszahlen in die Karten, und der Bildstreifen in einer Case Study scrollt per Wischen seitwärts. Sobald der Hero aus dem Bild scrollt, gleitet von unten eine Leiste mit „Hire me“ herein, per `env(safe-area-inset-bottom)` mit Abstand über dem Home-Indikator des iPhones. Im Kontaktabschnitt und bei offener Case Study verschwindet sie wieder, sie verdeckt also nie das Formular oder das Sheet. Abschalten kannst du sie mit `stickyBar={false}`.

> Live-Demo (Portfolio Page): Die Seite startet mit offener Northwind-Case-Study. In diesem schmalen Rahmen ist sie ein Bottom Sheet: Wisch es nach unten zum Schließen oder blättere mit den Pfeilen durch die Projekte. Probier sie unter [Portfolio Page](https://wingo-ui.com/templates/portfolio-page) aus und installier sie mit `npx wingo-ui@latest add portfolio-page`.

Die Seite respektiert auch reduzierte Bewegung: Die Einblendung des Heros, das Gleiten zum Kontaktabschnitt und die Übergänge des Sheets erfolgen sofort, und der Hero animiert nie während der Hydration. Das Server-HTML ist also schon das endgültige Layout.

## Gibt es eine kostenlose Version, und was kostet Pro?

Portfolio Page, Timeline Section und Testimonials Section sind Pro-Items; Sheet und Contact Page gehören zu den 75 kostenlosen Items im Katalog mit 369 Items, Stand 6. November 2026. Pro kostet $8 im Monat, $80 im Jahr oder einmalig $150 für lebenslangen Zugang, siehe [Preise](https://wingo-ui.com/de/pricing). Wenn ein kostenloses Nextjs Portfolio Template von GitHub oder Vercel tut, was du brauchst, nimm es. Willst du Case Studies, Preise und Formular fertig gebaut, mit durchgestaltetem Light und Dark Mode, installier die Vorlage und verbring den Abend lieber mit deinen Inhalten.

Weitere komplette Seiten, die genauso gebaut sind, findest du unter [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build), oder du startest mit unserem [Guide zum SaaS Website Template](https://wingo-ui.com/de/blog/saas-website-template). Er behandelt die Marketing-Website, die ein Produkt rund um eine Seite wie diese braucht. Verkauft ein Team die Arbeit statt einer einzelnen Person, deckt unser [Guide zum Agentur Website Template](https://wingo-ui.com/de/blog/nextjs-agency-template) diese Variante ab, mit Paketen und Preisen und einem Anfrageformular, das nach dem Budget fragt.

## Komponenten in diesem Artikel

- [Portfolio Page](https://wingo-ui.com/templates/portfolio-page) (Pro): A React portfolio template for designers and developers: hero, case studies in a sheet, experience, priced services, writing and contact. Installation: `npx wingo-ui@latest add portfolio-page`
- [Timeline Section](https://wingo-ui.com/components/timeline-section) (Pro): A marketing section that tells the company story as milestones on a vertical rail, a zigzag around a center line or a horizontal scroller. Installation: `npx wingo-ui@latest add timeline-section`
- [Testimonials Section](https://wingo-ui.com/components/testimonials-section) (Pro): Customer quotes with people, ratings and results: a grid, featured quote, marquee, carousel, wall of love or one large quote. Installation: `npx wingo-ui@latest add testimonials-section`
- [Sheet](https://wingo-ui.com/components/sheet) (Free): A React sheet that slides in from any edge on a spring for filters, a cart, an inspector or phone navigation, swipeable to close on touch. Installation: `npx wingo-ui@latest add sheet`
- [Contact Page](https://wingo-ui.com/templates/contact-page) (Free): A React contact page template: a validated form, copyable channels with live office hours, offices on a drawn map, a short FAQ and logos. Installation: `npx wingo-ui@latest add contact-page`

## Häufige Fragen

### Was gehört in ein Entwickler-Portfolio?

Drei bis fünf Case Studies mit Problem, deiner Rolle, dem Vorgehen und einem Ergebnis, das du belegen kannst, dazu eine kurze Liste deiner Stationen, ein Weg, dich zu buchen, und ein Kontaktformular. Eine Liste aller Repositories, die du je gepusht hast, ist bloß ein aufgeblähter Lebenslauf, und die meisten Besucher lesen sie nicht.

### Gibt es ein kostenloses Next.js Portfolio Template?

Ja. Die GitHub-Topic-Seite nextjs-portfolio-template listete am 6. November 2026 25 öffentliche Repositories, und in Vercels Vorlagengalerie gibt es das kostenlose Portfolio Starter Kit. Die Portfolio Page von Wingo UI gehört zu Pro; Sheet und Contact Page sind kostenlos.

### Sollte ein Portfolio Preise zeigen?

Für Freelance-Arbeit ja: Startpreise sortieren unpassende Anfragen schon vor dem ersten Call aus, und das Kontaktformular abzuschicken fällt leichter. Suchst du einen Job, blende den Abschnitt Leistungen aus, denn eine Preisliste wirkt auf Hiring Manager wie eine Verkaufsseite.

### Wie sollten Case Studies auf dem Smartphone funktionieren?

Öffne sie in einem Bottom Sheet, das sich wegwischen lässt, damit Besucher ihre Position auf der Seite behalten. Die Portfolio Page nutzt auf dem Desktop ein Sheet von rechts und unter 768px ein Bottom Sheet, mit Buttons zum vorherigen und nächsten Projekt.

### Ist das ein shadcn Portfolio Template?

Es wird wie bei shadcn installiert: npx wingo-ui@latest add portfolio-page kopiert den Quellcode in deinen Komponentenordner, gebaut auf Radix, Tailwind CSS v4 und motion. Die Dateien gehören dir, du bearbeitest sie selbst, und die CLI kann spätere Updates in deine Änderungen mergen.

---

Quelle: https://wingo-ui.com/de/blog/nextjs-portfolio-template