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

Command Center — Main/default hero. Two-column mission-control layout with production status, deploy/operation language, and strong CTA.
Launch Sequence — Timeline/checklist layout showing discovery → build → deploy, focused on launching MVPs and putting systems in production.
Before / After Rescue — Split layout comparing technical chaos vs organized system, focused on legacy, instability, and rescue projects.
IoT Signal Map — Signal/network layout with nodes and telemetry language, focused on hardware + software, APIs, dashboards, and connected products.
Diagnostic Report — Report/audit layout with risk, architecture, and next-step panels, focused on technical diagnosis before more code.
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.

2.2 KiB Raw Blame History