Overview

Not every project starts with my own design. This one started with someone else’s: a finished concept by UX/UI designer Karin Nasrallah, and the job was to build it, not to interpret it. That is its own discipline: reading a layout for its rules, matching type and spacing exactly, and making the motion feel the way the designer imagined it without a spec for every frame. The result is a single-page React storefront with a marquee, a product collection, a bean-to-bonbon story and a visit section, with nothing but React and hand-written CSS underneath.

Services

Design-to-code implementation
React component build
Hand-written CSS animation
Responsive layout

Stack

React · Vite · CSS · No animation library

Karin

Design by

none

Animation library

211 KB

Main bundle

2026

Delivered

Read the design for its rules

Before writing a component I extracted the system from the screens: a two-face type pairing (a high-contrast display serif and a plain sans), a gold accent on near-black, a fixed rhythm of eyebrow → headline → body → action. Every section then reuses those rules rather than being laid out by eye.

Motion without a library

The rotating tagline marquee, the reveal of headlines on scroll, the hover lift on product cards, all CSS transitions and keyframes triggered from React state. A deliberate constraint: understand what the animation libraries do before reaching for one.

Faithful, not literal

A designer’s mockup is one viewport. Building it means deciding what happens at every other width: how the split story section stacks, where the product grid drops from four columns to two, what the marquee does when text wraps. Those calls were made to keep the design’s intent, not its pixels.