MA Quilts Textile Portfolio Site

Overview

This textile portfolio website serves as an excellent reference for creators who want to combine bold, graphic design with a structured gallery experience. It uses a high-contrast two-column hero section and dynamic CMS-driven grids to balance artistic expression with professional content organization. Builders should look to this site for its effective use of color blocking, marquee motion, and a tactile, material-inspired UI.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-saturation primary palette featuring warm yellow (#F7E07E), vibrant orange, and soft pink backgrounds. Visual hierarchy is established through extreme scale; large, bold orange headings contrast against clean, spacious backgrounds to guide the eye immediately to the brand message.
• Typography: The system relies on a bold, sans-serif typeface (as seen in the home-intro-heading and large-heading classes). Text is used as a graphic element, utilizing all-caps and tight line-heights for impact, while body copy remains centered and readable.
• Structure & Layout:
  1. Split Hero: A home-hero-columns layout with text on the left and a large, high-quality product image in an overflow container on the right.
  2. Grid Galleries: CMS-driven more-quilts-feed (4-column) and blog-block (3-column) grids for visual storytelling.
  3. Marquee Section: A full-width process-block featuring large-scale sliding text (marquee-heading).
  4. Dynamic Footer: A two-part footer with a logo-heavy top section and a decorative footer-pattern base.
• Reusable Components:
  • large-btn: A simple, high-contrast button style used for clear CTAs.
  • more-quilts-item: A reusable card component combining a square image ratio with a clean bottom-aligned heading.
  • menu-overlay: A full-screen slide-out navigation menu triggered by the hamburger icon.
• Motion Patterns: The HTML reveals sophisticated animations including transform3d transitions on the menu, a marquee-style sliding header in the process section, and a Lottie animation integration (data-animation-type="lottie") for interactive visual interest.
• Responsive Behavior: The use of w-col-stack and w-col-small-small-stack classes indicates a robust grid system that collapses columns into a centered vertical stack for mobile devices, ensuring high-impact typography remains legible.

Use Cases

• Who should clone this: Artists, fashion designers, and makers whose work is physical, vibrant, and pattern-oriented. It is ideal for portfolios that need to feel as creative as the work being showcased.
• Effective Remixes: High-end boutique e-commerce sites can remix this by replacing the "See all quilts" buttons with "Shop Collection" CTAs. Interior design firms could leverage the bold typography to highlight specific project themes.
• Remix Directions:
  • Color Swap: Replace the bright yellow/orange for a more muted, monochromatic palette to adapt the site for a luxury minimalist brand.
  • Scope Selection: Clone the home-hero-intro and process-block sections first to create a high-impact landing page without needing a full blog infrastructure.
  • IA Adaptation: Use the 3-column blog grid as a services section or a client testimonial grid.