Concept snapshot
Record date: May 22, 2025. Technology and screenshots describe the prototype as documented on this date. Any performance observations belong to the same point-in-time record. No current client deployment is implied.
Ink Noir is a dark luxury tattoo studio portfolio designed as a single-file immersive web experience. Built for a high-end editorial aesthetic, Rick Owens meets gallery curation, it prioritizes cinematic scroll animations, tactile mobile interactions, and a zero-backend architecture that deploys anywhere.
The site targets portfolio and demo use, showcasing how a premium brand experience can be delivered without a framework or build step. Every animation, transition, and layout decision reinforces the studio's positioning: by appointment only, master craft, and unapologetically selective.
- Create a portfolio presence that feels like a private salon, not a commodity shop
- Deliver cinematic scroll storytelling without heavy framework overhead
- Ensure mobile visitors feel like they are using a native app
- Maintain sub-100KB first load despite rich visuals and animation
- Immersive hero with full-viewport background, staggered headline reveals, scroll-down indicator with magnetic hover, and a CTA that uses a custom gold-border draw animation.
- Native-app mobile UX including a fixed bottom navigation rail, safe-area insets, pull-to-refresh feel via Lenis momentum scroll, and haptic-ready touch targets.
- Artist showcase as a touch-enabled Swiper carousel with parallax depth, gold progress indicator, and slide transitions synchronized to GSAP timelines.
- Services section with blurred background texture, staggered card reveals, gold accent rules, and hover-driven lift animations.
- Process narrative anchored by a cinematic process shot with parallax and a booking CTA section featuring the same image with a dark overlay and gold-border accent.
- Gallery grid with 33 curated portfolio images, category filtering (All / Blackwork / Japanese / Fine Line / Traditional), and a full-screen lightbox with keyboard, swipe, and zoom support.
- FAQ accordion with smooth height animations, rotating chevron icons, and editorial typography that maintains the luxury tone even in utilitarian content.
- Contact section with a gold-accent form, floating label inputs, and a gold-border focus animation on the submit button.
- Single-file architecture, one index.html with embedded CSS and JS, zero build step, deployable to any static host or CDN.
- GSAP + ScrollTrigger for production-grade scroll-driven animations: section reveals, parallax, staggered text, and pinned hero transitions.
- Lenis smooth scroll for buttery momentum scrolling on both desktop and mobile, with reduced-motion fallbacks.
- Swiper 11 for the artist carousel and any future swipeable content, configured with custom pagination and parallax depth.
- CSS custom properties design system with fluid type scale via clamp(), gold-accent tokens, and a near-black palette that keeps focus on imagery.
- Responsive without breakpoints, most spacing and typography use fluid clamp() values, with only strategic media queries for layout shifts (single-column mobile, grid desktop).
- Performance-first loading, hero image preloaded with fetchpriority="high", gallery images lazy-loaded, and all third-party assets deferred.
Accessibility and Performance
- Respects prefers-reduced-motion by disabling GSAP timelines and Lenis when the preference is set.
- Semantic HTML with proper heading hierarchy, aria labels on interactive elements, and keyboard-navigable gallery lightbox.
- Touch targets sized at 48px minimum for mobile bottom nav and gallery controls.
- theme-color meta and apple-mobile-web-app meta tags for PWA-like behavior when added to home screen.
Delivery and Architecture
- Built from a detailed design specification (build.md) and AI-generated asset prompts (image-prompts.md), then hand-assembled into the single-file experience.
- All 33 gallery images and 7 editorial assets optimized to WebP and referenced via relative paths for maximum portability.
- Deployed to Dockploy static hosting on a custom subdomain with nginx serving the single index.html entry point.
Ink Noir demonstrates that a luxury digital experience does not require a heavy framework or backend. The site loads fast, scrolls beautifully, and converts curiosity into appointment requests through a booking form and WhatsApp integration. It now serves as a portfolio piece for high-end service businesses that want their website to feel as intentional as their craft.
View Project
