38 lines
2.2 KiB
Markdown
38 lines
2.2 KiB
Markdown
# 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.
|