Modern, responsive portfolio built with React, TypeScript, and cutting-edge web technologies
This is a highly maintainable, performance-optimized portfolio website that showcases projects, skills, and professional experience. The codebase has been extensively refactored using modern React patterns and best practices.
- 🎨 Clean Architecture: Component composition with separation of concerns
- 🚀 Performance First: Optimized animations, lazy loading, and efficient rendering
- 🎭 Smooth Animations: Framer Motion with GPU-accelerated transitions
- 📱 Responsive Design: Mobile-first approach with fluid layouts
- 🌓 Theme System: Dark/light mode with smooth transitions
- 📊 Live Data: Real-time GitHub integration for projects
- 🔒 Type Safe: Full TypeScript implementation
| Technology | Purpose | Why This Choice |
|---|---|---|
| React 18 | UI Framework | Modern hooks, concurrent features |
| TypeScript | Type Safety | Catches errors at compile time |
| Vite | Build Tool | Lightning fast dev server & builds |
| Tailwind CSS | Styling | Utility-first, consistent design system |
| Framer Motion | Animations | Declarative animations, great performance |
| Lucide React | Icons | Consistent icon set, tree-shakable |
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ UI Layer │ │ Business Logic │ │ Data Layer │
│ │ │ │ │ │
│ • Components │◄──►│ • Custom Hooks │◄──►│ • GitHub API │
│ • Animations │ │ • Utilities │ │ • Static Data │
│ • Styles │ │ • Context │ │ • Types │
└─────────────────┘ └─────────────────┘ └─────────────────┘
Design Principles Applied:
- 🧩 Component Composition: Small, focused components
- 🔄 Custom Hooks: Reusable stateful logic
- 🎨 Utility Functions: Consistent styling and animations
- 📊 Type Safety: TypeScript interfaces for all data
- Node.js >= 18.0.0
- npm >= 8.0.0
# 1. Clone & navigate
git clone <your-repo-url>
cd Portfolio/portfolio
# 2. Install dependencies
npm install
# 3. Start development server
npm run dev
# 4. Open browser → http://localhost:5173- ✅ Hero section loads with typewriter effect
- ✅ Skills section shows technology logos
- ✅ Theme toggle works (dark ↔ light)
- ✅ Projects load (GitHub integration)
- ✅ Smooth scroll animations
portfolio/
├── 📚 CODEBASE_DOCUMENTATION.md # Complete codebase guide
├── 🚀 DEVELOPMENT_GUIDE.md # Development & deployment guide
├── src/
│ ├── components/ # React components
│ │ ├── common/ # Reusable UI components
│ │ ├── hero/ # Hero section components
│ │ ├── skills/ # Skills section components
│ │ ├── projects/ # Projects section components
│ │ └── sections/ # Main page sections
│ ├── hooks/ # Custom React hooks
│ │ ├── useIntersectionObserver.ts
│ │ └── useProjects.ts
│ ├── utils/ # Utility functions
│ │ ├── animations.ts # Animation variants
│ │ └── styles.ts # Theme utilities
│ ├── contexts/ # React contexts
│ ├── services/ # API integrations
│ ├── data/ # Static data & configuration
│ └── assets/ # Images, fonts, resume
└── dist/ # Production build output
- Typewriter Effect: Cycles through professional roles
- Social Links: Animated social media buttons
- Call-to-Actions: Project showcase, contact, resume download
- Scroll Indicator: Animated down arrow
- Categorized Display: Frontend, Backend, Tools
- Interactive Tabs: Smooth category switching
- Logo Integration: DevIcons CDN with fallback system
- Responsive Grid: Adapts to screen sizes
- Live GitHub Integration: Auto-syncs repository data
- Filtering System: Category-based project filtering
- Rich Project Cards: Stars, tags, descriptions
- Error Handling: Graceful fallbacks for API failures
- Dual Themes: Professional dark & light modes
- Smooth Transitions: CSS-based theme switching
- System Integration: Respects OS preference
- Persistent Storage: Remembers user choice
- Component Splitting: Logical component boundaries
- Custom Hooks: Reusable stateful logic
- Intersection Observer: Efficient scroll animations
- Lazy Loading: Components load when needed
- Code Splitting: Separate vendor and app bundles
- Tree Shaking: Eliminates unused code
- Asset Optimization: Compressed images and fonts
- Modern ES Modules: Smaller bundle sizes
- GPU Acceleration: Uses transform and opacity only
- Reduced Motion: Respects accessibility preferences
- Optimized Timing: Consistent easing functions
- Hardware Acceleration: CSS will-change properties
This codebase includes extensive documentation designed for maintainability:
Navigate to the docs folder for comprehensive guides:
- 📚 Documentation Index - Navigation guide to all docs
- 🧠 Codebase Documentation - Complete technical guide
- 🚀 Development Guide - Practical development handbook
- 🧩 Components Guide - Component patterns and usage
- 🔧 Utils Guide - Utilities and styling system
- 🎣 Hooks Guide - Custom hooks documentation
// Update name, bio, and roles
// File: src/components/sections/Hero.tsx
// Change social links
// File: src/components/hero/SocialLinks.tsx
// Add/modify skills
// File: src/data/skills.ts// Customize colors and theme
// File: src/utils/styles.ts
// Modify animations
// File: src/utils/animations.ts// GitHub integration settings
// File: src/services/githubApi.ts
// Fallback project data
// File: src/hooks/useProjects.ts| Browser | Version | Status |
|---|---|---|
| Chrome | Latest | ✅ Full Support |
| Firefox | Latest | ✅ Full Support |
| Safari | Latest | ✅ Full Support |
| Edge | Latest | ✅ Full Support |
Modern Features Used:
- CSS Grid & Flexbox
- Intersection Observer API
- CSS Custom Properties
- ES6+ JavaScript
# One-click deployment
vercel --prod
# Or connect GitHub for auto-deployment- Netlify: Drag & drop
dist/folder - GitHub Pages: Configure in repository settings
- Traditional Hosting: Upload
dist/contents
npm run build # Creates optimized production build
npm run preview # Preview build locally# Development
npm run dev # Start dev server with hot reload
npm run dev -- --port 3000 # Use custom port
# Building
npm run build # Production build
npm run preview # Preview production build
# Code Quality
npm run lint # ESLint checks
npm run typecheck # TypeScript validationLighthouse Scores (Target: 90+):
- 🟢 Performance: 95+
- 🟢 Accessibility: 100
- 🟢 Best Practices: 100
- 🟢 SEO: 100
Bundle Size:
- 📦 Gzipped JS: ~70KB
- 🎨 Gzipped CSS: ~6KB
- ⚡ First Load: < 1s on 3G
Contributions are welcome! This codebase is designed to be maintainable:
- Follow existing patterns - Look at similar components
- Update documentation - Keep READMEs current
- Test thoroughly - Both themes, all devices
- Use TypeScript - Type all new code
# Contribution workflow
git checkout -b feature/amazing-feature
git commit -m "feat: add amazing feature"
git push origin feature/amazing-feature
# Create Pull RequestThis project is open source and available under the MIT License.
Dhruba Goswami
📧 gdhruba748@gmail.com
🐦 @dhruba_001
💼 LinkedIn
- Design Inspiration: Modern portfolio for react devs
- Icons: Lucide React
- Logos: DevIcons
- Animations: Framer Motion
🌟 If this helped you, please star the repo!!
Built with ❤️ using modern React patterns and best practices