Overview

• Clear structure: Home, About, Works (list + detail), Contact, policies.
• Filters & search: by tag/category, status (ongoing/completed), “featured,” sorting (“newest/oldest/popular”).
• SEO & localization: per‑locale metadata, clean URLs, translated content.

Key features

• Dynamic Works: cover image, gallery, localized descriptions, external links, view counter.
• Search & ranking: text search across title/client, enriched by tags/categories, date/popularity sorting.
• Real contact: email delivery with sender confirmation and owner notification.
• Refined UX: dark mode, accessible components, subtle micro‑interactions.

Data layer and integrations

• tRPC: modular router (works, tags, categories), superjson and HTTP batching.
• • Client query: trpc.works.getMany.useQuery({ page, limit, sort })
• Payload: typed queries, relations (categories/tags), SEO plugin, media via Vercel Blob.
• • Fetch example: ctx.payload.find({ collection: "works", where, sort, page, limit })
• Forms: RHF + Zod for consistent validation.
• • Example: useForm({ resolver: zodResolver(schema) })

UX, performance, quality

• Performance: optimized images, lazy media, client caching (TanStack Query).
• Reliability: Sentry across server/edge/client, structured logging, clear state messaging.
• Accessibility: Radix components, readable contrast, focus management.

Role and collaboration

I handled the front end, Payload integration (collections, media, SEO), the tRPC layer (procedures, validation, batching), Works filtering/sorting, the views counter, GSAP animations, and the Resend contact form.

Technical highlights

• tRPC with zod, superjson, batching, and TanStack Query caching.
• Payload on MongoDB with Vercel Blob media and auto‑generated SEO.
• Typed end‑to‑end search/filters/sorting for “Works.”
• Sentry + metrics (Vercel Analytics & Speed Insights).
• Accessible UI (Tailwind, Radix) with dark mode.