Skip to content

fix: make website mobile responsive - #65

Open
dddictionary wants to merge 11 commits into
mainfrom
fix/mobile-responsive
Open

fix: make website mobile responsive#65
dddictionary wants to merge 11 commits into
mainfrom
fix/mobile-responsive

Conversation

@dddictionary

Copy link
Copy Markdown
Owner

What

Fixes mobile experience — the site was basically unusable on phones.

Structural fixes

  • Moved hamburger toggle outside the sidebar — it was inside the <aside> so it got translateX(-100%) off-screen with the sidebar, meaning users couldn't open the nav at all on mobile
  • Added backdrop overlay — tapping outside the nav closes it, scrolling locked when menu is open

Mobile CSS (@media ≤600px)

  • Hero: reduced padding, tighter name font size clamp(36px, 10vw, 52px)
  • Sections: vertical padding 100px → 60px, horizontal 32px → 20px
  • Experience cards: smaller role/description fonts
  • Guestbook form: less padding, full-width submit button
  • Blog titles, pills, skill tags: slightly smaller for fit
  • 100dvh: uses dynamic viewport height so mobile browser chrome doesn't overflow the hero

Touch device fixes

  • Hobby tiles: on touch devices (no hover), overlay text is always visible with darkened image — no more invisible content
  • Removed tap highlight on toggle/backdrop

Testing

All 17 tests pass.

- Replace multi-page layout with single continuous scroll
- Fixed sidebar with anchor navigation + scroll-aware active state
- Sections: hero, about, experience, education, hobbies, travels, guestbook
- Skills displayed as pill tags, hobbies as image mosaic with hover overlays
- Old routes (/work, /hobbies, etc.) redirect to /#section anchors
- Mobile-responsive sidebar with hamburger toggle
- Keep existing dark theme palette (Syne + IBM Plex Mono)
- All DB tables, migrations, and API endpoints unchanged
- Tests updated: 16/16 passing
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