feat: add randomized portfolio hero variants

docs/superpowers/specs/2026-07-08-random-hero-variations-design.md

@@ -0,0 +1,37 @@
+# Random Hero Variations Design
+
+## Goal
+
+Create six structurally different Hero Section variations for the portfolio home page. Each visit should pick one variation randomly using weighted probability, while preserving the existing visual identity: dark cinematic background, slash green accent, glass panels, mono labels, strong display typography, technical lines, and WhatsApp conversion CTA.
+
+## Approved hero variants
+
+1. **Command Center** — Main/default hero. Two-column mission-control layout with production status, deploy/operation language, and strong CTA.
+2. **Launch Sequence** — Timeline/checklist layout showing discovery → build → deploy, focused on launching MVPs and putting systems in production.
+3. **Before / After Rescue** — Split layout comparing technical chaos vs organized system, focused on legacy, instability, and rescue projects.
+4. **IoT Signal Map** — Signal/network layout with nodes and telemetry language, focused on hardware + software, APIs, dashboards, and connected products.
+5. **Diagnostic Report** — Report/audit layout with risk, architecture, and next-step panels, focused on technical diagnosis before more code.
+6. **Cinematic Portrait** — More personal consultant-led layout with trust, direct conversation, and premium technical partner positioning.
+
+## Weighted distribution
+
+- Command Center: 22
+- Launch Sequence: 18
+- Before / After Rescue: 16
+- IoT Signal Map: 15
+- Diagnostic Report: 15
+- Cinematic Portrait: 14
+
+Weights are relative. Command Center appears most often because it is the clearest commercial positioning.
+
+## Implementation approach
+
+Keep the implementation lazy and maintainable: one data array defines copy, layout, side panel, points, CTA, and scene mode. `Hero.tsx` renders the same primitives with layout-specific branches instead of six separate full components. `HeroScene.tsx` accepts a `variant` prop and changes the 3D object composition per selected hero.
+
+## Constraints
+
+- Do not expose the WhatsApp number as a complete literal.
+- Do not add dependencies.
+- Keep accessibility basics: real buttons/links, visible text, keyboard focus.
+- Avoid horizontal scroll.
+- Reduced motion must continue to hide the 3D scene.