A beautiful, responsive portfolio website showcasing my journey as a Software Engineer and Full Stack Developer. Built with modern web technologies and optimized for performance.
- Responsive Design: Seamlessly adapts to all devices (mobile, tablet, desktop)
- Smooth Animations: CSS transitions, hover effects, and scroll animations
- Interactive Navigation: Smart header with smooth scroll-to-section functionality
- Professional Layout: Clean, modern aesthetic with gradient backgrounds
- Profile Photo Integration: High-quality professional photos with hover effects
- Next.js 15: Latest framework with Turbopack for blazing fast performance
- TypeScript: Full type safety and enhanced developer experience
- Tailwind CSS: Utility-first CSS framework for rapid UI development
- Image Optimization: Next.js Image component with automatic optimization
- SEO Optimized: Proper metadata, semantic HTML, and search engine friendly
- Dynamic Header: Transparent to solid transition on scroll with mobile hamburger menu
- Hero Section: Professional photo with animated call-to-action buttons
- Enhanced About: Three-column layout with large profile photo and decorative elements
- Project Showcase: Interactive cards with hover effects and external links
- Contact Form: Functional form with mailto integration
- Scroll-to-Top: Smooth scrolling button appears on scroll
- 404 Page: Custom error page with navigation options
-
Clone the repository
git clone https://github.com/shauryag2002/portfolio.git cd portfolio -
Install dependencies
npm install # or yarn install -
Start development server
npm run dev # or yarn dev -
Open in browser
http://localhost:3000
# Build the application
npm run build
# Start production server
npm start
- Professional Photo: High-quality profile image (
shaurya.jpg) with hover effects - Introduction: Name, title, and professional summary
- Contact Info: Location and phone number
- Social Links: Direct links to GitHub, LinkedIn, and email
- Call-to-Action: Prominent contact and portfolio buttons
- Enhanced Layout: Three-column layout with large profile photo
- Professional Story: Detailed background and experience
- Quick Facts: Highlighted achievements and statistics
- Decorative Elements: Visual enhancements with gradient backgrounds
- Profile Integration: Professional photo with decorative elements
Current Position: SDE-1 at 4 Way Technologies (Aug 2024 - Present)
- Developed Chatreal app with 4k+ downloads (Android & iOS)
- Created 3D character animations using react-three-fiber
- Reduced app crashes through performance optimization
- Implemented dynamic themes with Redux state management
Previous: Full Stack Developer Intern at H3A Business Solutions (Apr - Jul 2023)
- Built projects with React.js, Node.js, MongoDB
- Integrated payment gateways (Razorpay, PayU Money)
- Improved performance by 25% through optimization
- Enhanced database queries reducing response times by 20%
|
Chatreal |
real-time-monaco |
|
generate-apk |
Joy Of Tails & Parallaxplay
|
Languages: TypeScript, JavaScript, Python, SQL, HTML, CSS Frontend: React.js, Next.js, Redux, Recoil, Tailwind CSS Backend: Node.js, Express.js, MongoDB, PostgreSQL, Prisma Mobile: React Native, Expo, Android Studio, Xcode Tools: Docker, Firebase, Git, Cloudinary, Digital Ocean, Sentry
- Interactive Form: Validated contact form with mailto integration
- Direct Links: Phone, email, and social media connections
- Professional Info: Location and availability details
The portfolio is designed to use your profile photo (shaurya.jpg) in two main sections:
- Hero Section: Circular profile photo with hover effects
- About Section: Large rectangular photo with decorative elements
Photo Requirements:
- Format: JPG/PNG
- Hero Section: 512x512px (square, will be made circular)
- About Section: 512x640px (portrait orientation recommended)
- Quality: High resolution for crisp display on all devices
- File Name:
shaurya.jpg(or update import paths in components)
Location: Place your photo in the public/ folder as shaurya.jpg
The portfolio uses a professional blue-based color scheme:
/* Primary Colors */
--primary-blue: #2563eb
--primary-purple: #7c3aed
--gradient-from: #dbeafe
--gradient-to: #e0e7ffTo customize colors:
- Edit Tailwind classes in components (
bg-blue-600,text-blue-600, etc.) - Update gradient classes (
from-blue-50 to-indigo-100) - Modify hover effects and transitions
Update personal information in these files:
components/Hero.tsx- Name, title, description, contact infocomponents/About.tsx- Personal story and achievementscomponents/Experience.tsx- Work experience and accomplishmentscomponents/Projects.tsx- Project details and linkscomponents/Contact.tsx- Contact information and formapp/layout.tsx- SEO metadata and page titles
- Next.js Image Optimization: Automatic image optimization and lazy loading
- Turbopack: Ultra-fast bundling and hot reload
- Code Splitting: Automatic code splitting for optimal loading
- CSS Optimization: Tailwind CSS purging and minification
- SEO Optimization: Meta tags, semantic HTML, and sitemap
- Performance: 95+
- Accessibility: 100
- Best Practices: 100
- SEO: 100
- ✅ Professional Photo Integration: Real profile photos in Hero and About sections
- ✅ Mobile-First Design: Fully responsive across all devices
- ✅ Performance Optimized: Next.js 15 with Turbopack
- ✅ SEO Ready: Proper meta tags and structured data
- ✅ Interactive Elements: Smooth scrolling, hover effects, animations
- ✅ Contact Integration: Functional contact form with email integration
- ✅ Project Showcase: Live links to real projects and GitHub repositories
- ✅ Professional Experience: Detailed work history with achievements
- ✅ Skills Display: Comprehensive technical skills overview
- ✅ Social Integration: Direct links to LinkedIn, GitHub, and email
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your 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 open source and available under the MIT License.
Shaurya Gupta
Software Engineer & Full Stack Developer
📧 guptashaurya2002@gmail.com
📱 +91-997-143-92-46
📍 New Delhi, India
- Design Inspiration: Modern portfolio trends and best practices
- Icons: Lucide React for beautiful, consistent icons
- Framework: Next.js for the amazing React framework
- Styling: Tailwind CSS for rapid UI development
- Deployment: Vercel for seamless deployment experience
⭐ Star this repository if you found it helpful!
Made with ❤️ by Shaurya Gupta