[ENHANCEMENT] Implement Advanced Performance Optimization Patterns

Describe the current behavior

Currently, the application loads all components eagerly and hydrates them immediately on page load. Based on the nuxt.config.ts and component structure, we're using basic Nuxt optimizations but not leveraging advanced performance patterns. The particles background (app/components/general/Particles.vue) and form components in the edit page (app/pages/edit.vue) are examples where optimization could be beneficial.

Describe the desired improvement

Implement two key performance optimization patterns:

1. Delayed Hydration:

   • Add selective hydration for non-critical components
   • Prioritize hydration of interactive elements
   • Defer hydration of the particles background effect

2. Lazy Loading Pattern:

   • Implement lazy loading for form components in edit page
   • Add dynamic imports for heavy components
   • Set up proper loading boundaries

Why is this improvement important?

These optimizations will:

• Reduce initial JavaScript bundle size
• Improve Time to Interactive (TTI) metrics
• Enhance First Contentful Paint (FCP)
• Better resource utilization, especially important for the resume editor page
• Improved performance on lower-end devices

Alternatives Considered

1. Server Components: Could use Nuxt's server components, but they're still experimental
2. Route-based code splitting: Already implemented but not granular enough
3. Static pre-rendering: Not suitable for interactive components

Additional context

Implementation notes:

• Will require modifications to nuxt.config.ts for module configuration
• Need to update the edit page component structure in app/pages/edit.vue
• Consider using Nuxt's built-in lazy loading utilities
• Should maintain compatibility with existing Nuxt UI components