A modern, responsive portfolio website showcasing projects, skills, and contact information with beautiful animations and smooth interactions.
- 🎨 Smooth Animations - Typewriter hero effect, reveal-on-scroll transitions, and animated custom cursor
- 🎭 Theme Toggle - Light/dark mode support for personalized viewing experience
- 📧 Contact Form - Fully functional email integration with EmailJS for instant messaging
- 📱 Responsive Design - Mobile-first Bootstrap layout adapting beautifully across all devices
- ♿ Accessible - Semantic HTML, ARIA labels, keyboard navigation, and screen reader support
- ⚡ Fast Loading - Optimized with Vite for quick development and production builds
- 🛣️ Smooth Routing - Client-side navigation with React Router for seamless page transitions
- 🌐 SEO Ready - Meta tags, structured data, and Open Graph support
| Technology | Purpose |
|---|---|
| React 18 | UI framework |
| TypeScript | Type-safe JavaScript |
| Vite | Lightning-fast build tool |
| React Router v6 | Client-side routing |
| Bootstrap 5 | Responsive CSS framework |
| React Bootstrap | Bootstrap components as React components |
| EmailJS | Email sending without backend |
| React Icons | Icon library |
| Typewriter Effect | Animated text typing |
- Node.js 16+
- npm or yarn
# Clone the repository
git clone https://github.com/yourusername/portfolio-react.git
cd portfolio-react
# Install dependencies
npm install
# Start development server
npm run devThe site will be available at http://localhost:5173/
# Development server with hot reload
npm run dev
# Build for production
npm run build
# Preview production build locally
npm run preview
# Run tests
npm run test
# Deploy to GitHub Pages
npm run deploysrc/
├── app/ # Main App component and routing
├── components/ # Reusable components (header, footer, etc.)
├── pages/ # Page components (home, about, contact, portfolio)
├── content/ # Content data files
├── assets/ # Images, gifs, and media
├── hooks/ # Custom React hooks
├── styles/ # Global styles
└── index.tsx # Application entry point
Edit the files in src/content/ to personalize your portfolio:
site.ts- Site metadata and settingsabout.ts- About section contentportfolio.ts- Project showcasecontact.ts- Contact information
Modify the CSS variables in src/index.css to match your brand colors.
Create a .env.local file (copy from .env.example):
VITE_EMAILJS_SERVICE_ID=your_emailjs_service_id
VITE_EMAILJS_TEMPLATE_ID=your_emailjs_template_id
VITE_EMAILJS_PUBLIC_KEY=your_emailjs_public_keynpm run predeploy
npm run deploy- Connect your repository to Vercel
- Set environment variables in project settings
- Deploy with a single click
- Connect your repository
- Set build command:
npm run build - Set publish directory:
build
This portfolio is built with accessibility in mind:
- Semantic HTML structure
- ARIA labels and descriptions
- Keyboard navigation support
- Color contrast compliance
- Screen reader optimization
- Development Guide - Local development setup and guidelines
- Architecture Guide - Project structure and design decisions
- Contributing Guide - How to contribute to this project
- Deployment Guide - Deploy to various platforms
- Configuration Reference - All configuration options
- Roadmap - Planned features and improvements
- Changelog - Version history and updates
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions, issues, and feature requests are welcome! Feel free to check the Contributing Guide for more details.
Have questions or feedback? Feel free to reach out through the contact form on the website or open an issue on GitHub.