HadiHz
Back to projects
ProfessionalEasy

Abbas Krayani Portfolio

A single-page personal portfolio built and shipped for a client, with animated sections and a validated contact form.

— Overview

Architecture Overview

graph LR
    A["Vite + React SPA"] --> B[shadcn/ui on Radix]
    A --> C[Tailwind CSS v4]
    A --> D[framer-motion sections]
    A --> E["react-hook-form + Zod"]
    A --> F[TanStack Query]
    A --> G[Vercel]

A commissioned portfolio site delivered as a single-page React application. The brief was straightforward — present the client's background and work clearly, load fast, and read well on a phone — so the build stays deliberately simple: one page, sectioned, with motion used to guide attention rather than decorate.

Components come from shadcn/ui on Radix primitives, which keeps the interactive pieces accessible by default. The contact form validates with Zod through react-hook-form before anything is sent.

Key Features:

  • Single-page layout with animated section reveals
  • Accessible interactive components built on Radix primitives
  • Contact form with schema validation and inline error states
  • Responsive typography and layout from mobile upward
  • Deployed to Vercel with a live public URL

Tech Stack:

  • Frontend: React, TypeScript, Vite, Tailwind CSS v4
  • Components: shadcn/ui, Radix UI, framer-motion
  • Forms: react-hook-form, Zod
  • Hosting: Vercel
— Stack
TypeScriptReactViteTailwind CSSVercel
Live preview