Skip to content

Repository files navigation

🚀 Suraj G Rao - Portfolio

Live Demo React Vite Tailwind License

A modern, responsive portfolio website showcasing my work as an AI/ML Engineer and Software Developer.

🌐 Live Demo: suraj-g-rao.vercel.app


✨ About Me

I am a Computer Science student specializing in Artificial Intelligence and Machine Learning, passionate about building intelligent systems that solve real-world problems across AI and software engineering.


🎯 Features

Feature Description
🎨 Modern UI/UX Clean, professional design with glassmorphism effects
📱 Responsive Fully responsive across all devices
Interactive Elements Smooth animations and transitions using Framer Motion
🎆 Particle Effects Dynamic canvas-based particle system
👥 Visitor Counter Real-time visitor tracking with confetti celebration
📝 Animated Typing Hero section with typing effect

Sections Included

  • 🏠 Hero - Animated typing effect with profile
  • 👤 About - Personal info with statistics
  • 💻 Skills - Categorized skill display
  • 💼 Experience - Work experience with company logos
  • 🚀 Projects - Featured project highlights
  • 🏆 Achievements - Awards with certificates
  • 🎖️ Leadership - Roles with organization logos
  • 🎓 Education - Academic background with institution logos
  • 📜 Certifications - Professional credentials with verification links
  • 📬 Contact - Contact form

🛠️ Tech Stack

Frontend Frameworks

React Vite Tailwind CSS TypeScript

Libraries & Tools

Framer Motion React Icons Canvas Confetti


📦 Installation

Prerequisites

  • Node.js (v18 or higher)
  • npm or yarn

Setup Steps

  1. Clone the repository

    git clone https://github.com/Suraj-G-Rao/My-Portfolio.git
    cd My-Portfolio
  2. Install dependencies

    npm install
  3. Run the development server

    npm run dev

    Open http://localhost:5173 in your browser

  4. Build for production

    npm run build
  5. Preview production build

    npm run preview

📁 Project Structure

My-Portfolio/
├── 📂 public/                 # Static assets
│   ├── 📂 logos/             # Company/institution logos
│   └── 📂 photos/            # Certificates & achievements
├── 📂 src/
│   ├── 📂 assets/            # Image assets
│   ├── 📂 components/        # React components
│   │   ├── About.jsx
│   │   ├── Achievements.jsx
│   │   ├── Certifications.jsx
│   │   ├── Contact.jsx
│   │   ├── Education.jsx
│   │   ├── Experience.jsx
│   │   ├── Hero.jsx
│   │   ├── Leadership.jsx
│   │   ├── Loader.jsx
│   │   ├── Navbar.jsx
│   │   ├── Projects.jsx
│   │   └── Skills.jsx
│   ├── 📂 data/
│   │   └── portfolio.js      # Portfolio data
│   ├── App.jsx               # Main app component
│   ├── main.jsx              # Entry point
│   └── index.css             # Global styles
├── index.html                # HTML template
├── package.json              # Dependencies
├── tailwind.config.js        # Tailwind config
└── tsconfig.json             # TypeScript config

⚙️ Customization

To personalize this portfolio for your own use:

1. Update Portfolio Data

Edit src/data/portfolio.js to update:

  • Personal information (personalInfo)
  • Skills (skills)
  • Experience (experience)
  • Projects (projects)
  • Achievements (achievements)
  • Leadership roles (leadership)
  • Education (education)
  • Certifications (certifications)

2. Replace Images

Update images in:

  • public/logos/ - Company/institution logos
  • public/photos/ - Certificates and achievements
  • src/assets/profile.jpg - Profile picture

3. Update Links

Change social media and contact links in src/data/portfolio.js


🚀 Deployment

This project is deployed on Vercel. To deploy your own version:

Vercel Deployment

  1. Push your code to GitHub
  2. Go to Vercel and sign up/login
  3. Click "New Project" and import your repository
  4. Vercel will automatically detect the Vite config and build settings
  5. Click "Deploy" - your site will be live in seconds!

Other Platforms

  • Netlify: Connect your GitHub repo and enable automatic deploys
  • GitHub Pages: Use npm run build and deploy the dist folder

📄 License

This project is open source and available for personal use.


📬 Contact

Platform Link
📧 Email surajgrao0203@gmail.com
💼 LinkedIn linkedin.com/in/suraj-g-rao
🐙 GitHub github.com/Suraj-G-Rao
🐦 Twitter @SurajGRao020
📸 Instagram @suraj.rao

⭐ If you like this portfolio, give it a star

Built with ❤️ by Suraj G Rao

About

Welcome to my personal portfolio website! I'm Suraj G Rao, an AI & Machine Learning Engineer specializing in building intelligent systems and solutions.

Topics

Resources

Stars

45 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages