joachim/me-joachimhummel-de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portfolio): optimize navbar and experience section for mobile

Browse Source 
Task: Seite für Besucher auf Mobilgeräten optimieren (#7)

## Desktop navbar
- Added "Mehr" dropdown grouping secondary links (Kompetenzen, Stärken,
  Skills) to keep the primary nav bar uncluttered (Projekte, Erfahrung,
  Über mich stay as primary links)
- Dropdown is click-activated with chevron indicator and closes on
  outside click; all links include data-testid attributes
- No link wrapping possible with this structure on any common desktop width

## Mobile menu
- Replaced flat link list with two logical section groups:
  - "Profil": Über mich, Kompetenzen, Stärken
  - "Erfahrung & Skills": Projekte, Erfahrung, Skills
- Each group has a small uppercase label as a visual divider
- Kontakt CTA remains at the bottom separated by a border
- All 6 page sections are now reachable from the mobile menu

## Timeline cards (experience.tsx)
- Shifted timeline spine from left-6 to left-5 freeing 4px of card width
- Reduced left padding from pl-14 to pl-11 on mobile, giving ~12px extra
  card width — critical at 320–375px viewports
- Added p-3.5 sm:p-5 so cards use tighter inner padding on very small
  screens (< 640px) and normal padding on larger ones
- Added break-words + min-w-0 to role, client, and task text to prevent
  horizontal overflow from long German compound words
- Wrapped task text in a <span> so flex layout doesn't clip overflow

Replit-Task-Id: 51a5a369-3f27-4245-903a-4dc59ee1a842

## No content changes — all section copy, order, and data is unchanged
This commit is contained in:
joachimhummel
2026-05-15 16:19:25 +00:00
parent 6c490e40d0
commit 25d9767bdf
3 changed files with 123 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
artifacts/joachim-portfolio/public/opengraph.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB