Mobile Hero Component Preview
Above-the-fold hero component for homepage — optimized for mobile
Design Intent
This hero component follows the brand voice guidelines: dry but genuine, technical but accessible, conversational professional. Three variants explore different approaches to the opening message.
Variant 1: Direct Intro
Uses first person with straightforward introduction. The "since before it was a household term" adds dry humor without being jokey. Brand accent line provides visual anchor.
Hi, I'm Andrew.
I like to build products with TypeScript, Python, and C++.
Variant 2: Problem Solver
Emphasizes the "pragmatic" brand pillar. Opens with what you DO, not who you are. Three-dot accent references the color palette (brand, brand-secondary, highlight).
Building intelligent systems that actually ship.
15+ years from firmware to cloud, signal processing to generative AI.
Variant 3: Understated Expert (Recommended)
Super concise headline with personality. "15+ years shipping" is concrete and aligns with voice guide. Follows "start with big picture, add depth" pattern. Highlight accent line is subtle and warm.
ML engineer.
15+ years shipping.
I work at the intersection of research and product—building everything from firmware-level signal processing to cloud-scale ML pipelines.
Mobile-First Approach
Vertical Rhythm
All variants use generous spacing between headline, subtext, and CTA. This ensures comfortable reading on small screens without feeling cramped.
Typography Hierarchy
Headlines use text-h1 (3rem/48px) with tight line-height. Body text uses text-body-lg (1.125rem/18px) for comfortable reading.
Color Accents
Subtle gradient background (brand to brand-secondary) provides visual interest without overwhelming. Accent elements use brand colors (brand, brand-secondary, highlight) as small visual anchors.
Voice & Tone
All variants avoid hype language and performative enthusiasm. They're conversational professional—like talking with a knowledgeable colleague over coffee.
✅ Good: "15+ years shipping" (concrete, specific)
❌ Avoid: "Passionate about ML" (performative)
Next Steps
- 1. Review the three variants on actual mobile devices
- 2. Choose the variant that best captures your voice
- 3. Iterate on copy if needed (mix and match elements)
- 4. Finalize accent style (line, dots, or minimal)
- 5. Implement on actual homepage