A modern, responsive portfolio website built with React.js, featuring a beautiful 3D background, smooth animations, and comprehensive sections showcasing skills, projects, and achievements.
- Modern React Architecture: Built with React 18 and functional components
- 3D Background: Interactive Three.js background with stars and infinity curve
- Responsive Design: Mobile-first approach with Tailwind CSS utilities
- Smooth Animations: Scroll-triggered animations and transitions
- Interactive Components: LeetCode statistics modal, typing effects, and more
- Performance Optimized: Efficient rendering and lazy loading
src/
├── components/ # React components
│ ├── SideNavigation.js # Side navigation menu
│ ├── Background3D.js # Three.js 3D background
│ ├── Hero.js # Hero section with typing effect
│ ├── About.js # About section
│ ├── Experience.js # Work experience timeline
│ ├── Education.js # Education details
│ ├── Projects.js # Featured projects grid
│ ├── Research.js # Research work
│ ├── Patents.js # Patents & innovations
│ ├── Achievements.js # Achievements & awards
│ ├── Skills.js # Technical skills with progress bars
│ ├── Certifications.js # Professional certifications
│ ├── Publications.js # Research publications
│ ├── Volunteering.js # Volunteering activities
│ ├── Contact.js # Contact section
│ ├── Footer.js # Footer
│ └── LeetCodeModal.js # LeetCode statistics modal
├── App.js # Main App component
├── index.js # React entry point
├── index.css # Global styles
└── App.css # App-specific styles
public/
├── index.html # HTML template
└── manifest.json # PWA manifest
- Frontend: React 18, JavaScript (ES6+)
- Styling: CSS3, Tailwind CSS utilities
- 3D Graphics: Three.js
- Icons: Font Awesome
- Fonts: Google Fonts (Inter, JetBrains Mono, Playfair Display)
- Build Tool: Create React App
- Hero: Animated typing effect with call-to-action buttons
- About: Personal introduction and technology stack
- Experience: Professional work timeline
- Education: Academic background and achievements
- Projects: Featured projects with technologies used
- Research: Current and completed research work
- Patents: Patent applications and innovations
- Achievements: Awards, competitions, and LeetCode stats
- Skills: Technical skills with animated progress bars
- Certifications: Professional certifications
- Publications: Research papers and publications
- Volunteering: Community involvement and events
- Contact: Get in touch section
- Node.js (v14 or higher)
- npm or yarn
-
Clone the repository
git clone <repository-url> cd portfolio-react
-
Install dependencies
npm install
-
Start development server
npm start
-
Build for production
npm run build
Update the LeetCode username in src/components/LeetCodeModal.js:
const LEETCODE_CONFIG = {
username: 'YOUR_LEETCODE_USERNAME', // Update this
displayName: 'Your Name',
// ... other config
};- Colors: Modify CSS variables in
src/index.css - Content: Update component data in respective component files
- Styling: Modify
src/App.cssfor layout adjustments
The portfolio is fully responsive with:
- Mobile-first approach
- Collapsible side navigation on mobile
- Optimized 3D background for different devices
- Adaptive grid layouts
- Touch-friendly interactions
- Interactive starfield with 15,000+ stars (desktop) / 5,000+ stars (mobile)
- Scroll-reactive infinity curve tracer
- Performance optimized for mobile devices
- Smooth animations and transitions
- Scroll-triggered animations using Intersection Observer
- Typing effect in hero section
- Skill progress bar animations
- Smooth page transitions
- LeetCode statistics modal with real-time data
- Smooth scrolling navigation
- Hover effects on cards and buttons
- Responsive side navigation
- Lazy Loading: Components load as needed
- Optimized 3D: Reduced complexity on mobile devices
- Efficient Rendering: React optimization techniques
- CSS Animations: Hardware-accelerated animations
- Responsive Images: Optimized for different screen sizes
- No sensitive data exposed in client-side code
- Secure external links with
rel="noopener noreferrer" - Sanitized user inputs
- HTTPS enforcement for external resources
This project is open source and available under the MIT License.
Contributions are welcome! Please feel free to submit a Pull Request.
- Email: adityasuryawanshi4040@gmail.com
- LinkedIn: Aditya Suryawanshi
- GitHub: adi4040
- Three.js community for 3D graphics library
- Font Awesome for beautiful icons
- Google Fonts for typography
- React community for the amazing framework
Built with ❤️ by Aditya Suryawanshi