All Projects
Catalog & Ordering

Toploker CV Catalog

ClientToploker.com
Year2024
ServicesWeb, UI/UX, Motion
LinkVisit Site

The Challenge

This product is bought with the eyes: someone chooses a CV template because they can see it clearly, which means the catalog is really an image-viewing problem. Off-the-shelf lightboxes handle desktop and fall apart on touch, where zooming into a template to read its typography is the whole point. Adding a full checkout would also have been the wrong call — the audience is job seekers who expect to negotiate details over chat, and every extra form field between interest and contact loses orders.

The Solution

We built a Next.js 16 site on Bun with a custom modal viewer supporting swipe, pinch zoom, and keyboard navigation, so a template is legible on a phone as well as a 4K monitor. Templates are grouped into packets so browsing has structure rather than being an endless grid. GSAP ScrollTrigger and Framer Motion carry the presentation without slowing first paint, and ordering hands off directly to WhatsApp with context attached — the shortest path from 'I like this one' to a conversation.

Toploker CV Catalog — 1
Toploker CV Catalog — 2

Technologies

  • Next.js 16
  • Bun
  • Tailwind CSS 4
  • GSAP
  • Framer Motion
  • TypeScript
Outcomes
WhatsApp

Ordering flows straight to chat, no checkout friction

Gesture

Custom viewer with swipe, zoom, keyboard nav

Designed & engineered by Manggala Code

WebUI/UXMotion
Next Project

Jadwal Imsakiyah

Seasonal Utility