Design Revamp: Modern Personality with Enhanced Theming

[frogr]

Summary

• Implement a modern design system with warmer, personality-rich color palettes for both light and dark themes
• Refactor React components for improved modularity and maintainability
• Enhance theme persistence with cross-tab synchronization capabilities

Changes

Theme & Styling

• Dark Theme: Maintained existing colors with added glass accent variables for depth
• Light Theme: Complete overhaul with warmer sepia/paper tones (#eae4cf primary background)
• Added custom CSS variables for pills, glass effects, and improved visual hierarchy
• Enhanced theme switching with storage event listeners for cross-tab sync

Component Architecture

• Extracted ContactInfo into a dedicated component for reusability
• Created FunProjects component for better separation of concerns
• Added ThemeLayout wrapper component for consistent theming
• Simplified AboutMe and WorkExperience components by extracting sub-components
• Added DebugComponent for development assistance

Code Quality

• Removed redundant inline content from portfolio views
• Improved global theme context initialization to prevent race conditions
• Enhanced component organization following React best practices
• Maintained backwards compatibility with existing functionality

Test Plan

• Verify theme switching works correctly between light/dark modes
• Test cross-tab theme synchronization (open multiple tabs and switch themes)
• Ensure all portfolio pages render correctly with new components
• Verify responsive design on mobile devices
• Check that existing functionality remains intact
• Test navigation and sidebar interactions
• Validate color contrast meets accessibility standards

🤖 Generated with Claude Code