ReleasedWeb development2026

Mining Hair · 미용실 브랜드 웹사이트 개발

Design and full-stack development of a live salon website. A photography-led interface combines responsive layouts, animated galleries and an editable content system built with Next.js.

Client work
Live website

Product experience

We designed and developed the official website for Mining Hair, which is now in operation. The home screen uses a full-width photograph, bold type and a shared navigation system. Next.js and React organize the pages; Tailwind CSS supplies viewport-sized layouts, layered elements and type that scales with the screen. The section captures below show the implementation of the introduction, moving gallery, image archive and interactive review scene.

About section: portrait, layered typography and a sticky layout — About — Next.js Image displays the portrait, while Tailwind CSS combines a sticky viewport, layered text and responsive type sizes. The image and text move through the section as the visitor scrolls.

Gallery Snippets section with horizontally moving photo cards — Gallery Snippets — GSAP moves duplicated card tracks in a continuous loop and recalculates the distance when the layout changes. CSS transitions switch each card’s photo on hover or keyboard focus; selecting a card opens its gallery category.

Mining Hair website: gallery grid and category navigation — Gallery — React manages the category selection and loads images in pages of 12. Tailwind CSS arranges the responsive grid, and Next.js Image works with loading placeholders and hover transitions.

Street Notes review section with an illustrated panorama and character controls — Street Notes — A CSS sticky viewport keeps the illustrated scene in view. Layered background images and character buttons form the interface, with controls for changing streets, moving through the scene and opening reviews.

What you can do

Home and About: responsive typography, layered photography and sticky section layouts.
Gallery Snippets: a GSAP loop, image transitions and links to filtered gallery views.
Gallery: category filters, paginated loading and a responsive image grid.
Street Notes: an illustrated panorama with character buttons and scene navigation.
Content management: inline text editing, image uploads and server-side storage.

How it works

The server prepares the core content for the initial page render, then shares it with the client’s content state. Edit requests pass through a server API, and Prisma persists section content in PostgreSQL. Redis caches read results; saving a section invalidates the related cache so subsequent reads use the updated content.

Privacy & local operating model

Public browsing and content editing have separate responsibilities. Editing controls appear in administrator mode, and the content-saving API also checks the administrator session. The delivery includes both the visitor-facing design and the operator’s content workflow.

Release status

The website is live at mininghair.com. The images shown here are captures of the operating website. This case study covers the site’s implementation, architecture and design.