Bauhaus Constructivist Portfolio - Refined Animations

# Bauhaus Constructivist Portfolio - Refined Animations

{
  "summary": "A modular, geometric design system based on Bauhaus and Constructivist art, featuring a 3D perspective stage where the entire content sits on a single tilted plane. It uses hard-edged aesthetics, primary color blocking, and scroll-reactive parallax rotation.",
  "style": {
    "description": "The style is a mix of modernist poster design and interactive 3D physics. It relies on the Outfit font family for bold, uppercase typography with wide tracking. Colors are strictly limited to primary Bauhaus tones. The UI is defined by 'hard shadows' (offset solid blocks) and thick 4px borders. Micro-interactions include 1.03x scaling on hover and a 2px offset 'press' effect for buttons.",
    "prompt": "### Visual Identity\n- **Color Palette:** Primary Red (#D02020), Primary Blue (#1040C0), Primary Yellow (#F0C020), Off-White Background (#F0F0F0), Ink Black (#121212).\n- **Typography:** Use 'Outfit'. Headlines: 42px-68px, font-weight: 900, uppercase, leading: 0.95. Subheaders: 18px-24px, uppercase, tracking: 0.2em. Body: 15px-18px, font-weight: 500, leading: 1.6.\n- **Borders & Shadows:** All containers must have a 4px solid border (#121212). 'Hard' shadows use solid colors with 8px offset (shadow-hard: 8px 8px 0px #121212) or 12px offset (shadow-hardLg).\n- **Texture:** Apply a grain overlay using radial gradients (rgba(18,18,18,0.08) at 1px) and a subtle 44px background grid.\n- **Animations:** Transitions: 200ms cubic-bezier(0.165, 0.84, 0.44, 1). \n- **Interactive States:** \n  - Hover: scale(1.03), -translate-y-1, enhance shadow to hardLg.\n  - Active: translate(2px, 2px), remove shadow."
  },
  "layout_and_structure": {
    "description": "The layout is housed within a 3D perspective stage. The entire content area (the 'plane') is tilted on X, Y, and Z axes. Content is organized into blocks with heavy horizontal separators.",
    "prompts": [
      {
        "part": "Perspective Stage",
        "prompt": "Wrap the main content in a container with 'perspective: 3000px'. Apply a 3D plane transformation: 'rotateX(6deg) rotateY(-4deg) rotateZ(1deg)'. Implement scroll-reactive parallax where scrollY modifies rotation: rotX = 6 - (scrollY * 0.008), rotY = -4 + (scrollY * 0.005)."
      },
      {
        "part": "Top Label Row",
        "prompt": "A horizontal bar containing a trio of colored circles (Red, Yellow, Blue) with 4px borders and a text label in uppercase tracking (0.2em). Right-aligned navigation buttons with hard shadows and scaled hover effects."
      },
      {
        "part": "Hero Section",
        "prompt": "A 12-column grid. Left side: Massive uppercase typography, secondary status blocks with hard shadows. Right side: A 'Bauhaus Composition Box'—a complex grid of primary-colored rectangles, ink-black fills, and a circular image container with a blue background and radial gradient overlay."
      },
      {
        "part": "Content Sections (About/Projects)",
        "prompt": "Divided by 4px solid horizontal rules. Use a 'Label/Content' split (e.g., 4-col label, 8-col content). Content blocks should alternate between white and #F0F0F0 backgrounds, maintaining hard-shadowed containers."
      },
      {
        "part": "Social/Contact Grid",
        "prompt": "A 4-column grid of cards. Each card has a distinct primary background color (Yellow, Blue, Red, or White) and features a circular icon holder, bold labels, and a 45-degree arrow icon in the top right. Apply lift effects on hover."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Bauhaus Composition Box",
      "description": "A decorative layout element mirroring modernist abstract art.",
      "prompt": "Create a 12x12 grid container. Use row/col spans to create asymmetrical blocks. Specifically: top-left (5x4 Red), bottom-left (8x8 white with a circular inset image), right-middle (4x8 grey/yellow stack). Ensure 4px borders between all internal blocks."
    },
    {
      "component": "Interactive Hard-Shadow Button",
      "description": "A button that mimics physical depth via solid shadow offsets.",
      "prompt": "Base: 4px border, bg-white or primary color, shadow-hard (8px offset). Hover: scale(1.03), shadow-hardLg (12px offset). Active: translate(2px, 2px), shadow-none. All transitions must use cubic-bezier(0.165, 0.84, 0.44, 1)."
    }
  ]
}