Rohan Chowdhury - Portfolio

A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS.

🚀 Features

• Responsive Design: Works seamlessly on desktop and mobile devices
• Modern Tech Stack: Built with Vite, React, TypeScript, and Tailwind CSS
• Accessibility: WCAG compliant with proper ARIA labels and semantic HTML
• Performance: Optimized bundle with code splitting and lazy loading
• SEO Ready: Meta tags, sitemap, and robots.txt included
• Error Handling: Comprehensive error boundaries for production stability
• Testing: Configured with Vitest and Testing Library

🛠️ Tech Stack

• Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS + ShadCN UI components
• Icons: Lucide React
• Testing: Vitest + Testing Library
• Linting: ESLint with TypeScript rules

📦 Getting Started

Prerequisites

• Node.js (18+ recommended)
• npm or yarn

Installation

# Clone the repository
git clone <repository-url>

# Navigate to the project directory
cd rohan-portfolio_v2

# Install dependencies
npm install

# Start the development server
npm run dev

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint
npm run lint:fix     # Fix ESLint issues
npm run type-check   # Run TypeScript type checking
npm run test         # Run tests
npm run test:ui      # Run tests with UI
npm run test:coverage # Run tests with coverage

🚀 Deployment

The application is ready for deployment to any static hosting service:

• Vercel: vercel --prod
• Netlify: Deploy the dist folder
• GitHub Pages: Use GitHub Actions
• AWS S3: Upload dist folder to S3 bucket

Build Configuration

The production build is optimized with:

• Code splitting for optimal loading
• CSS minification
• Modern ES modules
• Gzip compression ready

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── portfolio/       # Portfolio-specific components
│   ├── ui/             # ShadCN UI components
│   └── __tests__/      # Component tests
├── config/             # Configuration files
│   ├── constants.ts    # App constants
│   ├── data.ts         # Static data
│   └── env.ts          # Environment variables
├── hooks/              # Custom React hooks
└── pages/              # Page components

🔧 Configuration

Environment Variables

Copy .env.example to .env and configure:

NODE_ENV=development
VITE_BASE_URL=http://localhost:8080
VITE_CONTACT_EMAIL=[email protected]
VITE_ENABLE_ANALYTICS=false

SEO Configuration

Update the following for your deployment:

• index.html - Meta tags and canonical URLs
• public/sitemap.xml - Site URLs
• public/robots.txt - Crawling permissions

📊 Performance

• Bundle Size: ~603 kB (optimized with code splitting)
• Lighthouse Score: 95+ (Performance, Accessibility, SEO)
• First Contentful Paint: < 1.5s
• Time to Interactive: < 3s

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.