Skip to content
</>
Back
Brand landing & craft catalogProduction

Freelance project

BaoBlue

  • React
  • Next.js
  • Tailwind
  • Framer Motion
  • Vercel

Problem

A clay-earring brand needed a recognizable web presence to show its catalog and move inquiries to WhatsApp without a full e-commerce.

Context

A freelance project for a real client. I designed and built the landing page around an expressive, handcrafted brand identity.

Objective

Present the catalog and buying process through a distinctive experience that stays fast and clear on mobile.

My role

  • Designed and built the landing page end to end.
  • Created a vibrant visual direction, animations and reusable components.
  • Wired the CTA straight to the salesperson's WhatsApp, with no intermediate form.

Architecture & decisions

  • A component-based landing page in React/Next.js, styled with Tailwind and animated with Framer Motion.
  • The CTA goes straight to WhatsApp; no backend was added where the business did not need one.

Solution

  • Responsive site in React/Next.js with Tailwind, Framer Motion and reusable components.
  • BaoBlue: earring catalog with hover, a 3-step buying process, testimonials and FAQ.
  • A vibrant yet harmonious palette, with the animations I like most in the project.
  • Deployment on Vercel with a GitHub workflow.

Challenges & trade-offs

  • Keeping personality and motion without hurting readability, responsive behavior or scanning speed.

Views

Screenshots from the live site

Screenshot of BaoBlue: BaoBlue — Unique earrings for unique people
BaoBlue — Unique earrings for unique people
Screenshot of BaoBlue: Earring catalog (hover)
Earring catalog (hover)
Screenshot of BaoBlue: How to buy in 3 steps
How to buy in 3 steps
Screenshot of BaoBlue: Customer testimonials
Customer testimonials

Learnings

  • Translating the business personality into concrete visual decisions.
  • Keeping eye-catching animations without breaking visual harmony.

Result

BaoBlue is in production, deployed on Vercel, and its repository is public.