v2.0.3 - Navigation Header Redesign

🎨 Navigation Header Redesign v2.0.2

A complete redesign of the navigation header featuring dual-state transitions, enhanced mobile experience, and modern glassmorphism effects.

✨ Highlights

Dual-State Navigation Header

• Top of page: Full-width layout with all 5 navigation links (About, Blog, Skills, Projects, Contact)
• After scrolling: Compact centered pill with rounded borders, backdrop blur, and 3 essential links (About, Blog, Contact)
• Smooth 300ms transitions triggered at 10px scroll threshold

Mobile Navigation Overhaul

• Fullscreen overlay replacing dropdown menu
• Animated hamburger → X icon morphing
• Body scroll lock when menu open
• Slide-right hover effects on navigation items
• Integrated theme toggle in footer

Desktop Enhancements

• Expanding underline hover effects
• Smooth color transitions on interaction
• India timezone indicator with flag (🇮🇳 IST)
• Optimized spacing across all breakpoints

🛠️ Technical Changes

New Files

• src/components/ui/menu-toggle-icon.tsx
• src/hooks/use-scroll.ts

Modified Files

• src/components/site-header.tsx (complete rewrite)
• src/components/mobile-nav.tsx
• src/components/desktop-nav.tsx
• src/components/nav.tsx
• src/components/india-time.tsx
• src/components/toggle-theme.tsx
• src/components/command-menu.tsx
• src/components/icons.tsx
• src/config/site.ts
• src/app/(app)/layout.tsx
• package.json (v1.2.0 → v2.0.2)

📐 Specifications

Feature	Value
Mobile Breakpoint	768px (md)
Scroll Trigger	10px
Animation Duration	300ms
Navigation States	2 (default, scrolled)

🧹 Code Quality

• ✅ Removed all commented code
• ✅ Removed unused dependencies (@radix-ui/react-slot)
• ✅ ESLint: All checks passing
• ✅ TypeScript: No errors
• ✅ Build: Successful (37 pages)

📱 Responsive Design

Screen Size	Behavior
< 768px	Fullscreen mobile overlay
≥ 768px	Inline desktop navigation
Scrolled	Compact centered pill design
Default	Full-width transparent header

💡 UX Improvements

• Reduced visual clutter when scrolling
• Better spatial awareness with timezone
• Improved touch targets for mobile
• Consistent interaction feedback
• Smooth state transitions

📊 Changes Summary

• 13 files changed
• +299 lines added
• -150 lines removed
• 2 new components
• 11 components updated

---

Built with Next.js 15, TypeScript, Tailwind CSS v4, and Framer Motion

Full Changelog: v1.2.0...v2.0.2

Full Changelog: v2.0.3...v2.0.3

v2.0..2 - Modern Navigation Header with Scroll-Based Transitions

🎨 Navigation Header Redesign v2.0.2

A complete redesign of the navigation header featuring dual-state transitions, enhanced mobile experience, and modern glassmorphism effects.

✨ Highlights

Dual-State Navigation Header

• Top of page: Full-width layout with all 5 navigation links (About, Blog, Skills, Projects, Contact)
• After scrolling: Compact centered pill with rounded borders, backdrop blur, and 3 essential links (About, Blog, Contact)
• Smooth 300ms transitions triggered at 10px scroll threshold

Mobile Navigation Overhaul

• Fullscreen overlay replacing dropdown menu
• Animated hamburger → X icon morphing
• Body scroll lock when menu open
• Slide-right hover effects on navigation items
• Integrated theme toggle in footer

Desktop Enhancements

• Expanding underline hover effects
• Smooth color transitions on interaction
• India timezone indicator with flag (🇮🇳 IST)
• Optimized spacing across all breakpoints

🛠️ Technical Changes

New Files

• src/components/ui/menu-toggle-icon.tsx
• src/hooks/use-scroll.ts

Modified Files

• src/components/site-header.tsx (complete rewrite)
• src/components/mobile-nav.tsx
• src/components/desktop-nav.tsx
• src/components/nav.tsx
• src/components/india-time.tsx
• src/components/toggle-theme.tsx
• src/components/command-menu.tsx
• src/components/icons.tsx
• src/config/site.ts
• src/app/(app)/layout.tsx
• package.json (v1.2.0 → v2.0.2)

📐 Specifications

Feature	Value
Mobile Breakpoint	768px (md)
Scroll Trigger	10px
Animation Duration	300ms
Navigation States	2 (default, scrolled)

🧹 Code Quality

• ✅ Removed all commented code
• ✅ Removed unused dependencies (@radix-ui/react-slot)
• ✅ ESLint: All checks passing
• ✅ TypeScript: No errors
• ✅ Build: Successful (37 pages)

📱 Responsive Design

Screen Size	Behavior
< 768px	Fullscreen mobile overlay
≥ 768px	Inline desktop navigation
Scrolled	Compact centered pill design
Default	Full-width transparent header

💡 UX Improvements

• Reduced visual clutter when scrolling
• Better spatial awareness with timezone
• Improved touch targets for mobile
• Consistent interaction feedback
• Smooth state transitions

📊 Changes Summary

• 13 files changed
• +299 lines added
• -150 lines removed
• 2 new components
• 11 components updated

---

Built with Next.js 15, TypeScript, Tailwind CSS v4, and Framer Motion

Full Changelog: v1.2.0...v2.0.2