A modern, responsive portfolio website showcasing my work as an AI/ML Engineer and Software Developer.
🌐 Live Demo: suraj-g-rao.vercel.app
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.
| 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 |
- 🏠 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
- Node.js (v18 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/Suraj-G-Rao/My-Portfolio.git cd My-Portfolio -
Install dependencies
npm install
-
Run the development server
npm run dev
Open http://localhost:5173 in your browser
-
Build for production
npm run build
-
Preview production build
npm run preview
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
To personalize this portfolio for your own use:
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)
Update images in:
public/logos/- Company/institution logospublic/photos/- Certificates and achievementssrc/assets/profile.jpg- Profile picture
Change social media and contact links in src/data/portfolio.js
This project is deployed on Vercel. To deploy your own version:
- Push your code to GitHub
- Go to Vercel and sign up/login
- Click "New Project" and import your repository
- Vercel will automatically detect the Vite config and build settings
- Click "Deploy" - your site will be live in seconds!
- Netlify: Connect your GitHub repo and enable automatic deploys
- GitHub Pages: Use
npm run buildand deploy thedistfolder
This project is open source and available for personal use.
| Platform | Link |
|---|---|
| surajgrao0203@gmail.com | |
| linkedin.com/in/suraj-g-rao | |
| 🐙 GitHub | github.com/Suraj-G-Rao |
| @SurajGRao020 | |
| @suraj.rao |
⭐ If you like this portfolio, give it a star
Built with ❤️ by Suraj G Rao