rishabhResume

Rishabh Sharma - Portfolio Website

A modern, interactive portfolio website built with Next.js 15, TypeScript, Tailwind CSS, and Framer Motion. Features a tabbed navigation system with smooth animations and a professional design.

👋 Hi, I’m Rishabh Sharma

LinkedIn Badge
Portfolio Badge
StackOverflow Badge

🚀 About Me

💻 Senior MERN Stack Engineer & Team Lead @ Orion eSolutions Pvt. Ltd. (Apr 2025 – Present)
⚡ Passionate about building scalable web apps, optimized frontend architectures, and high-performance APIs.
🛠 Skilled at bridging design, development, and deployment with clean, efficient code.
🤝 Experienced in leading teams, mentoring developers, and driving end-to-end project execution.

🏆 Career Highlights

🛠️ Tech Stack

Frontend:
React.js | Next.js | Redux | Zustand | TailwindCSS | Bootstrap | TypeScript

Backend:
Node.js | Express.js | Nest.js | REST APIs | GraphQL

Database & Cloud:
MongoDB | PostgreSQL | MySQL | Firebase | Supabase | AWS | Vercel

Tools & DevOps:
Git | GitHub Actions | Docker | CI/CD | VS Code

📈 GitHub Insights

Visitor Count

GitHub Trophies

🌱 Currently Exploring

💬 Let’s Connect

📫 Reach me on LinkedIn
⚡ Fun fact: I believe clean code = happy team + happy users 🚀

🚀 Live Demo

Website: https://rishabh-resume.vercel.app/
GitHub Repository: https://github.com/bugsbunny96/rishabhResume

✨ Features

🛠️ Tech Stack

📁 Project Structure

rishabh-portfolio/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Root layout with SEO metadata
│   │   ├── page.tsx            # Home page component
│   │   ├── globals.css         # Global styles
│   │   └── favicon.ico         # Site favicon
│   ├── components/
│   │   ├── Layout.tsx          # Main layout wrapper with tab navigation
│   │   ├── Header.tsx          # Navigation header with tab switching
│   │   ├── Hero.tsx            # Hero section with animated greeting
│   │   ├── About.tsx           # About section with personal info
│   │   ├── Skills.tsx          # Skills showcase with categories
│   │   ├── Experience.tsx      # Work experience timeline
│   │   ├── Projects.tsx        # Projects showcase with cards
│   │   ├── Contact.tsx         # Contact form and information
│   │   ├── Footer.tsx          # Site footer
│   │   ├── CircularText.tsx    # Animated circular text component
│   │   └── animations/
│   │       ├── CursorTrail.tsx        # Custom cursor trail effect
│   │       └── DeveloperBackground.tsx # Animated background pattern
│   └── utils/
│       ├── constants.ts        # Data constants (experience, projects, skills)
│       └── seo.ts              # SEO utilities
├── public/
│   ├── images/
│   │   ├── rishabh_profile.png # Profile image
│   │   └── projects/           # Project images
│   ├── resume.pdf              # Downloadable resume
│   ├── rishabh_icon.ico       # Site icon
│   └── *.svg                  # Various SVG icons
├── package.json                # Dependencies and scripts
├── tailwind.config.js         # Tailwind CSS configuration
├── next.config.ts             # Next.js configuration
├── tsconfig.json              # TypeScript configuration
└── README.md                  # This file

🎯 Key Components

Layout System

Core Sections

  1. Hero: Animated greeting and professional introduction
  2. About: Personal background and professional summary
  3. Skills: Categorized technical skills (Frontend, Backend, Database, Tools, Cloud)
  4. Experience: Professional work history with detailed descriptions
  5. Projects: Portfolio showcase with live demos and source code links
  6. Contact: Contact form with social media links

Animation Features

🚀 Getting Started

Prerequisites

Installation

  1. Clone the repository: 
    git clone https://github.com/bugsbunny96/rishabhResume.git
cd rishabhResume
  2. Install dependencies: 
    npm install
  3. Run the development server: 
    npm run dev
  4. Open http://localhost:3000 in your browser.

📝 Customization

Personal Information

Update your personal information in the following files:

  1. Contact Information: Update in src/components/Contact.tsx
  2. Experience Data: Modify src/utils/constants.ts - experiences array
  3. Projects: Add your projects in src/utils/constants.ts - projects array
  4. Skills: Update skills in src/utils/constants.ts - skills object
  5. Education: Update education in src/utils/constants.ts - education array
  6. SEO: Update metadata in src/app/layout.tsx

Contact Form Setup

The contact form is configured to use Formspree. To set it up:

  1. Create a Formspree account at formspree.io
  2. Create a new form and get your form ID
  3. Update the form endpoint in src/components/Contact.tsx (line ~60)

Profile Images

🎨 Component Architecture

This project follows strict component architecture rules:

📱 Responsive Design

The portfolio is fully responsive with Tailwind CSS breakpoints:

♿ Accessibility

🚀 Deployment

  1. Push your code to GitHub
  2. Connect your repository to Vercel
  3. Deploy automatically

Other Platforms

The project can be deployed to any platform that supports Next.js:

📊 Current Data

Experience

Skills Categories

Education

📄 License

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

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Contact

Built with ❤️ using Next.js 15, TypeScript, Tailwind CSS, and Framer Motion

Repository: https://github.com/bugsbunny96/rishabhResume