mirror of
https://github.com/mmahdium/portfolio.git
synced 2026-08-16 21:14:31 +03:30
98 lines
3.4 KiB
Markdown
98 lines
3.4 KiB
Markdown
# Implementation Plan
|
|
|
|
- [x] 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_
|
|
|
|
- [x] 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_
|
|
|
|
- [x] 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_
|