Pull Request: Site-wide Design System and UX Enhancements

kocheck commented 1 week ago

Overview

Major update focusing on design system improvements, typography refinements, and enhanced user experience across the site.

Key Changes

Design System

Implemented new color system with improved light/dark mode contrast
Refined typography scale using fluid typography with clamp()
Added consistent spacing variables and border radius tokens
Enhanced background texture handling with variable opacity
Created new work hero component with responsive image handling

Navigation & Layout

Fixed mobile navigation issues and theme toggle functionality
Improved logo highlight interactions across different sections
Enhanced navigation underline animations
Fixed theme toggle positioning on mobile devices
Added PDF download indicator for resume link

Typography & Visual Improvements

Implemented responsive type scaling
Adjusted font weights for better readability (225 dark mode, 350 light mode)
Added new hover states and cursor interactions
Enhanced text contrast and spacing
Fixed typography sizes in light mode

Content Updates

Added image guidelines to README (thumbnails and hero images)
Enhanced About page with new layout and content structure
Updated work presentation template
Added avatar component
Implemented easter egg content

Performance & Technical

Added support for PDF file handling in transitions
Improved image optimization settings
Enhanced responsive behavior across breakpoints
Updated build configuration

Bug Fixes

Fixed mobile navigation layout
Corrected light mode background texture
Fixed typography scaling issues
Resolved logo highlight functionality
Fixed theme toggle on mobile devices

Technical Details

628 additions and 214 deletions across 32 files
Major updates to SCSS structure and organization
New component architecture for work hero and avatar
Enhanced responsive image handling

Testing Checklist

[ ] Verify light/dark mode transitions
[ ] Test mobile navigation
[ ] Check responsive typography
[ ] Validate PDF download functionality
[ ] Confirm image optimization
[ ] Test easter egg functionality

Impact

This update significantly improves the overall user experience, visual consistency, and maintainability of the site while addressing various mobile and accessibility concerns.

kocheck commented 1 week ago

My edits from last night I forgot to push

netlify[bot] commented 1 week ago

Deploy Preview for kochanek-portfolio ready!

Name	Link
Latest commit	98cd1875a74333387d45445e091ecd8da35de7e7
Latest deploy log	https://app.netlify.com/sites/kochanek-portfolio/deploys/672a9bc8a3b6560008644a57
Deploy Preview	https://deploy-preview-5--kochanek-portfolio.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

kocheck / folio