add theme toggle functionality and update navbar structure

[ichdamola]

Add Dark/Light Mode Theme Switcher

Summary

This PR introduces a fully functional dark/light mode theme switcher to the portfolio website, allowing users to toggle between light and dark themes with their preference persisted across browser sessions.

What's Changed

New Features

• Theme Toggle Switch: Added an intuitive toggle switch in the navigation bar with sun/moon icons
• Dark Theme: Implemented a complete dark color scheme optimized for readability and visual appeal
• Persistent Theme Selection: User's theme preference is saved in localStorage and restored on page reload
• Smooth Transitions: All theme changes include smooth 0.3s CSS transitions for professional UX

Technical Improvements

• CSS Variables Architecture: Refactored all colors to use CSS custom properties for maintainable theming
• Responsive Design: Theme toggle works seamlessly across desktop and mobile devices

Design Details

Light Theme (Default)

• Clean white background with dark text
• Original pink accent colors (#FC6C85) for links and highlights
• Light gray borders and subtle visual separations

Dark Theme

• Rich dark background (#1a1a1a) with light text (#e0e0e0)
• Enhanced pink accents (#ff7a9a) for better contrast in dark mode
• Carefully chosen border colors (#555) for optimal dark mode readability

Implementation Details

Files Modified

• index.html - Added theme toggle UI and JavaScript functionality
• style.css - Complete CSS restructure with theme variables and dark mode styles

Key Technical Features

// Theme persistence
localStorage.setItem('theme', selectedTheme);

// Smooth theme switching via CSS custom properties
document.documentElement.setAttribute('data-theme', newTheme);

CSS Architecture

:root {
  --bg-color: #ffffff;
  --text-color: rgba(51, 51, 51, 0.8);
  /* ... other light theme variables */
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  /* ... dark theme overrides */
}

Responsive Behavior

• Desktop: Toggle positioned in the navigation bar alongside menu items
• Mobile: Toggle repositioned below navigation for optimal touch interaction
• All screen sizes: Maintains visual hierarchy and accessibility

Testing Checklist

• Theme toggle functionality works correctly
• Theme preference persists across browser sessions
• All UI elements adapt properly to both themes
• Smooth transitions work on all browsers
• Responsive behavior verified on mobile and desktop
• Accessibility maintained with proper contrast ratios
• No JavaScript errors in console
• CSS validates without warnings

User Experience Impact

• Improved Accessibility: Dark mode reduces eye strain in low-light conditions
• Personalization: Users can choose their preferred viewing experience
• Modern Standards: Meets current web design expectations for theme switching
• Seamless Integration: Feature feels native to the existing design language

Related Issues

Addresses user experience enhancement for better accessibility and modern web standards compliance.

Screenshots

Light Mode (Default)

Shows clean, professional appearance with original color scheme

Dark Mode

Shows sophisticated dark theme with enhanced pink accents

Toggle Switch

Demonstrates intuitive sun/moon toggle control

Deployment Notes

• No media changes required
• No environment variables needed
• Static assets only - ready for immediate deployment
• Backwards compatible - gracefully falls back to light mode

---

Ready for review and merge!