A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS showcasing my experience as a Product Management Intern, Full-Stack Developer, and Research Enthusiast.

View Live Portfolio

• Features
• Tech Stack
• Getting Started
• Project Structure
• Deployment
• Customization
• Contributing
• Contact

• Responsive Design: Optimized for all devices (mobile, tablet, desktop)
• Modern UI/UX: Clean, professional design with smooth animations
• Interactive Sections:
  • Hero section with social links
  • About me with key highlights
  • Experience timeline
  • Project showcase with GitHub links
  • Skills with progress bars
  • Research work presentation
  • Education timeline
  • Contact form
• Performance Optimized: Fast loading with optimized assets
• SEO Friendly: Proper meta tags and semantic HTML
• Accessibility: WCAG compliant design

• Frontend Framework: React 18 with TypeScript
• Styling: Tailwind CSS
• Build Tool: Vite
• Icons: Lucide React
• Deployment: Netlify (recommended)
• Version Control: Git & GitHub

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

1. Clone the repository

   git clone https://github.com/ramasheshasai/portfolio-website.git
   cd portfolio-website

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npm run dev
   # or
   yarn dev

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

npm run build
# or
yarn build

The built files will be in the dist directory.

portfolio-website/
├── public/
│   ├── index.html
│   └── vite.svg
├── src/
│   ├── components/
│   │   ├── About.tsx
│   │   ├── Contact.tsx
│   │   ├── Education.tsx
│   │   ├── Experience.tsx
│   │   ├── Footer.tsx
│   │   ├── Header.tsx
│   │   ├── Hero.tsx
│   │   ├── Projects.tsx
│   │   ├── Research.tsx
│   │   └── Skills.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── package.json
├── tailwind.config.js
├── tsconfig.json
├── vite.config.ts
└── README.md

• Header: Navigation bar with smooth scrolling links
• Hero: Main introduction section with social links
• About: Personal introduction with key highlights
• Experience: Professional experience timeline
• Projects: Showcase of key projects with GitHub links
• Skills: Technical skills with progress indicators
• Research: Academic research and publications
• Education: Educational background and achievements
• Contact: Contact form and information
• Footer: Site footer with additional links

This portfolio was deployed using Bolt.new's integrated deployment system:

1. Automatic Build & Deploy

   • Bolt.new automatically builds the project using npm run build
   • The dist folder is automatically deployed to Netlify
   • No manual configuration required

2. Live URL: https://scintillating-kangaroo-f82849.netlify.app

3. Claim Your Site (Optional)

   • Use the provided claim URL to transfer the site to your Netlify account
   • This gives you full control over the deployment settings

1. Build the project manually

   npm run build

2. Deploy to Netlify

   • Option 1: Drag and drop the dist folder to Netlify Drop
   • Option 2: Connect your GitHub repository to Netlify for automatic deployments

3. Configure build settings (if using Git integration):

   • Build command: npm run build
   • Publish directory: dist

1. Install Vercel CLI

   npm i -g vercel

2. Deploy

   vercel

1. Install gh-pages

   npm install --save-dev gh-pages

2. Add to package.json

   {
     "scripts": {
       "predeploy": "npm run build",
       "deploy": "gh-pages -d dist"
     },
     "homepage": "https://yourusername.github.io/portfolio-website"
   }

3. Deploy

   npm run deploy

The portfolio includes several advanced animation techniques:

• Fade In: Smooth entrance animations for sections
• Slide Up: Elements slide up from bottom with staggered delays
• Hover Effects: Interactive hover states with scale and shadow transitions
• Pulse Effects: Subtle pulsing animations for call-to-action elements

• Parallax Scrolling: Background elements move at different speeds
• Transform Animations: Elements rotate, scale, and translate during scroll
• Intersection Observer: Animations trigger when elements enter viewport
• Smooth Scrolling: Native CSS smooth scrolling between sections

• Card Hover Effects: 3D transforms on project and skill cards
• Button Animations: Micro-interactions with scale and color transitions
• Progress Bars: Animated skill level indicators
• Typing Effects: Dynamic text animations in hero section

/* Custom animations defined in src/index.css */
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

/* 3D transforms on hover */
.hover:scale-105 {
  transform: scale(1.05);
}

/* Staggered animation delays */
.animation-delay-200 {
  animation-delay: 200ms;
}

Update the following files with your information:

1. src/components/Hero.tsx: Name, title, description, and social links
2. src/components/About.tsx: Personal story and highlights
3. src/components/Experience.tsx: Work experience details
4. src/components/Projects.tsx: Your projects and GitHub links
5. src/components/Skills.tsx: Your technical skills
6. src/components/Education.tsx: Educational background
7. src/components/Contact.tsx: Contact information

• Colors: Modify the color scheme in tailwind.config.js
• Animations: Add or modify animations in src/index.css
• Layout: Adjust component layouts in individual component files

1. Create a new component in src/components/
2. Import and add it to src/App.tsx
3. Add navigation link in src/components/Header.tsx

The website is fully responsive with breakpoints:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

• npm run dev: Start development server
• npm run build: Build for production
• npm run preview: Preview production build
• npm run lint: Run ESLint

• TypeScript: Strict type checking enabled
• ESLint: Code linting with React hooks rules
• Prettier: Code formatting (recommended to add)

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

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

Satuluri Rama Shesha Sai

• Email: [email protected]
• Phone: +91 90140-02564
• LinkedIn: ramasheshasai
• GitHub: ramasheshasai
• LeetCode: S_RAMA_SHESHA_SAI

• Bolt.new - Automated deployment platform
• React - Frontend framework
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Beautiful icons
• Vite - Fast build tool
• Netlify - Deployment platform

⭐ If you found this portfolio helpful, please give it a star on GitHub!

Made with ❤️ and lots of code by Rama Shesha Sai