ProfessionellEinfach
Portfolio von Abbas Krayani
Ein einseitiges persönliches Portfolio, für einen Kunden gebaut und ausgeliefert, mit animierten Abschnitten und validiertem Kontaktformular.
— Überblick
Architekturüberblick
graph LR
A["Vite + React SPA"] --> B["shadcn/ui auf Radix"]
A --> C[Tailwind CSS v4]
A --> D["framer-motion-Abschnitte"]
A --> E["react-hook-form + Zod"]
A --> F[TanStack Query]
A --> G[Vercel]
Eine beauftragte Portfolio-Seite, ausgeliefert als einseitige React-Anwendung. Die Vorgabe war schlicht — Hintergrund und Arbeiten des Kunden klar zeigen, schnell laden, auf dem Telefon gut lesen — der Aufbau bleibt daher bewusst einfach: eine Seite, in Abschnitten, in der Bewegung die Aufmerksamkeit lenkt, statt zu schmücken.
Die Komponenten stammen aus shadcn/ui auf Radix-Primitiven, was die interaktiven Teile von Haus aus zugänglich hält. Das Kontaktformular validiert vor dem Absenden mit Zod über react-hook-form.
Hauptfunktionen:
- Einseitiges Layout mit animiert erscheinenden Abschnitten
- Zugängliche interaktive Komponenten auf Radix-Primitiven
- Kontaktformular mit Schema-Validierung und Inline-Fehlern
- Responsive Typografie und Layout ab Mobilgeräten aufwärts
- Auf Vercel mit öffentlicher Live-URL ausgerollt
Tech-Stack:
- Frontend: React, TypeScript, Vite, Tailwind CSS v4
- Komponenten: shadcn/ui, Radix UI, framer-motion
- Formulare: react-hook-form, Zod
- Hosting: Vercel
— Stack
TypeScriptReactViteTailwind CSSVercel