Nane’s Studio — Where Clay Meets Code

My Role

• Sole creator: concept, UX/UI, frontend, backend, and all physical pieces.
• This project is a direct extension of my journey as a senior frontend developer who needed to slow down, get my hands dirty, and make something real.

Goals

• Bridge digital and physical: Let visitors experience the stories and processes behind each piece, not just the finished product.
• Encourage exploration: Use playful, interactive elements (like the Oracle and loyalty card) to reward curiosity.
• Build community: The guestbook and personal touches invite visitors to leave their mark and feel part of the studio’s story.

Features & Technologies

• Next.js 16 + React 19 for fast, modern, flexible UI.
• Tailwind CSS for rapid, expressive styling and a unique, hand-crafted visual feel.
• Framer Motion for smooth, delightful animations (e.g., the Oracle’s reveal, interactive about page).
• Custom components: OracleFlow, LoyaltyCard, GuestbookForm, and more.
• Story-driven shop: Each piece has a backstory, process notes, and multiple “tiers” (object, story, full recipe).

Design Approach

• Handwritten fonts & earthy palette to evoke the warmth and imperfection of handmade ceramics.
• Progressive disclosure: uncluttered screens, one primary action per screen, deeper layers revealed as you explore.
• Playful narrative: The “legend” of Hima the ferret, the Oracle, and personal notes create a sense of world-building and invitation.

Challenges

• Balancing code and craft: Making the site feel as “handmade” as the objects, focusing on small, meaningful details.
• Storytelling in UI: Translating the tactile, slow process of ceramics into a digital experience with careful pacing, animation, and copywriting.
• Community without noise: Guestbook and loyalty program are opt-in, gentle, and never intrusive.

Outcomes

• Organic engagement: Visitors leave thoughtful notes, return to check the kiln log, and share stories of their own making.
• Personal growth: Building Nane’s Studio helped me reconnect with the joy of making — both in code and clay.
• A living portfolio: This project is both a shop and a showcase of my approach to creative technology: playful, story-driven, and always human-centered.

What I Learned

• The best digital experiences borrow from the physical world: patience, imperfection, and a sense of discovery.
• Community grows when you leave space for others to contribute, not just consume.
• Sometimes, the most “advanced” technology is the one that gets out of the way and lets the story shine.

Case evidence

Screenshots & Artifacts