Loving MaU Portfolio

# Loving MaU Portfolio

{
  "summary": "A friendly yet professional creative portfolio with an organic-natural aesthetic, utilizing earthy tones, irregular soft shapes, and smooth micro-interactions to convey a human-centered design approach.",
  "style": {
    "description": "The design uses a 'Warm Earth' theme. Typography pairs the elegant serif 'Gambetta' for headings with the clean, modern sans-serif 'Satoshi' for body text. Colors include Cream (#F5F1EC) for backgrounds, Charcoal (#3D3D3D) for text, Sage Green (#9BA89F) and Terracotta (#C17A4D) as accents. The visual language is defined by irregular 'blob' shapes with morphing animations, organic border-radius transitions on buttons, and a subtle SVG noise overlay (4% opacity) to add texture and depth.",
    "prompt": "Create a high-end organic design system. Colors: Cream (#F5F1EC) Background, Charcoal (#3D3D3D) Text, Sage Green (#9BA89F), Terracotta (#C17A4D), and Sand (#E8E0D5). Typography: Headings in 'Gambetta' serif (weights 400-700, italic used for emphasis), Body in 'Satoshi' sans-serif. Visual elements: Use an 8-second CSS morphing animation for background blobs using irregular border-radii (e.g., 60% 40% 30% 70% / 60% 30% 70% 40%). Apply a fixed noise overlay via SVG filter at 0.04 opacity. Interactive elements: Buttons should have asymmetrical radii (50px 50px 50px 12px) that flip on hover with a 0.3s ease transition. Use 6-second floating animations for decorative badges. Scroll animations: Implement 'reveal-up' fade-in transitions with 30px Y-translation."
  },
  "layout_and_structure": {
    "description": "A fluid vertical layout moving from a split hero section to staggered grids for work, followed by a bento-style services section and high-contrast 'process' cards.",
    "prompts": [
      {
        "part": "Navigation",
        "prompt": "Fixed header with 80% Cream (#F5F1EC) background and backdrop-blur-md. Left-aligned serif logo 'Loving MaU.' with an italic finish. Center links in Satoshi font, spacing 48px. Right-aligned 'Let's Talk' button with organic radius (50px 50px 50px 12px)."
      },
      {
        "part": "Hero Section",
        "prompt": "Two-column grid. Left: Badge with Terracotta border, large H1 heading (Gambetta, 72px-128px) featuring italicized keywords, body text at 20px, and primary CTA with arrow icon. Below CTA, include a 'Happy Clients' social proof stack with overlapping circle avatars. Right: Portrait image masked inside a morphing blob shape with two layered background blobs at 20% opacity. Include a floating 'Status' badge (200px wide) in the bottom-right corner with a pulse indicator."
      },
      {
        "part": "Featured Projects Grid",
        "prompt": "3-column staggered grid. Cards have a 40px border-radius. Top-right of each card features a 48px white circle icon button that appears and slides up on hover. Text below cards: small uppercase bold tag (Sage Green), 24px Serif title, 2-line clamped body text."
      },
      {
        "part": "Services Bento",
        "prompt": "12-column grid layout. Left 4 columns: H2 heading and description. Right 8 columns: 2x2 grid of service cards. Each card: #F5F1EC background, 32px radius, icon inside a 48px colored circle (20% opacity matching the icon color), and scale-up hover effect."
      },
      {
        "part": "Process Section",
        "prompt": "Full-width Charcoal (#3D3D3D) container with 48px rounded corners. Split layout: Left features an image rotated -2 degrees with a floating circular badge; Right features light text (#E8E0D5), H2 heading, and pill-shaped 'Mindful/Strategic' tag cloud."
      },
      {
        "part": "Contact CTA",
        "prompt": "Centered layout. Large H1 (96px) with a pulsed background glow (#C17A4D at 20% opacity). Primary email CTA is large (20px text) with an icon, paired with a secondary outlined button."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Organic Button",
      "description": "A button with asymmetrical rounding that morphs on hover.",
      "prompt": "Style: background #C17A4D, text #F5F1EC. Initial border-radius: 50px 50px 50px 12px. Hover state: border-radius: 50px 12px 50px 50px. Transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1). Transform: translateY(-2px)."
    },
    {
      "component": "Morphing Blob Mask",
      "description": "Image container that constantly changes shape slightly.",
      "prompt": "Apply an animation named 'morph' (8s ease-in-out infinite). Keyframes 0%, 100%: border-radius 60% 40% 30% 70% / 60% 30% 70% 40%. Keyframe 50%: border-radius 30% 60% 70% 40% / 50% 60% 30% 60%. Apply to image containers and background decorative elements."
    },
    {
      "component": "Noise Overlay",
      "description": "Subtle texture filter for the entire site.",
      "prompt": "Fixed 100vw/100vh div, z-index 50, pointer-events none, opacity 0.04. Background-image: SVG fractal noise with baseFrequency 0.65 and numOctaves 3."
    }
  ],
  "special_notes": "MUST use 'Gambetta' serif for all emphasis points and headers. MUST NOT use perfect circles for decorative backgrounds—always use morphing 'blob' shapes. MUST maintain high whitespace (100px+ between sections). MUST ensure the noise-overlay is fixed to the viewport to provide a consistent paper-like texture."
}