My Portfolio

A modern, responsive portfolio website built with React, featuring smooth animations, interactive components, and a clean design. Showcase your professional experience, projects, skills, and certifications in an elegant and engaging way.

🌐 Live Demo

---

✨ Features

• Responsive Design: Fully mobile-friendly with Bootstrap for elegant styling across all devices
• Smooth Animations: Powered by Framer Motion for fluid page transitions and component animations
• Type Animation: Eye-catching typing animation effects on key sections
• Contact Form: Integrated email functionality using EmailJS for direct messaging
• Multiple Sections: Home, About, Summary, Experience, Education, Projects, Skills, Certifications, and Contact
• Modern UI: Bootstrap components for a professional, clean interface
• Icon Library: Rich set of icons from React Icons for visual appeal
• GitHub Pages Deployment: Easy deployment pipeline with gh-pages integration

---

🛠 Tech Stack

• Frontend Framework: React 19.1.0
• Styling:
  • Bootstrap 5.3.7
  • React Bootstrap 2.10.10
  • Custom CSS
• Animation: Framer Motion 12.23.0
• Effects: React Type Animation 3.2.0
• Icons: React Icons 5.5.0
• Email Service: EmailJS 3.2.0
• Testing: React Testing Library, Jest
• Build Tool: React Scripts 5.0.1
• Deployment: GitHub Pages

---

📋 Prerequisites

Before getting started, ensure you have the following installed:

• Node.js (v14 or higher) - Download
• npm (comes with Node.js) or yarn
• Git for version control

---

🚀 Installation & Setup

1. Clone the Repository

git clone https://github.com/Adarsh09675/Portfolio.git
cd portfolio

2. Install Dependencies

npm install

This will install all required packages including React, Bootstrap, Framer Motion, and other dependencies listed in package.json.

3. Start the Development Server

npm start

The application will open automatically at http://localhost:3000. The page will reload whenever you make changes.

4. Run Tests (Optional)

npm test

Launches the test runner in interactive watch mode for running unit tests.

---

📦 Build for Production

To create an optimized production build:

npm run build

Builds the app for production to the build folder. The build is minified and optimized for the best performance.

---

🌍 Deployment

This project is configured for deployment on GitHub Pages.

Deploy to GitHub Pages

npm run deploy

This command:

1. Builds the production version of your app
2. Deploys it to your GitHub Pages site

Make sure to:

• Update the homepage field in package.json with your GitHub Pages URL
• Ensure your repository settings have GitHub Pages enabled

---

📁 Project Structure

portfolio/
├── public/
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── components/
│   │   ├── Header.js          # Navigation header
│   │   ├── Home.js            # Hero/landing section
│   │   ├── About.js           # About me section
│   │   ├── Summary.js         # Professional summary
│   │   ├── Experience.js      # Work experience
│   │   ├── Educations.js      # Education background
│   │   ├── Projects.js        # Portfolio projects
│   │   ├── Skills.js          # Technical skills
│   │   ├── Certifications.js  # Certifications/credentials
│   │   └── Contact.js         # Contact form
│   ├── assets/                # Images, icons, and other media
│   ├── App.js                 # Main app component
│   ├── App.css                # Main app styles
│   ├── index.js               # React entry point
│   ├── index.css              # Global styles
│   ├── setupTests.js          # Test configuration
│   ├── reportWebVitals.js     # Performance metrics
│   └── App.test.js            # App component tests
├── build/                     # Production build output (generated)
├── package.json               # Project dependencies and scripts
├── Jenkinsfile                # CI/CD pipeline configuration
├── README.md                  # This file
└── .gitignore                 # Git ignore rules

---

🎨 Customization Guide

To personalize this portfolio with your information, update the following component files:

1. Header Navigation (src/components/Header.js)

• Update navigation links
• Add your logo or name
• Customize header styling

2. Home Section (src/components/Home.js)

• Add your headline and tagline
• Update profile image
• Customize hero section content

3. About Section (src/components/About.js)

• Write your bio and professional summary
• Add personality and background info
• Update profile image

4. Professional Summary (src/components/Summary.js)

• Highlight your key strengths
• Add career objectives
• Showcase unique selling points

5. Experience (src/components/Experience.js)

• Add your work experience entries
• Include job titles, companies, dates, and descriptions
• Highlight achievements and responsibilities

6. Education (src/components/Educations.js)

• List your educational background
• Include degrees, institutions, graduation dates
• Add relevant coursework or achievements

7. Projects (src/components/Projects.js)

• Showcase your best projects
• Include project descriptions, technologies used, and links
• Add project images/screenshots
• Link to GitHub repositories or live demos

8. Skills (src/components/Skills.js)

• List your technical and soft skills
• Organize by categories (Frontend, Backend, Tools, etc.)
• Consider adding proficiency levels

9. Certifications (src/components/Certifications.js)

• Display your certifications and credentials
• Include issuing organizations and dates
• Add links to credential verification pages

10. Contact Form (src/components/Contact.js)

• Set up EmailJS for contact form functionality
• Update the service ID and template ID from your EmailJS account
• Customize contact information (email, phone, social links)

---

📧 Setting Up EmailJS for Contact Form

To enable the contact form functionality:

1. Sign up for a free account at EmailJS
2. Create an email service (Gmail, Outlook, etc.)
3. Create an email template
4. Update the SERVICE_ID, TEMPLATE_ID, and PUBLIC_KEY in the Contact component with your EmailJS credentials

---

🧪 Testing

The project uses React Testing Library for unit tests.

# Run tests
npm test

# Run tests with coverage
npm test -- --coverage

Example test file: src/App.test.js

---

📱 Responsive Design

The portfolio is fully responsive and tested on:

• Desktop browsers (Chrome, Firefox, Safari, Edge)
• Tablets (iPad, Android tablets)
• Mobile devices (iPhone, Android phones)

Bootstrap's grid system ensures the layout adapts beautifully to all screen sizes.

---

🔧 Available Scripts

• npm start - Start development server at http://localhost:3000
• npm build - Create production build
• npm test - Run tests in watch mode
• npm deploy - Build and deploy to GitHub Pages
• npm eject - Expose webpack configuration (⚠️ one-way operation)

---

🤝 Contributing

Contributions are welcome! Feel free to:

• Fork the repository
• Create a feature branch (git checkout -b feature/improvement)
• Commit your changes (git commit -m 'Add improvement')
• Push to the branch (git push origin feature/improvement)
• Open a Pull Request

---

📄 License

This project is open source and available under the MIT License. Feel free to use it as a template for your own portfolio.

---

👤 Author

Adarsh

• GitHub: @Adarsh09675
• Portfolio: https://Adarsh09675.github.io/Portfolio

---

🎯 Future Enhancements

Potential features for future versions:

• Dark mode toggle
• Multi-language support
• Blog section
• Comments on projects
• Resume download functionality
• Analytics integration
• SEO optimization
• Accessibility improvements (WCAG compliance)

---

📞 Support

If you have questions or need help:

• Open an issue on GitHub
• Check the React Documentation
• Visit Bootstrap Documentation
• Review Framer Motion Docs

---

🌟 Show Your Support

If this project helped you, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs and issues
• 💡 Suggesting improvements
• 🔀 Contributing code improvements

Happy coding! 🚀

Change Line 12.

2. Home

File: src/components/Home.js

Change lines: 27, 33, 35, 37, 39, 50.

3. About

File: src/components/About.js

Change lines: 22, 24, 27, 30, 33.

4. Certifications

File: src/components/Certifications.js

Change lines: 8-12, 15-17.

5. Contact

File: src/components/Contact.js

Change lines: 18, 27, 31, 35, 40, 44, 50, 60.

6. Education

File: src/components/Education.js

Change lines: 8-11, 14-17, 20-23.

7. Experience

File: src/components/Experience.js

Change lines: 8-12, 15-19.

8. Projects

File: src/components/Projects.js

Change lines: 7-13, 16-22, 25-31, 34-40.

9. Skills

File: src/components/Skills.js

Change lines: 6-10.

10. Summary

File: src/components/Summary.js

Change Line 17.

📂 Assets Folder

Place your resume in this folder with the format:

name.pdf.pdf

Place your profile image with the format:

name.jpg.jpg