feat: add randomized portfolio hero variants

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

@@ -0,0 +1,61 @@
+# Random Hero Variations Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build six weighted, randomly selected Hero Section layouts with matching 3D scene modes.
+
+**Architecture:** Add data-driven hero variant configuration in `Hero.tsx`, choose a variant once on client mount, and render layout-specific panel/accent components from that config. Update `HeroScene.tsx` to accept a scene variant prop and switch geometry composition without adding dependencies.
+
+**Tech Stack:** Next.js, React 19, TypeScript, Framer Motion, @react-three/fiber, @react-three/drei, Three.js.
+
+---
+
+### Task 1: Add variant data and weighted picker
+
+**Files:**
+- Modify: `app/components/Hero.tsx`
+
+- [ ] Define `HeroVariantId`, `HeroSceneVariant`, and `HeroVariant` types.
+- [ ] Add six approved variant objects with copy, points, proof items, side panel mode, layout mode, CTA text, and weights.
+- [ ] Add `pickWeightedHeroVariant()` using `Math.random()` and relative weights.
+- [ ] Keep `HERO_VARIANTS[0]` as deterministic SSR/default fallback.
+
+### Task 2: Render six hero layouts from shared primitives
+
+**Files:**
+- Modify: `app/components/Hero.tsx`
+
+- [ ] Replace fixed hero text with selected variant data.
+- [ ] Add layout-specific class maps for Command Center, Launch Sequence, Rescue Split, IoT Signal Map, Diagnostic Report, and Cinematic Portrait.
+- [ ] Add side panel renderer that draws distinct visual panels for each mode using existing CSS/Tailwind utilities.
+- [ ] Keep primary WhatsApp CTA and secondary cases/CV actions.
+
+### Task 3: Parameterize the 3D scene
+
+**Files:**
+- Modify: `app/components/cinematic/HeroScene.tsx`
+
+- [ ] Export/accept a `HeroSceneVariant`-compatible prop locally as string union.
+- [ ] Pass the selected scene mode from `Hero.tsx` into `HeroScene`.
+- [ ] Change floating geometry positions/geometries per scene mode.
+- [ ] Keep reduced motion behavior unchanged: no `HeroScene` render when reduced motion is enabled.
+
+### Task 4: Update tests
+
+**Files:**
+- Modify: `app/components/Hero.test.tsx`
+- Modify: `app/components/Hero.reducedMotion.test.tsx`
+
+- [ ] Update assertions to current commercial CTA/copy.
+- [ ] Assert at least one approved hero layout renders.
+- [ ] Assert CTA remains a button and cases/CV remain available.
+- [ ] Assert reduced-motion content still renders without animation-specific failures.
+
+### Task 5: Verify
+
+**Commands:**
+- `pnpm exec tsc --noEmit --pretty false`
+- `pnpm test -- Hero.test.tsx Hero.reducedMotion.test.tsx --runInBand`
+- `pnpm build`
+
+**Expected:** all commands exit 0.

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.