Instructions.md

Portfolio v3 Implementation Checklist

Project Setup

• Initialize new TypeScript React project
• Install and configure essential dependencies:
  • tailwindcss for styling
  • framer-motion for animations
  • next-themes for dark mode
  • react-icons for icons
• Set up ESLint and Prettier configurations
• Configure Tailwind with custom theme values
• Create base color palette for light/dark themes

Core Features

• Implement theme switching

  • Create ThemeProvider wrapper
  • Add theme toggle button with animation
  • Design color schemes for both modes
  • Ensure smooth theme transitions

• Layout & Navigation

  • Create responsive navbar
  • Design hero section
  • Implement smooth scroll navigation
  • Add page transition animations

• Project Showcase

  • Design project card component
  • Create project grid/list layout
  • Add hover animations
  • Implement project filtering system
  • Add detailed project view/modal

• Skills & Technologies

  • Create animated skill cards
  • Design technology stack visualization
  • Add progress indicators/ratings

• Contact Section

  • Build contact form
  • Add social media links
  • Implement form validation
  • Add success/error animations

Animation Ideas

• Page entrance animations
• Scroll-triggered animations
• Hover state interactions
• Micro-interactions for buttons
• Loading states and transitions
• Parallax effects

Design Elements

• Typography system
  • Select primary and secondary fonts
  • Define size scale
• Spacing system
• Component shadows
• Custom cursor effects
• Gradient combinations
• Card designs

Performance Optimization

• Implement lazy loading
• Optimize images
• Add loading states
• Minimize bundle size
• Ensure smooth animations

Testing & Deployment

• Add unit tests for components
• Test responsive design
• Cross-browser testing
• Accessibility checks
• Deploy to preferred platform

Nice-to-Have Features

• Blog section
• Interactive 3D elements
• Custom 404 page
• Easter eggs
• Analytics integration
• RSS feed

Notes

• Remember to maintain 60fps animations
• Keep accessibility in mind (contrast, keyboard navigation)
• Test dark mode thoroughly
• Consider adding personality through micro-copy
• Document component props and utilities

Resources

• Framer Motion docs: https://www.framer.com/motion/
• Tailwind docs: https://tailwindcss.com/docs
• next-themes: https://github.com/pacocoursey/next-themes
• Color palette generator: https://coolors.co/

---

Personal portfolio v3 - Making it shine! ✨