Personal Brand · Film

Die Arbeit
spricht zuerst.

Portfolio-Website für einen österreichischen Filmmaker: Showreel gleich im Einstieg, vier Hochformat-Arbeiten zum Durchwischen und ein direkter Weg zur Projektanfrage.

Kategorie: Portfolio-Website, Film & Content
Rolle: Gestaltung
Technik: React, vinext (Next.js-API auf Vite)
Jahr: 2026

Live-Website ansehen Screens ansehen

Startseite von J4K-IMPACT mit dunklem Showreel-Hero, der Headline Visuals that create impact und Button Selected Work — Startseite mit Showreel (Desktop). Screenshot der Live-Website.

Ausgangslage

Eine Marke, die in Bewegung ist

Ein Filmmaker verkauft Bilder. Die Website soll deshalb zuerst Bewegtbild zeigen und erst danach erklären.

Video zuerst

Showreel im Einstieg, dazu vier Arbeiten im Hochformat mit Vorschau per Button.

Drei klare Angebote

Social Media im Monat, Event- und Spieltagsfilm sowie Imagefilm und Reels.

Direkter Weg zur Anfrage

„Projekt starten“ im Header, ein schwebender Button und ein Formular am Ende.

Screens

Desktop und Smartphone

Die Arbeiten stehen im Hochformat, so wie sie später auch auf Social Media laufen. Auf dem Smartphone werden sie zur wischbaren Reihe.

j4k-impact.at/#work

Abschnitt Selected Work mit vier Arbeiten im Hochformat: JKU Gameday, Pizza Slice und Sounds, Court in Motion und Year One

Abschnitt Selected Work auf dem Smartphone mit wischbaren Hochformat-Arbeiten

Details

Vom Look bis zur Anfrage

Capabilities

Drei Felder, drei große Panels

Brand & Social, Events und Sport bekommen je ein eigenes Panel mit Foto, Leitsatz und Stichworten. Die kräftige Farbfläche setzt den Abschnitt klar vom Rest ab. Der Screenshot zeigt das erste Panel.

j4k-impact.at/#services

Angebote

Formate statt Preislisten

Drei nummerierte Karten beschreiben, was geliefert wird: laufende Videos für Social Media, ein Event- oder Spieltagsfilm, Imagefilm und Reels. Jede Karte führt zum Formular.

j4k-impact.at/#offers

Abschnitt Angebote mit drei nummerierten Karten: Social Media jeden Monat, Event- und Spieltagsfilm sowie Imagefilm und Reels

Kontakt

Anfrage mit wenigen Eckdaten

Das Formular fragt Name, E-Mail, Projektart, gewünschtes Angebot und eine kurze Beschreibung ab. Zeitraum und Organisation sind optional.

j4k-impact.at/#contact

Kontaktbereich mit der Headline Got a project und einem dunklen Anfrageformular auf orangem Hintergrund

Mobil

Menü und Panels auf dem Handy

Das Menü öffnet als Vollbild mit nummerierten Einträgen, die Panels stapeln sich einspaltig.

Startseite von J4K-IMPACT auf dem Smartphone mit Headline und Buttons — Einstieg

Geöffnetes Vollbild-Menü mit den Einträgen Work, Services, About und Kontakt — Menü

Abschnitt Capabilities auf dem Smartphone mit orangem Hintergrund — Capabilities

Technische Umsetzung

Was im Quelltext steht

Nachprüfbar an der Live-Website.

React mit vinext

Server-Komponenten auf vinext, einer Next.js-kompatiblen Umgebung auf Vite. Ausgeliefert über Cloudflare.

Video mit Poster

Das Showreel hat ein Poster-Bild und getrennte Dateien für Desktop und Smartphone. Geladen wird erst bei Bedarf (preload „none“).

Bilder in Varianten

Fotos liegen als WebP in zwei Größen vor, Projektposter laufen über die Bildoptimierung des Frameworks.

Bedienbar

Skip-Link, Menü als Dialog mit aria-expanded und ein Button, der das Startvideo pausiert oder abspielt.

Anfrageformular

Pflichtfelder, Auswahl von Projektart und Angebot sowie ein verstecktes Feld gegen Spam.

Strukturierte Daten

Schema.org-Auszeichnung für Website und Person, dazu Open-Graph-Bild und Canonical.

Ergebnis

Bewegtbild im Mittelpunkt

Das Ergebnis ist eine Website, die ein Portfolio zeigt, statt es zu beschreiben: Showreel, Arbeiten und Angebote in einem durchgehenden Fluss, mit der Anfrage immer in Reichweite.

Live-Website ansehen

Weitere Referenzen