MRFACE

Problem

The artist had no online presence beyond social media: no brand identity, no portfolio, and no way for buyers outside his area to browse his work or request commissions.

Approach

• Worked with the artist to define the MRFACE brand, then carried it through the site with hand-drawn section titles, branded buttons, and a welcome video.
• Built the artwork gallery: each piece shows its front view in the grid, and a modal slider reveals alternate views. Artworks load in batches with Load More, driven by JSON data I structured for the gallery and commissions sections.
• Rendered the hand-drawn titles as optimized images through next/image instead of a custom font, so there's no font download, images are served as WebP/AVIF at display size, and their space is reserved to prevent layout shift.
• Kept animations cheap: scroll-in effects run once and only animate opacity and transform, the gallery fade-in stagger is capped at 5 items, and the nav's scroll listener is passive.

Outcome

• Since launch, the artist has used the site as the hub for his social media, growing his customer base and opening a FACE studio.