A modern, feature-rich developer portfolio built with React, showcasing advanced web development skills, interactive components, and cutting-edge technologies.
Portfolio Preview
- Dark/Light Theme Toggle - Seamless theme switching with Redux state management
- Framer Motion Animations - Smooth scroll-triggered animations and micro-interactions
- Solar System Background - Interactive animated background with orbiting planets and stars
- Gradient Effects - Beautiful gradient overlays and glowing elements
- Responsive Design - Fully responsive across all devices and screen sizes
- Animated Introduction - Dynamic text animations with typing effects
- Interactive Contact Buttons - Quick access to social media and contact information
- Professional Photo Display - Responsive image with hover effects
- Solar System Background - Custom animated space theme
- Personal Story - Engaging narrative with animated text reveals
- Professional Background - Detailed information about skills and experience
- Interactive Elements - Hover effects and smooth transitions
- Categorized Skills Display - Organized by Frontend, Backend, and Tools
- Interactive Skill Cards - Hover animations and visual feedback
- Technology Icons - Comprehensive tech stack with React Icons
- Progress Indicators - Visual representation of skill proficiency
- Timeline Design - Vertical timeline with animated cards
- Company Information - Detailed work experience with achievements
- Downloadable Documents - Direct links to experience letters
- Technology Tags - Highlighted tech stack for each role
- Project Showcase - Portfolio of completed projects
- Image Galleries - Visual project presentations
- Project Links - Direct access to live demos and repositories
- Music Player Integration - Spotify and YouTube embeds
- Favorite Tracks Display - Curated music selection
- Interactive Player Controls - Play, pause, and track navigation
- Intelligent Responses - AI-powered conversation about skills and experience
- Quick Response Buttons - Pre-defined conversation starters
- Real-time Typing Indicators - Simulated AI thinking process
- Contextual Information - Detailed responses about projects and skills
- Floating Chat Interface - Always accessible chat widget
- Interactive Learning - Swipe-based code review game
- Multiple Programming Languages - JavaScript, React, CSS, Python
- Educational Content - Learn coding best practices through gameplay
- Score Tracking - Monitor your coding knowledge progress
- Visual Feedback - Color-coded responses and explanations
- Sticky Navigation Bar - Always accessible menu with blur effects
- Smooth Scrolling - React Scroll integration for seamless navigation
- Mobile Menu - Responsive hamburger menu for mobile devices
- Active Section Highlighting - Visual feedback for current section
- EmailJS Integration - Functional contact form with email delivery
- Form Validation - Client-side validation with error handling
- Success Notifications - User feedback for successful submissions
- Responsive Design - Optimized for all screen sizes
- Scroll-Triggered Animations - Elements animate as they enter viewport
- Hover Effects - Interactive hover states with scale and color changes
- Page Transitions - Smooth transitions between sections
- Staggered Animations - Sequential element animations
- Fade In/Out - Smooth opacity transitions
- Slide Animations - Directional slide effects
- Scale Transforms - Interactive scaling effects
- Rotation Effects - Subtle rotation animations
- React 18.3.1 - Latest React with concurrent features
- Vite 6.0.3 - Fast build tool and development server
- JSX - Component-based architecture
- Redux Toolkit 2.5.0 - Modern Redux for state management
- React Redux 9.2.0 - React bindings for Redux
- Persistent Theme State - Theme preferences stored in Redux
- Tailwind CSS 3.4.17 - Utility-first CSS framework
- PostCSS 8.4.49 - CSS processing
- Custom CSS Variables - Dynamic theming support
- Responsive Design - Mobile-first approach
- Framer Motion 11.15.0 - Production-ready motion library
- React Icons 5.4.0 - Comprehensive icon library
- React Scroll 1.9.0 - Smooth scrolling functionality
- Formik 2.4.6 - Form state management
- EmailJS 4.4.1 - Email service integration
- ESLint 9.17.0 - Code linting and formatting
- TypeScript Support - Type checking capabilities
- Hot Module Replacement - Fast development experience
- Node.js (v18 or higher)
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/yourusername/react-portfolio.git cd react-portfolio -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
npm run buildnpm run previewRoyal_Portfolio/
├── public/ # Static assets
│ ├── images/ # Project images and asset
├── src/
│ ├── components/ # React components
│ │ ├── aboutMeSection/ # About me components
│ │ ├── ChatBot/ # AI chatbot functionality
│ │ ├── contactMeSection/ # Contact form components
│ │ ├── experienceSection/ # Experience timeline
│ │ ├── footer/ # Footer components
│ │ ├── heroSection/ # Hero section components
│ │ ├── musicSection/ # Music player components
│ │ ├── navbar/ # Navigation components
│ │ ├── projectsSection/ # Project showcase
│ │ ├── skillsSection/ # Skills display
│ │ ├── SolarSystemBackground.jsx # Animated background
│ │ ├── TinderCardGame.jsx # Code review game
│ │ └── ThemeProvider.jsx # Theme management
│ ├── framerMotion/ # Animation variants
│ ├── state/ # Redux store and slices
│ ├── App.jsx # Main application component
│ └── main.jsx # Application entry point
├── package.json # Dependencies and scripts
├── tailwind.config.js # Tailwind CSS configuration
└── vite.config.js # Vite configuration
- Natural Language Processing - Understands user queries about skills and experience
- Contextual Responses - Provides relevant information based on user questions
- Quick Actions - Pre-defined buttons for common queries
- Realistic Interactions - Typing indicators and response delays
- Swipe Interface - Intuitive left/right swipe controls
- Educational Content - Learn coding best practices through interactive gameplay
- Multiple Languages - Covers JavaScript, React, CSS, Python, and more
- Score Tracking - Monitor progress and learning outcomes
- Visual Feedback - Color-coded responses and detailed explanations
- Primary Colors - Blue gradients and cyan accents
- Dark Theme - Deep slate backgrounds with blue highlights
- Light Theme - Clean white backgrounds with subtle gradients
- Accent Colors - Purple, pink, and green for visual interest
- Custom Font Stack - Optimized for readability
- Responsive Text Sizing - Scales appropriately across devices
- Gradient Text Effects - Eye-catching gradient text overlays
- Consistent Spacing - Tailwind CSS spacing system
- Grid Layouts - Responsive grid systems for content organization
- Flexbox Components - Flexible layouts for dynamic content
Create a .env file for EmailJS configuration:
EMAILJS_SERVICE_ID=your_service_id
EMAILJS_TEMPLATE_ID=your_template_id
EMAILJS_PUBLIC_KEY=your_public_key- Personal Information - Update content in component files
- Color Scheme - Modify Tailwind config for custom colors
- Animations - Adjust Framer Motion variants for different effects
- Content - Replace images, text, and links with your own
- Code Splitting - Automatic code splitting with Vite
- Image Optimization - Optimized images for fast loading
- Lazy Loading - Components load as needed
- Bundle Optimization - Tree shaking and minification
- Caching Strategies - Efficient caching for static assets
- Modern React Patterns - Hooks, functional components, and modern practices
- Advanced Animations - Professional-grade motion design
- Interactive Elements - Engaging user interactions throughout
- Responsive Design - Perfect experience on all devices
- Performance Focused - Optimized for speed and efficiency
- Accessibility - WCAG compliant design patterns
- SEO Optimized - Search engine friendly structure
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- LinkedIn: (https://www.linkedin.com/in/royalsachan)
- GitHub: (https://github.com/mars-alien/react-portfolio/)
- Email: royalsachaniiitm@gmail.com
Built with ❤️ using React, Framer Motion, and Tailwind CSS
This portfolio showcases modern web development techniques, interactive design patterns, and cutting-edge technologies to create an engaging user experience.