Designing the New Landing Hero
The landing hero is the first impression for recruiters and collaborators, so this refresh focused on clarity, motion, and a measurable performance budget.
I started by locking the viewport height to keep the hero entirely above the fold on desktop. Everything else cascaded from there—once the vertical rhythm was set, typography and motion tweaks had guardrails.
Typography & Spacing Tokens
The type stack mixes Raleway for headings and Open Sans for body copy. To keep things consistent across breakpoints, I codified a few spacing tokens and reused them across the hero and resume sections.
:root {
--space-xl: 96px;
--space-lg: 64px;
--space-md: 32px;
--hero-heading: clamp(42px, 5vw, 72px);
}
.hero-container {
padding-top: var(--space-xl);
padding-bottom: var(--space-lg);
}These tokens mean future copy changes do not require hunting through multiple media queries. The hero stays balanced even if I swap "Hello" for a longer greeting.
Motion With Budget Constraints
The typed-text effect is now capped at 16 strings and throttled to 8ms intervals. Anything heavier makes the CPU spike on low-end mobile devices. I verified the change in Chrome DevTools performance recordings, keeping the hero's animation under 3% of total scripting time.
"If it adds personality but not polish, it doesn't ship." That rule-of-thumb kept the hero playful while staying performant.
Finally, images ship in WebP where possible and the background noise texture is under 15KB. The result: the hero paints in under 1.8 seconds on a simulated 3G connection.