Personal Portfolio Website

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

🚀 Quick Start

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager

Running Locally

1. Clone the repository

   git clone https://github.com/abhinavchat/abhinavchat-portfolio.git
   cd abhinavchat-portfolio

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Open your browser Navigate to http://localhost:3000 to view the portfolio

Available Scripts

• npm start - Runs the app in development mode
• npm run build - Builds the app for production
• npm test - Launches the test runner
• npm run deploy - Deploys to GitHub Pages

📄 Resume PDF Generation

The portfolio generates two types of resume PDFs:

ATS-Friendly PDF (Recommended for Job Applications)

• Simple black text on white background
• Standard Times font for maximum compatibility
• Single-column layout with clear section headers
• Minimal formatting - no graphics, colors, or complex layouts
• Structured text with consistent spacing and alignment
• Contact information clearly labeled and separated
• Skills listed as comma-separated text for easy parsing
• Standard bullet points (dashes) instead of special characters

Professional PDF (For Human Readers)

• Styled formatting with colors and visual elements
• Multi-column layouts for skills section
• Professional typography with varied font sizes
• Visual separators and design elements
• Better for networking and in-person interviews

📝 Updating Your Resume/Portfolio

All portfolio content is managed through the src/portfolio.js file. This file contains several configuration objects that control different sections of your portfolio.

Key Configuration Sections

1. Personal Information (about object)

const about = {
  name: 'Your Full Name',
  role: 'Your Job Title',
  description: 'Your professional summary...',
  resume: process.env.PUBLIC_URL + '/resume',
  social: {
    linkedin: 'https://www.linkedin.com/in/yourprofile/',
    github: 'https://github.com/yourusername',
  },
}

2. Experience (resume.experience array)

Located in the resume object, add/edit work experience:

{
  position: 'Job Title',
  company: 'Company Name',
  url: 'https://company-website.com',
  period: 'Start Date - End Date',
  location: 'City, State/Country',
  summary: 'Brief description of the role...',
  achievements: [
    'Achievement or responsibility 1',
    'Achievement or responsibility 2',
    // Add more achievements as needed
  ]
}

3. Education (resume.education array)

{
  degree: 'Degree Name',
  institution: 'University/Institution Name',
  url: 'https://institution-website.com',
  period: 'Start Year - End Year',
  location: 'City, State/Country',
  studyType: 'Type of degree'
}

4. Certifications (resume.certifications array)

{
  title: 'Certification Name',
  id: 'Certificate ID (optional)',
  issuer: 'Issuing Organization'
}

5. Projects (projects array)

{
  name: 'Project Name',
  description: 'Project description...',
  stack: ['Technology1', 'Technology2', 'Technology3'],
  sourceCode: 'https://github.com/username/repo',
  livePreview: 'https://project-demo-url.com',
}

6. Skills (skills object)

Organized by categories:

const skills = {
  // List your skills by category
  'Programming Languages': ['JavaScript', 'Python', 'Java'],
  'Frontend': ['React', 'Angular', 'Vue.js'],
  'Backend': ['Node.js', 'Express', 'Django'],
  'Databases': ['MongoDB', 'PostgreSQL', 'MySQL'],
  // Add more categories as needed
}

Step-by-Step Update Process

1. Open the portfolio configuration file

   src/portfolio.js

2. Update personal information

   • Modify the about object with your details
   • Update social media links

3. Add/Update work experience

   • Navigate to the resume.experience array
   • Add new positions or edit existing ones
   • Use the format shown above

4. Update education

   • Modify the resume.education array
   • Add your educational background

5. Add certifications

   • Update the resume.certifications array
   • Include relevant professional certifications

6. Update projects

   • Modify the projects array
   • Showcase your best work with descriptions and links

7. Update skills

   • Edit the skills object
   • Organize skills by relevant categories

8. Test your changes

   npm start

   Review your changes at http://localhost:3000

9. Build for production

   npm run build

Contact Information (contact object)

const contact = {
  email: 'your.email@example.com',
  phone: '+1234567890',
  location: 'Your City, State/Country'
}

🎨 Customization

Theme Configuration

The theme object controls the visual appearance:

• Colors, typography, spacing
• Component styling
• Responsive breakpoints

UI Configuration

The uiConfig object controls:

• Animation settings
• Section visibility
• Layout preferences

📦 Deployment

Resume Download Options

The portfolio provides multiple download formats:

1. ATS-Friendly PDF - Optimized for Applicant Tracking Systems
2. Professional PDF - Styled version for human readers
3. JSON Resume - Machine-readable format following JSON Resume standard
4. Print Option - Browser print dialog

ATS Optimization Features

The ATS-friendly PDF includes:

• Plain text formatting without graphics or colors
• Standard fonts (Times) recognized by all ATS systems
• Left-aligned text for consistent parsing
• Clear section headers in ALL CAPS
• Contact information with descriptive labels
• Skills organized by category with comma separation
• Simple dash bullet points instead of special characters
• Single-column layout to prevent parsing errors
• Consistent spacing and line heights

GitHub Pages (Recommended)

1. Update the homepage field in package.json with your GitHub Pages URL
2. Run the deployment command:

   npm run deploy

Manual Deployment

1. Build the project:

   npm run build

2. Deploy the build folder to your hosting provider

📁 Project Structure

src/
├── components/          # React components
├── pages/              # Page components
├── portfolio.js        # Main configuration file
├── App.js             # Main application component
└── index.js           # Application entry point

🔧 Development Tips

• Hot Reloading: Changes to portfolio.js will automatically refresh the browser
• Data Validation: The app includes built-in validation for required fields
• Responsive Design: All components are mobile-responsive by default
• SEO Friendly: Includes meta tags and structured data for better search engine visibility

📋 Common Tasks

Adding a New Job Experience

1. Open src/portfolio.js
2. Locate resume.experience array
3. Add a new object with your job details
4. Save and check the preview

Updating Skills

1. Find the skills object in src/portfolio.js
2. Add new categories or update existing ones
3. Skills are automatically organized and displayed

Adding Projects

1. Locate the projects array
2. Add project objects with name, description, stack, and links
3. Projects support GitHub links and live previews

🔍 ATS (Applicant Tracking System) Considerations

Why Use the ATS-Friendly PDF?

• 70%+ of resumes are initially screened by ATS software
• Complex formatting can cause parsing errors and rejection
• ATS systems prefer simple, text-based formats
• Keywords are more easily extracted from plain text

ATS Best Practices Implemented:

• Standard fonts that don't require special rendering
• Clear section headers that ATS systems recognize
• Contact information in a predictable format
• Skills listed as searchable text rather than graphics
• No embedded images, charts, or complex graphics
• Consistent formatting throughout the document

When to Use Each Format:

• ATS-Friendly PDF: Online job applications, recruiter submissions
• Professional PDF: Networking events, in-person interviews, portfolio presentations
• JSON Resume: Developer tools, automated processing, API integrations

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

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

---

Need help? Check the src/portfolio.js file for examples and detailed comments on each configuration option.