Here's a comprehensive and detailed prompt for your animated portfolio website:

Create a heavily animated, modern portfolio website with seamless full-page transitions and interactive 3D elements.

Core Requirements

Tech Stack:

• React.js (latest version)
• Framer Motion for smooth animations and page transitions
• Three.js for 3D animations and interactive elements
• Particles.js for dynamic background interactivity
• Responsive design optimized for mobile and desktop

Page Structure & Sections

Multi-page layout with seamless navigation:

1. Hero/Landing Page

   • Animated 3D icons floating in space
   • Interactive particle background that responds to mouse movement
   • Gradient blur overlays with smooth color transitions
   • Animated text introduction with typewriter effects
   • Call-to-action button with hover animations

2. About Page

   • Personal introduction with animated text reveals
   • Skills visualization with 3D animated progress bars/charts
   • Interactive timeline or experience showcase
   • Downloadable resume button with smooth download animation

3. Projects Page

   • 3D project cards that tilt and transform on hover
   • Each project card shows preview, tech stack, and links
   • Smooth filtering/sorting animations
   • Modal overlays with detailed project information

4. Skills Page

   • 3D animated skill icons that rotate and glow
   • Interactive skill level indicators
   • Technology logos with particle effects
   • Animated skill categories with smooth transitions

5. Contact Page

   • Interactive contact form with real-time validation
   • Email integration for direct messaging
   • Animated social media links grid
   • 3D animated contact icons

Animation & Visual Features

Background & Atmosphere:

• Dynamic particle system that reacts to cursor movement
• Gradient blur backgrounds that shift colors based on scroll position
• Smooth parallax scrolling effects
• Ambient lighting effects using Three.js

Page Transitions:

• Full-page slide transitions with unique animation styles for each page
• Smooth fade-in/fade-out effects
• 3D page flip or cube rotation transitions
• Loading animations between page changes

Interactive Elements:

• 3D hover effects on all clickable elements
• Smooth button animations with ripple effects
• Animated navigation menu with morphing icons
• Interactive cursor that changes based on hover targets

Social Integration & Links

Coding Profiles & Social Links:

• GitHub with animated contribution graph
• LinkedIn with professional network visualization
• Instagram with photo grid animation
• YouTube with video thumbnail carousel
• Twitter/X with tweet timeline
• CodePen, Stack Overflow, or other coding platforms
• Each link opens with smooth transition animations

Featured Articles Section:

• Blog post cards with 3D tilt effects
• Animated reading time and date displays
• Smooth infinite scroll or pagination
• Article preview with animated text reveals

Technical Features

Performance & Compatibility:

• Mobile-first responsive design
• Touch gesture support for mobile interactions
• Optimized 3D rendering for smooth performance
• Progressive loading for heavy animations
• Cross-browser compatibility

Dark Theme:

• Toggle switch with smooth theme transition
• Dark mode optimized color schemes
• Glowing effects and neon accents
• Particle colors that adapt to theme

Resume Download:

• Animated download button with progress indicator
• PDF generation or direct file download
• Success animation after download completion

Specific Animation Requirements

Hero Section:

• 3D floating geometric shapes or tech icons
• Particle constellation that forms and reforms
• Animated gradient text with glow effects
• Smooth camera movements in 3D space

Projects Section:

• Cards that lift and rotate in 3D space on hover
• Smooth image transitions and overlays
• Animated project statistics or metrics
• Interactive project filtering with smooth transitions

Skills Section:

• 3D skill orbs or hexagons that pulse and glow
• Animated progress rings or bars
• Particle trails following skill icons
• Interactive skill tree or network visualization

Navigation:

• Morphing hamburger menu for mobile
• Smooth page indicators with progress bars
• Animated breadcrumbs or page titles
• Floating navigation elements

User Experience Features

• Smooth scroll behavior throughout the site
• Preloader with animated logo or progress bar
• Error handling with animated feedback
• Accessibility features with reduced motion options
• SEO optimization with meta tags and structured data

Call-to-Action Elements:

• "Hire Me" button with pulsing animation
• "Let's Connect" section with social link animations
• "Download Resume" with file icon animation
• "View Projects" with arrow or pointer animations

This portfolio should feel like an interactive experience rather than a static website, with every element contributing to a cohesive, professional, and visually stunning presentation of your skills and work.