Modern React Portfolio 🚀

🌟 Overview

A modern, responsive portfolio website showcasing my professional journey and technical expertise. Built with React and Vite, featuring an elegant dark/light theme, smooth animations, and a user-friendly interface. This portfolio demonstrates my commitment to clean code, modern design principles, and optimal user experience. ✨

View Live Demo • Report Bug • Request Feature

✨ Key Features

• ⚡️ Lightning Fast: Built with React 18 + Vite for optimal performance
• 🎨 Modern Design: Clean, professional, and user-friendly interface
• 🌓 Theme Toggle: Seamless dark/light mode switching with context persistence
• 📱 Responsive: Fully responsive design across all devices and screen sizes
• 🎯 Dynamic Projects: Interactive project showcase with live demos
• 💪 Skills Matrix: Comprehensive display of technical expertise
• 📬 Contact Integration: Professional contact form with validation
• 🔍 SEO Optimized: Implemented meta tags and semantic HTML
• 🚀 Performance: Optimized assets and lazy loading for fast load times

🛠️ Tech Stack

Frontend

• ⚛️ React 18: For building a scalable and modern UI
• 📦 Vite: Next-generation frontend tooling
• 🎨 CSS Modules: For scoped and maintainable styling
• 💾 Context API: For efficient state management
• 🔄 React Router: For seamless navigation
• 📱 Media Queries: For responsive design

Development Tools

• 🔧 ESLint: For code quality and consistency
• 🎯 Prettier: For automated code formatting
• 📦 npm: For package management
• 🐙 Git: For version control
• 📝 VSCode: Development environment

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• npm (v7 or higher)
• Git

Installation

1. Clone the repository

   git clone https://github.com/GourangaDasSamrat/React-Portfolio.git

2. Navigate to the project directory

   cd React-Portfolio

3. Install dependencies

   npm install

4. Create a .env file in the root directory

   cp .env.example .env

5. Set up your EmailJS credentials

   • Sign up at EmailJS
   • Create an Email Service (Gmail, Outlook, etc.)
   • Create an Email Template
   • Get your credentials and add them to the .env file:

     VITE_EMAILJS_SERVICE_ID=your_service_id
     VITE_EMAILJS_TEMPLATE_ID=your_template_id
     VITE_EMAILJS_PUBLIC_KEY=your_public_key

6. 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 - Lint code with ESLint
• npm run format - Format code with Prettier

📁 Project Structure

React-Portfolio/
├── index.html                 # Entry point HTML
├── package.json              # Dependencies and scripts
├── vite.config.js           # Vite configuration
├── public/                  # Static assets
│   └── favicon.ico          # Site favicon
└── src/                     # Source code
    ├── App.jsx             # Root component
    ├── main.jsx           # Application entry point
    ├── App.css            # Global styles
    ├── index.css         # Root styles
    ├── assets/           # Media assets
    │   ├── svg/          # SVG icons and images
    │   ├── images/       # Project images
    │   └── cv.pdf       # Resume/CV file
    ├── common/           # Shared components
    │   ├── ProjectCard.jsx    # Project card component
    │   ├── SkillList.jsx     # Skills list component
    │   └── ThemeContext.jsx  # Theme context provider
    └── sections/         # Page sections
        ├── Hero/        # Hero section
        ├── Projects/    # Projects showcase
        ├── Skills/     # Skills display
        ├── Contact/    # Contact form
        └── Footer/     # Footer section

🚀 Deployment

Deploying to Vercel

1. Install Vercel CLI

   npm install -g vercel

2. Login to Vercel

   vercel login

3. Configure build settings in vercel.json:

   {
     "version": 2,
     "builds": [
       {
         "src": "package.json",
         "use": "@vercel/static-build",
         "config": { "distDir": "dist" }
       }
     ]
   }

4. Deploy your site:

   vercel # for development
   vercel --prod # for production

Current deployment: https://react-portfolio-indol-eight.vercel.app/

Performance Optimization

• Images are optimized and served in WebP format
• Lazy loading implemented for images and components
• Code splitting for better chunk management
• Asset preloading for critical resources

📱 Preview & Screenshots

Home Page


Projects Section


Contact Section

📊 Performance & Best Practices

• Lighthouse Score:

  • Performance: 98/100
  • Accessibility: 100/100
  • Best Practices: 100/100
  • SEO: 100/100

• Core Web Vitals:

  • First Contentful Paint: < 1s
  • Largest Contentful Paint: < 2s
  • Cumulative Layout Shift: 0
  • First Input Delay: < 100ms

👤 Author & Contact

Gouranga Das Samrat
Frontend Developer | JavaScript & React Expert | Open Source Enthusiast

Let's connect! I'm always open to collaboration, frontend projects, or just a friendly chat about JavaScript and React.

👥 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• React - For the amazing UI library
• Vite - For the blazing fast build tool
• EmailJS - For the contact form functionality
• Vercel - For hosting and continuous deployment

---

💖 Support My Work

If you find this project helpful or learn something from it, please consider:

• ⭐ Starring this repository
• 🎯 Sharing it with others
• 📝 Following me on Medium for more content
• 💼 Connecting with me on LinkedIn

Your support motivates me to create more open source projects! Feel free to reach out for collaborations or questions.