Personal Portfolio Website

A modern, responsive personal portfolio website built with React, TypeScript, and Tailwind CSS. The website features a clean design, smooth animations, and a dark mode toggle.

Features

• 📱 Fully responsive design
• 🌓 Dark mode support
• ✨ Smooth animations and transitions
• 📊 Interactive skill bars
• 🎯 Project showcase with live demos
• 📝 Clean and modern UI
• 🚀 Performance optimized
• 🎨 Customizable color schemes

Tech Stack

• Frontend Framework: React
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• Build Tool: Vite
• Linting: ESLint
• Package Manager: npm

Project Structure

project/
├── src/
│   ├── assets/         # Static assets (images, PDFs)
│   ├── components/     # Reusable UI components
│   ├── pages/         # Page components
│   ├── types/         # TypeScript type definitions
│   ├── App.tsx        # Root component
│   └── main.tsx       # Entry point
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── tailwind.config.js

Key Components

• Header: Responsive navigation with dark mode toggle
• AnimatedElement: Reusable component for scroll animations
• Section: Layout component for consistent section styling
• ProjectCard: Component for displaying project information
• SkillItem: Interactive skill progress bars
• Footer: Social links and copyright information

Pages

1. Home: Landing page with introduction and CTAs
2. About: Personal information and services offered
3. Skills: Technical skills with progress indicators
4. Projects: Portfolio of completed projects
5. Contact: Contact information and social links

Environment Support

• Modern browsers
• Mobile devices
• Dark mode preference detection
• Responsive to all screen sizes

Performance Considerations

• Lazy loading of images
• Component-based architecture
• Optimized bundle size
• Smooth animations with IntersectionObserver