Skip to content

feat: improve mobile responsiveness for header and hero - #17

Merged
mattzcarey merged 3 commits into
mainfrom
feat/mobile-responsive-hero
Feb 18, 2026
Merged

feat: improve mobile responsiveness for header and hero#17
mattzcarey merged 3 commits into
mainfrom
feat/mobile-responsive-hero

Conversation

@mattzcarey

Copy link
Copy Markdown
Contributor

Summary

  • Header: hide domain text on small screens, tighter mobile padding
  • Hero: reduce height on mobile via responsive breakpoints (35vh / 45vh / 60vh)
  • Hero: dynamically adjust camera FOV based on aspect ratio so 3D text fills a consistent proportion of the screen at any viewport size
  • Hero: render FBOs at physical pixel resolution for sharp text on high-DPI mobile screens
  • Hero: scale icon card labels down on mobile (45% / 65% on phone / tablet)
  • Hero: reduce icon card count on narrow viewports (2 / 4 / 6)
  • Content sections: tighter padding on mobile
  • Housekeeping: remove previously tracked .astro/ generated files (already in .gitignore)

Test plan

  • Open site on mobile device or Chrome DevTools responsive mode at 375px, 430px, 768px, 1024px+
  • Verify 3D hero text fills width proportionally across all sizes
  • Verify solid and wireframe text layers remain aligned
  • Verify icon card labels are appropriately sized on mobile
  • Verify header hides domain text on small screens
  • Verify hero renders sharply on high-DPI (3x) screens
  • Verify desktop experience is unchanged

- Header: hide domain text on small screens, tighter mobile padding
- Hero: reduce height on mobile (35vh/45vh/60vh breakpoints)
- Hero: dynamically adjust camera FOV based on aspect ratio so 3D text
  fills a consistent proportion of the screen at any viewport size
- Hero: render FBOs at physical pixel resolution for sharp text on
  high-DPI mobile screens
- Hero: scale icon card labels down on mobile (45%/65% on phone/tablet)
- Hero: reduce icon card count on narrow viewports (2/4/6)
- Content sections: tighter padding on mobile (px-4 py-16 → sm:px-6 sm:py-24)
…onents

- Extract duplicated card layout logic into cardLayout.ts (shared constants,
  font sizing, text width estimation, card dimensions)
- Simplify GridSquare: collapse redundant color props into single accentColor,
  extract constants for icon scale and spring config
- Simplify GridSquares: extract breakpoint constants, replace inline ternaries
  with helper functions, use shared getCardDimensions/getCardCenter
- Clean up Hero/index.tsx: extract BackgroundPlane and ResponsiveFOV constants,
  remove dead commented-out animation code, link Canvas config to constants
- Net reduction of ~100 lines
@mattzcarey
mattzcarey merged commit d3ab4e9 into main Feb 18, 2026
1 check passed
@mattzcarey
mattzcarey deleted the feat/mobile-responsive-hero branch February 18, 2026 13:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant