Theodore Ellison Artisan Portfolio Website

Overview

This website is a premium artisan portfolio for a glass and mosaic studio, characterized by high-impact visual storytelling and fluid transitions. It serves as an excellent reference for cloning due to its sophisticated "scroll-to-reveal" section-based architecture and its adaptive color-themed backgrounds that shift as the user navigates.

Design System

• Color Palette & Visual Hierarchy: The site uses a dynamic, grounded earthy palette including muted tones like Sequoia (dark brown), Mojave (terracotta), Moss (olive green), and Muir (deep charcoal). The hierarchy is driven by full-bleed imagery and videos, with high-contrast white or black typography depending on the background theme.
• Typography: A minimalist sans-serif system utilizing varied weights and scales. Headlines use a wide, bold uppercase style (primary-h1), while secondary headings (type--h-4, type--h-5) provide a cleaner, elegant look. Eyebrows (type--eyebrow-md) are used consistently to label collections.
• Page Structure & Flow: The flow starts with a full-bleed parallax video hero featuring a centered logo. It transitions into full-window text sections followed by "Collection Highlights" that alternate between full-width blocks and 50/50 split grids.
• Reusable Components:
  • The Mega-Menu: A split-pane layout where text links on the left trigger dynamic image previews (collection-media-wrap) on the right.
  • Collection Highlight Cards: Media-heavy blocks with a highlight-text overlay and a clear text-button call to action.
  • Themeable Sections: HTML classes like theme--sequoia and theme--mojave indicate a modular CSS system for global color switching per section.
• Interactions & Motion: Features include parallax scrolling on background media, hover-triggered image swaps in the navigation, and "will-transition-in" reveal animations for text content.
• Implementation Clues: The structure uses a custom utility-first approach (e.g., container-fluid, col-lg-5) suggesting a Bootstrap-based grid framework customized with specialized artisan themes.

Use Cases

• Who should clone this: Independent makers, high-end interior designers, architects, and luxury craft studios who rely on large-scale visual portfolios to justify premium pricing.
• Effective Remixes: This pattern works exceptionally well for specialized product catalogs where each item belongs to a distinct aesthetic "universe" (e.g., furniture collections, bespoke jewelry, or landscape architecture).
• Practical Directions: Developers can swap the glass-focused videos for product-testing footage or slow-motion manufacturing shots. The information architecture can be adapted by reusing the mega-menu for navigation-heavy sites that need to remain visually lightweight.
• Suggested Scope: A full-page clone is recommended to capture the seamless thematic transitions, but the mega-menu and the parallax hero section are standout individual components for quick extraction.