Premium Portfolio Website - Desheelabs
A stunning, feature-rich portfolio website built with modern web technologies.
Features:
- Design & Animations
- Particles.js** - Interactive particle background
- AOS (Animate On Scroll)** - Smooth scroll animations
- GSAP** - Professional animations with ScrollTrigger
- Custom Cursor** - Unique animated cursor effect
- Dark/Light Mode** - Theme toggle with localStorage
- Morphing Blob** - Animated profile image background
- 3D Tilt Effect** - Interactive card hover effects
- Magnetic Buttons** - Buttons that follow mouse movement
- Typing Effect** - Dynamic text animation
- Floating Animations** - Smooth floating elements
- Progress Bars** - Animated skill progress indicators
- Counter Animation** - Number counting animation
Responsive Design
- Mobile First** - Optimized for all devices
- Hamburger Menu** - Mobile navigation
- Touch Friendly** - Optimized for touch devices
- Adaptive Layout** - Grid system that adapts to screen size
Sections:
1-Hero Section
- Animated typing effect
- Particle background
- Statistics counters
- Social media links
- CTA buttons
2-About Section
- Professional description
- Experience badge
- Feature highlights
- Call-to-action
3-Skills Section
- 6 Core skills
- Progress bars
- Hover effects
- 3D tilt cards
4-Services Section
- 4 Main services
- Detailed descriptions
- Feature lists
- Hover animations
5-Projects Section
- 6 Featured projects
- Category filtering
- Project cards with overlay
- Technology tags
6-Testimonials Section
- Auto-sliding carousel
- Navigation dots
- Client reviews
- Star ratings
7-Contact Section
- Contact form
- Contact information
- Social links
- Form validation
8-Footer
- Quick links
- Social media
- Copyright info
Interactive Features:
- Smooth Scrolling** - Smooth page navigation
- Active Navigation** - Highlights current section
- Scroll to Top** - Quick return to top
- Project Filter** - Filter projects by category
- Form Validation** - Contact form validation
- Lazy Loading** - Optimized image loading
- Auto Slider** - Automatic testimonial rotation
- Hover Effects** - Interactive hover animations
- Loading Screen** - Professional loader
- Scroll Indicator** - Animated scroll down arrow
Technologies Used:
- HTML5** - Semantic markup
- CSS3** - Modern styling with CSS Grid & Flexbox
- JavaScript (ES6+)** - Modern JavaScript
- Particles.js** - Interactive particles
- AOS Library** - Scroll animations
- GSAP** - Professional animations
- ScrollTrigger** - Scroll-based animations
- Font Awesome** - Icon library
- Google Fonts** - Poppins font family
Color Scheme:
- Primary: `#6366f1` (Indigo)
- Secondary: `#8b5cf6` (Purple)
- Accent: `#f59e0b` (Amber)
- Gradients: Multiple stunning gradients
File Structure:
portfolio/
├── index.html # Main HTML file
├── styles.css # Complete styling
├── script.js # All JavaScript functionality
└── README.md # Documentation
```
Getting Started:
1. **Open the website**
- Simply open `index.html` in any modern browser
2. **Customize**
- Edit `index.html` for content
- Modify `styles.css` for styling
- Update `script.js` for functionality
Customization Guide:
Change Colors
Edit CSS variables in `styles.css`:
```css
:root {
--primary-color: #6366f1;
--secondary-color: #8b5cf6;
--accent-color: #f59e0b;
}
```
Update Content:
- Personal info: Edit text in `index.html`
- Skills: Modify `.skill-card` sections
- Projects: Update `.project-card` sections
- Images: Replace placeholder images
Modify Animations:
- AOS settings: `script.js` line 1-6
- GSAP animations: `script.js` line 577+
- Particles: `script.js` line 11-99
Performance Optimizations
- Debounced scroll events
- Lazy loading animations
- Optimized CSS
- Minimal dependencies
- Efficient animations
- Mobile optimized
Browser Support:
- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ✅ Mobile browsers
Features Breakdown:
Premium Animations
- GSAP Timeline** - Coordinated animations
- ScrollTrigger** - Scroll-based triggers
- Stagger Effects** - Sequential animations
- Easing Functions** - Smooth transitions
- 3D Transforms** - Depth effects
Advanced Interactions
- Mouse Tracking** - Custom cursor
- Hover States** - Multiple hover effects
- Click Effects** - Interactive feedback
- Scroll Detection** - Auto-hide navbar
- Touch Support** - Mobile gestures
Professional Design:
- Typography** - Poppins font hierarchy
- Color Theory** - Complementary palette
- White Space** - Balanced layout
- Consistency** - Unified design system
- Accessibility** - Semantic HTML
Tips:
- Images**: Add your profile photo by replacing placeholder
- Links**: Update social media links with your profiles
- Contact**: Configure form to send emails
- SEO**: Update meta tags for better search ranking
- Analytics**: Add Google Analytics for tracking
Advanced Features:
- Particle interaction on hover/click
- Dynamic theme switching
- localStorage for preferences
- Smooth page transitions
- Intersection Observer API
- Modern ES6+ JavaScript
- CSS Grid & Flexbox layouts
- Custom properties (CSS variables)
Statistics:
- Lines of Code**: 2500+
- Animations**: 30+
- Sections**: 8
- Interactive Elements**: 50+
- Responsive Breakpoints**: 3
- Color Variations**: 10+
Credits:
Designed & Developed by **Raviranjan Kumar**
Company: **Desheelabs**
Website: Premium Portfolio Template
License:
This is a custom portfolio template. Feel free to use and modify for personal or commercial projects.
---
**Built with ❤️ using HTML, CSS & JavaScript**
For any questions or support, contact: desheelabs@gmail.com
