BBA Studio Full-Screen Portfolio Slider

Overview

This architectural portfolio employs a minimalist, high-impact design centered around a full-screen vertical slider. Utilizing the Embla Carousel library, it creates an immersive browsing experience where each project is treated as a cinematic visual. It is an excellent reference for high-end boutique brands and studios that want to prioritize visual storytelling over dense text.

Design System

• Color Palette & Visual Hierarchy: The palette is dominated by project photography, using a subtle bg-black/10 overlay to ensure white typography remains legible. The visual hierarchy is strictly flat, with text elements acting as delicate overlays that do not compete with the full-bleed imagery.
• Typography: The system uses clean, sans-serif fonts. Headings (h2) and list items (li) are positioned mid-left, while a simple "Explore" link is anchored at the bottom left. The look is airy and sophisticated, typical of luxury branding.
• Page Structure: The layout is a single-page fixed container (fixed top-0 left-0 w-full h-full). Inside, architectural projects are presented as vertical slides (flex-col) that occupy 100% of the viewport.
• Reusable Components:
  • Vertical Slider: The data-embla-container with vertical scroll logic.
  • Dot Navigation: A vertical fixed sidebar (right-5 top-1/2) featuring circle indicators that toggle size/fill based on the active state.
  • Interactive Overlays: The project title block and the "Explore" call-to-action placed via absolute positioning over the image layer.
• Interaction and Motion: The primary interaction is the vertical snap transition between slides. The dot navigation provides a secondary way to jump through the portfolio. Visual cues include a bottom-center arrow for guided scrolling.
• Implementation Clues: The HTML reveals a utility-first approach (Tailwind CSS) for positioning (absolute, inset-0) and layout (flex-col, flex-[0_0_100%]). The carousel functionality is driven by Embla Carousel attributes.

Use Cases

• Who should clone this: Architectural firms, interior design studios, and fashion photographers who need a curated, image-heavy showcase.
• Remix Directions:
  • Digital Agencies: Swap the static architectural images for auto-playing full-screen background videos.
  • Luxury Real Estate: Use the slider to transition between different rooms or amenities of a property.
  • Product Launches: Adapt the structure into a single-product scroll-teller where each slide describes a different feature.
• Clone Scope: The full-page slider component is the most valuable asset. Builders should clone the layout shell and the fixed navigation elements while swapping the background layer for project-specific media.