Overview

Brooklyn Red Handmade Pottery and Ceramic Art is a minimalist, image-forward portfolio site built for ceramic artist Brooklyn Red to showcase and manage her latest work. I was responsible for the entire project — from design and frontend development to backend setup and problem-solving. The site features a responsive layout, clean aesthetic, and a custom admin-only interface for uploading, sorting, and managing gallery images.

Role

Frontend Designer

UI/UX Designer

Tools

Figma / Netlify / Firebase / Javascript

image of pottery site home page

Challenge

Although I completed a web development bootcamp, building this site exposed the gap between structured lessons and solving real-world problems independently. This project pushed me to take on unfamiliar territory — especially when it came to connecting the frontend to a working backend. Some of the biggest challenges included:

  • Figuring out how to store and manage image data using Firebase, including uploads, deletions, and tracking sort order.
  • Implementing a drag-and-drop sortable gallery, something I hadn’t done before and had to piece together from documentation and community examples.
  • Setting up Firebase Authentication to protect admin-only functionality.
  • Learning to problem-solve without step-by-step instructions, often debugging JavaScript or Firebase behaviors through trial and error.
image of javascript code

User Needs

Before starting the design, I worked closely with the artist to understand how she envisioned using the site — both as a portfolio for showcasing her work and as a tool she could manage herself. The goal was to create a minimal, elegant experience for visitors, while also giving her the ability to control the content without needing technical help.

  • A clean, professional website that showcases ceramic work across devices
  • An easy way for the artist to upload, reorder, and remove images without using a third-party Content Management System
  • Minimalist branding and elegant typography
  • The ability to privately manage content without needing technical knowledge
image of pottery gallery

Solution

I designed and developed a fully responsive single-page site using HTML, CSS, JavaScript, and Firebase. The entire backend is invisible to visitors, but powerful enough for the artist to update her gallery from any device. Key features include:

  • Firebase Authentication for secure login
  • Image upload & delete system for managing artwork
  • Drag-and-drop gallery reordering, with saved sort order in Firestore
  • Reusable UI components and clean, scalable design
  • Custom color palette and typography based on the artist’s brand tone
image of javascript code

Designs

To align with the artist’s vision, I collaborated closely with her to select a color palette that reflects earthy tones and her personal preferences. Typography choices blended elegance and warmth, with a serif font for sophistication and a handwritten script for personality. The visual design was minimal and spacious, letting their work take center stage while maintaining brand consistency across all pages.

Typography

Cormorant Garamond

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Bold / Semibold / Regular

Brittany Signature

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Regular

Colors

#7171AA

#CCCCFF

#807440

#BFB78F

#F5F5F5

Illustration

image of pottery icon

High Fidelity

Once the visual direction was approved, I moved into high-fidelity mockups that reflected the final layout, colors, and typography choices. These designs captured the full experience across desktop and mobile views, ensuring the site looked cohesive and professional on all devices. The final screens were used as a blueprint for building the live site, bringing the artist’s vision to life with precision.

image of Your Tune music screen on iphoneimage of Your Tune music screen on iphoneimage of Your Tune music screen on iphoneimage of Your Tune music screen on iphone

Takeaways

This project was a turning point in my journey as a front-end designer and developer. It also reinforced the value of close collaboration and listening to feedback, even for personal projects. This case study is a reflection of both creative flexibility and technical growth. I gained hands-on experience with:

  • Firebase Storage, Firestore, and Authentication
  • Structuring dynamic JavaScript for real-world functionality
  • Solving UI/UX problems through both design and code
  • Learning how to ship a real product while learning on the fly
image of responsive pottery contact page