Responsive Portfolio Grid

Create a beautiful responsive portfolio grid with animations using Next.js: PROJECT SETUP: - Create new Next.js app called "my-portfolio-grid" - Use TypeScript, Tailwind CSS v3 (IMPORTANT: use @3.x, NOT v4), and App Router - Install framer-motion for animations LAYOUT STRUCTURE: - Large, bold heading at the top: "My Creative Work" - Subtitle: "A collection of my favorite projects" - Add padding and center the content IMAGE GRID: - Create a 6-image grid layout - Use real images from Unsplash: https://source.unsplash.com/random/800x600?sig=1 (change sig=1,2,3 etc for different images) - Or use placeholder images: https://via.placeholder.com/800x600/purple/white?text=Project+1 - Responsive breakpoints: - Mobile: 1 column - Tablet (md): 2 columns - Desktop (lg): 3 columns - Use aspect-[16/9] for consistent sizing - Add subtle borders and rounded corners (rounded-lg) - Include proper alt text for accessibility ANIMATIONS WITH FRAMER MOTION: - Fade in heading from top with 0.5s duration - Fade in subtitle with 0.2s delay - Stagger grid items appearance (0.1s delay between each) - On hover: scale to 1.05 and increase shadow - Smooth transitions (0.3s duration) STYLING: - Clean white background - Subtle shadows on cards - Consistent spacing between elements - Beautiful typography

Transform the static grid into an interactive gallery: 1. Add category filters at the top: - "All", "Design", "Photography", "Development" - Smooth filter animations when switching categories - Active filter highlighted 2. Add a lightbox effect: - Click any image to open in fullscreen - Dark overlay background - Close button and ESC key to exit - Smooth zoom animation 3. Add image overlays on hover: - Project title appears - View project button - Semi-transparent dark overlay Keep all existing animations smooth.

Enhance the user experience with these additions: 1. Add skeleton loading states: - Show gray placeholder boxes while images load - Pulse animation on skeletons - Smooth transition when images appear 2. Add lazy loading: - Load images as user scrolls - Use Intersection Observer 3. Add a "Load More" button: - Initially show 6 images - Load 3 more each time - Smooth animation for new items 4. Add subtle parallax effect on scroll

Add a layout switcher to toggle between different views: 1. Grid view (current) 2. Masonry layout (Pinterest-style with varied heights) 3. List view (larger images with descriptions) 4. Carousel view (horizontal scrolling) Add smooth transitions between layout changes using Framer Motion's layout animations. Include toggle buttons at the top right to switch views.

Polish for a professional portfolio: 1. Add a hero section above the grid: - Your name and title - Brief introduction - Social media links 2. Add footer with: - Contact information - Copyright notice - Back to top button 3. Performance optimizations: - Use next/image for optimization - Add blur placeholders - Optimize for Core Web Vitals 4. Make it fully accessible: - Keyboard navigation - Screen reader friendly - Focus indicators