portfolio/.kiro/specs/page-transitions-ux/tasks.md

Implementation Plan

• 1. Enable Nuxt 4 View Transitions and configure global page transitions

  • Enable experimental.viewTransition flag in nuxt.config.ts
  • Configure pageTransition and layoutTransition settings
  • Add View Transitions API polyfill detection
  • Requirements: 1.1, 1.2, 1.3, 1.4, 5.5

• 2. Create global transition CSS styles

  • Create app/assets/css/transitions.css file

  • Define CSS custom properties for transition timing and durations

  • Implement page transition classes (.page-enter-active, .page-leave-active, etc.)

  • Add layout transition classes

  • Implement prefers-reduced-motion media query support

  • Import transitions.css in app/assets/css/main.css

  • Requirements: 1.1, 1.2, 1.4, 5.3, 5.4

• 3. Enhance NuxtLoadingIndicator and add loading states

  • Review current NuxtLoadingIndicator configuration in app.vue
  • Add custom loading spinner component for long operations
  • Create skeleton loader component for blog posts
  • Add loading state transitions with fade effects
  • Requirements: 2.1, 2.2, 2.3, 2.4

• 4. Add component-level animations to BlogCard

  • Add hover state with lift effect and shadow to app/components/blog/BlogCard.vue
  • Implement staggered fade-in animation for blog card list
  • Use CSS transforms for hardware acceleration
  • Add transition classes using Tailwind CSS 4 utilities
  • Requirements: 3.1, 3.2, 3.3, 3.4

• 5. Enhance BlogNavigation with smooth animations

  • Add smooth hover states to prev/next buttons in app/components/blog/BlogNavigation.vue

  • Implement icon animations on hover

  • Add transition effects for button states

  • Requirements: 3.1, 3.3

• 6. Improve LanguageSwitcher transitions

  • Add dropdown animation with scale and fade to app/components/LanguageSwitcher.vue

  • Implement smooth active state transitions

  • Preserve scroll position during language switch

  • Add crossfade transition for content

  • Requirements: 4.1, 4.2, 4.3, 4.4

• 7. Add TopNav scroll-based animations

  • Implement smooth scroll-based appearance/disappearance in app/components/common/TopNav.vue
  • Add mobile menu slide-in animation
  • Use CSS transforms for smooth transitions
  • Requirements: 3.1, 3.3, 3.4

• 8. Create View Transitions API composable

  • Create app/composables/useViewTransition.ts
  • Implement browser support detection
  • Add manual transition control function
  • Provide fallback for unsupported browsers
  • Requirements: 5.1, 5.2, 5.5

• 9. Add View Transitions API custom animations

  • Define custom view transition names for specific elements
  • Add CSS for view transition animations
  • Implement cross-fade effects for content areas
  • Add slide animations for navigation elements
  • Requirements: 5.5

• * 10. Test transitions across browsers and devices

  • Test on Chrome/Edge (with View Transitions API)
  • Test on Firefox and Safari (CSS fallback)
  • Test on mobile browsers (iOS Safari, Chrome Mobile)
  • Verify reduced motion preferences are respected
  • Test keyboard navigation during transitions
  • Requirements: 5.4

• * 11. Performance testing and optimization

  • Measure FCP, LCP, CLS, and TTI metrics
  • Use Chrome DevTools Performance tab to verify 60fps
  • Monitor paint and composite operations
  • Optimize animation complexity for mobile devices
  • Requirements: 3.4, 5.3