Overview
Arki Arti is a personalized portfolio website built for a local pottery studio, designed to showcase handmade products, announce creative events, and simplify workshop reservations. But it’s not just another portfolio—it’s an immersive experience that reflects the artist’s personal journey, creativity, and craftsmanship through elegant visuals, 3D elements, and fluid animations.
If pottery is storytelling through clay, Arki Arti is storytelling through code.
The Idea
The goal was to help the studio owner bring their work to life online—visually, emotionally, and functionally. We wanted to design something that didn’t just “present products,” but actually communicated the essence of the brand—a warm blend of art, culture, and community. The site also needed to be practical, offering an easy and reliable way for visitors to register for workshops and follow upcoming events.
Tech Stack
Frontend
- Next.js – App router, routing logic, SSR
- React.js – Component-based UI
- Tailwind CSS – Utility-first, responsive styling
- GSAP – Scroll-triggered & micro animations
- React 3Fiber + Drei – Lightweight 3D rendering and scene management
- SVG Filters – Layered for visual effects and creative transitions
Content & Hosting
- Prismic CMS – Structured content delivery for workshops, events, and galleries
- Vercel – Hosting & deployment with seamless CI/CD
My Role
Arki Arti was a full solo build—from concept to deployment. My responsibilities included:
- UI/UX Design – Sketching and designing a custom experience based on the studio’s style and story
- Logo Cleanup & Typography – Refining the visual identity to match the new digital presence
- Frontend Development – Including animation systems, 3D model integration, and interactive storytelling
- CMS Architecture – Setting up Prismic schemas for dynamic product listings, event management, and workshop forms
- Content Creation – Curating and creating initial content to fill out the site with meaningful visuals and copy
Unique Features
Personalized Visual Identity
From typography to layout and colors, every design choice was made to match the artist’s personality and handmade aesthetic. It’s cozy, elegant, and organic—just like the studio.
Fluid Animations
GSAP + SVG filters were used to craft subtle transitions, floating UI elements, and playful scroll-based motion that draws visitors into the experience without overwhelming them.
3D Product Moments
Using React 3Fiber and Drei, the homepage features 3D pottery visuals to create a sense of depth and tactility—giving the user a sense of the studio’s materiality, without needing a physical store.
Workshop Booking System
Visitors can view upcoming events and register directly through the site, with content fully managed by the studio owner through Prismic.
Challenges
- Performance with 3D + Animation
Managing scroll-triggered animations and 3D rendering while keeping the performance snappy was tough. I had to profile render trees, lazy load components, and use Drei helpers to simplify scenes. - Cross-Browser Compatibility with SVG Filters
SVG filters behaved differently across browsers. I built a few custom React hooks to detect environments, conditionally apply styles, and preserve consistent visuals everywhere. - Balancing Brand with UX
This wasn’t just about showing off design—it had to work. I ensured every creative decision (like motion or texture) supported clarity, navigation, and storytelling.
Outcome
- Site is live and in production
- 2 workshops successfully registered and booked via the site
- Client was thrilled with the end result and now uses it as their main promotional tool
- Built to scale: new events and products can be added easily via CMS
Visit the live site: arkiarti.vercel.app
Final Thoughts
Arki Arti is one of the most personal and artistically fulfilling projects I’ve built. It pushed my front-end skills into new creative territory—from 3D scene orchestration to handcrafted animations, all while respecting performance and usability. It’s a love letter to creative developers, indie artists, and users who appreciate the little details.
If you’re looking to craft digital experiences that tell stories—not just display content—let’s chat.
Let me know if you'd like a shortened version for LinkedIn or case study thumbnails, or a Markdown version ready to drop into Prismic!