Personal Portfolio Website

A modern, interactive portfolio website built with React and Three.js, featuring 3D animations, smooth transitions, and a responsive design.

🚀 Technologies Used

• React 19 - Modern React with hooks and functional components
• Vite - Fast build tool and development server
• Three.js - 3D graphics and animations
• GSAP - Advanced animations and transitions
• Tailwind CSS - Utility-first CSS framework
• React Three Fiber - React renderer for Three.js
• React Three Drei - Useful helpers for React Three Fiber
• EmailJS - Email functionality for contact forms

📦 Installation

1. Clone the repository

   git clone <your-repository-url>
   cd vite-project

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

🛠️ 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

🎨 Features

• 3D Interactive Room - Immersive 3D environment with interactive elements
• Smooth Animations - GSAP-powered animations and transitions
• Responsive Design - Mobile-first approach with Tailwind CSS
• Contact Form - EmailJS integration for contact functionality
• Tech Stack Showcase - Interactive display of technologies and skills
• Experience Timeline - Animated experience and project showcase
• Modern UI/UX - Clean, modern design with excellent user experience

📁 Project Structure

src/
├── components/          # Reusable React components
│   ├── Models/         # 3D model components
│   └── ...
├── sections/           # Main page sections
├── HeroModels/         # 3D hero section models
├── constants/          # Project constants and data
└── ...

🎯 Key Components

• Hero Section - 3D room with interactive elements
• Tech Stack - Animated technology logos and descriptions
• Experience - Timeline of work experience and projects
• Showcase - Portfolio project gallery
• Contact - Contact form with EmailJS integration

🎨 Design Features

• 3D Graphics - Immersive Three.js 3D environment
• Smooth Transitions - GSAP-powered animations
• Responsive Layout - Mobile-friendly design
• Modern Typography - Clean, readable fonts
• Interactive Elements - Hover effects and animations

📸 Screenshots

<<<<<<< HEAD [Add your project screenshots here]

Front-Page

Contact-Section(Yet to be updated)

>>>>>>> 7d6835fffaa34f9c956e29978c3768fa580ef2bc

🔧 Configuration

Environment Variables

Create a .env file in the root directory for EmailJS configuration:

VITE_APP_EMAILJS_PUBLIC_KEY=your_public_key
VITE_APP_EMAILJS_SERVICE_ID=your_service_id
VITE_APP_EMAILJS_TEMPLATE_ID=your_template_id

🚀 Deployment

1. Build the project

   npm run build

2. Deploy to your preferred platform

   • Vercel, Netlify, GitHub Pages, etc.

📝 License

This project is open source and available under the JS Mastery.

🤝 Contributing

1. Fork the repository
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

📞 Contact

• Email: eharish3005@gmail.com
• LinkedIn: www.linkedin.com/in/harish-e-naidu
• GitHub: https://github.com/Harish3005-cloud