https://github.com/codewithdinesh/dinesh
https://github.com/codewithdinesh/dinesh
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codewithdinesh/dinesh
- Owner: codewithdinesh
- License: mit
- Created: 2024-07-05T18:33:54.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-05-31T21:48:36.000Z (6 months ago)
- Last Synced: 2025-06-01T09:04:54.811Z (6 months ago)
- Language: TypeScript
- Homepage: https://dineshrathod.vercel.app
- Size: 41.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dinesh Rathod - Portfolio Documentation
## Enhanced Components
This portfolio website has been enhanced with interactive and visually appealing components to create a more engaging user experience.
### Skills Section Enhancements
The skills section now includes several interactive display options:
#### Enhanced Skill Cards
- Interactive skill cards with hover animations
- Detailed information display with expandable details
- Visual indicators for skill proficiency levels
- Category filtering and search functionality
#### 3D Effect Skill Cards
- Tilt effect that follows mouse movement
- Depth perception with 3D transforms
- Reflective shine effect on hover
- Interactive visual feedback
#### How to Use Enhanced Skill Components
1. Use the standard component:
```tsx
// In your page or section file
import SkillsList from '@/components/Skills/Skills';
// In your JSX
```
2. To use the showcase with both standard and 3D cards:
```tsx
// Import the skill showcase component
import SkillShowcase from '@/components/Skills/SkillShowcase';
import { enhancedSkillCategories } from "@/config/skills";
// Get all skills for showcase
const allSkills = enhancedSkillCategories.flatMap(category => category.skills);
// In your JSX
```
3. To use the enhanced skills list with filtering:
```tsx
// Import the enhanced skills list component
import EnhancedSkillsList from '@/components/Skills/EnhancedSkillsList';
import { enhancedSkillCategories } from "@/config/skills";
// In your JSX
```
### Contact Section Enhancements
The contact section has been enhanced with:
- Tabbed interface for different contact methods
- Interactive form with animated status feedback
- Social media card with hover effects
- Gradient backgrounds and transitions
### Gallery Section Enhancements
The gallery has been upgraded with:
- Masonry layout for better visual presentation
- Category filtering for easy navigation
- Image cards with hover animations
- Enhanced lightbox with zoom and captions
### Experience Section Enhancements
The experience timeline now features:
- Experience type filtering (fulltime, freelance, internship)
- Interactive timeline nodes and animations
- Glowing timeline effect
- Skill badges and hover effects
## Usage Instructions
To update the application to use the enhanced components:
1. Replace existing components in your pages:
```tsx
// Old component
import ContactSection from '@/components/contacts/ContactSection';
// New component
import EnhancedContactSection from '@/components/contacts/EnhancedContactSection';
// Use enhanced component instead
```
2. Ensure you've updated the necessary data files:
- Update experience data in `config/experience.ts`
- Update skills data in `config/skills.ts`
3. Test the website on different screen sizes to ensure responsive behavior
## Performance Considerations
- Some animations may impact performance on lower-end devices
- Consider using the `useReducedMotion` hook from Framer Motion to disable animations for users who prefer reduced motion
- Image optimizations are important for gallery performance