[sebastian-noel]

Pull Request

Description

The hero's negative margins and fixed logo widths pushed content off-screen at desktop and tablet sizes. Use a responsive grid, fluid title sizing, and a bounded proportional logo so the section reflows on narrower screens and when zooming in.

Type of Change

• feat: New feature
• fix: Bug fix
• chore: Maintenance (dependencies, config, etc.)
• docs: Documentation only
• style: Code style (formatting, no logic change)
• refactor: Code refactor (no new feature or fix)

Changes Made

• Remove negative offsets and abrupt logo widths; place the logo above the title and links on mobile and tablet, keeping it on the right on desktop.
• Give the hero responsive padding while preserving the other sections' existing horizontal spacing.
• Use a fluid title size and a 1.2x logo animation scale, retaining the image aspect ratio and containing it within its layout box.
• Allow the action row to wrap and add social-link labels and keyboard focus styles.

Screenshots

Desktop

Mobile

The existing navbar clipping at narrow widths is outside this hero fix.

Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have tested my changes locally
• npm run lint passes without errors
• npm run build completes successfully

Checked 320px, 390px, 768px, 1024px, and 1440px widths, plus effective viewport sizes equivalent to 80% through 400% desktop zoom. The hero text fits and the visible logo does not overlap the action controls.

Related Issues

N/A

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.