Shihab Uddin - Developer Portfolio Website

A modern, responsive portfolio website built with React, showcasing my skills, projects, and professional experience.

🌐 Live Demo

Visit My Portfolio

📧 Contact

• Email: shihabuddin.dev@gmail.com
• LinkedIn: Connect with me

🚀 Features

• Dark Mode First Design - Beautiful dark theme with smooth transitions
• Fully Responsive - Optimized for all devices (mobile, tablet, desktop)
• Modern UI/UX - Clean, professional design with smooth animations
• Interactive Components - Animated spinners, project modals, and engaging elements
• Contact Form - Easy-to-use contact form with email integration
• Project Showcase - Detailed project cards with modal views
• 404 Page - Custom, user-friendly error page
• Performance Optimized - Fast loading with Vite build tool
• Legacy Browser Support - Uses Vite Legacy plugin for maximum browser compatibility

🛠️ Technologies Used

Frontend

• React 19.1.0 - Modern React with latest features
• Vite - Fast build tool and development server
• TailwindCSS 4.1.11 - Utility-first CSS framework
• DaisyUI - Component library for TailwindCSS

UI/UX Libraries

• Framer Motion 12.19.2 - Smooth animations and transitions
• React Icons 5.5.0 - Beautiful icon library
• Lottie React 2.4.1 - Animated illustrations
• Headless UI 2.2.4 - Accessible UI components

Additional Tools

• React Router 7.6.3 - Client-side routing
• React Simple Typewriter 5.0.1 - Typing animation effects
• formspree 3.0.0 - Email integration
• PostCSS & Autoprefixer - CSS processing
• @vitejs/plugin-legacy - Legacy browser support

📁 Project Structure

src/
├── components/
│   ├── home/           # Home page components
│   ├── shared/         # Reusable components
│   └── ui/             # UI components
├── pages/              # Page components
├── layout/             # Layout components
├── router/             # Routing configuration
├── utils/              # Utility functions
└── assets/             # Static assets

🎨 Key Components

• Hero Section - Animated introduction with typewriter effect
• About Section - Professional background and skills
• Skills Section - Technical skills with visual indicators
• Projects Section - Interactive project cards with detailed modals
• Contact Section - Contact form and social links
• Navigation - Responsive navbar with theme toggle
• Footer - Social links and additional information

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/shihabuddin-dev/shihab-dev
   cd shihab-portfolio

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Build for production

   npm run build

🌟 Features in Detail

Responsive Design

• Mobile-first approach
• Breakpoint optimizations for all screen sizes
• Touch-friendly interactions

Performance

• Optimized bundle size with Vite
• Lazy loading for better performance
• Efficient component rendering

Accessibility

• Semantic HTML structure
• ARIA labels and roles
• Keyboard navigation support
• Screen reader friendly

Modern Development

• Latest React features
• Modern JavaScript (ES6+)
• Component-based architecture
• Clean code practices

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Legacy browsers (with Vite Legacy plugin)

🤝 Contributing

Feel free to fork this project and submit pull requests for any improvements.

📄 License

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

🙏 Acknowledgments

• Icons from React Icons
• Animations powered by Framer Motion
• Illustrations from Lottie

---

Built with ❤️ by Shihab Uddin

Connect with me on LinkedIn or email me at shihabuddin.dev@gmail.com