Portfolio

This is a personal portfolio website for Shivam Gupta, showcasing his skills, projects, and achievements in software development. The portfolio includes detailed profiles from various coding platforms such as LeetCode and GeeksforGeeks, highlighting my problem-solving abilities and coding proficiency.

Features

• Coding Profile:

  • Displays detailed statistics of LeetCode/GFG submissions, categorized by difficulty (Easy, Medium, Hard).
  • Animated count of problems solved using framer-motion.
  • A line chart showing daily submission frequency using react-chartjs-2 and Chart.js.

• Animated Components:

  • Smooth animations for various elements using framer-motion, enhancing the visual appeal of the portfolio.

• Responsive Design:

  • The portfolio is designed to be responsive, ensuring a seamless experience across different devices and screen sizes.

• Project Links:

  • Links to my projects, such as the "Virtual Bookshelf" project hosted on GitHub, with clickable links that open in new tabs.

Technologies Used

Frontend

• React: For building the user interface.
• Framer Motion: For animations.
• React Chart.js 2: For rendering charts.
• CSS Modules: For styling components.
• Vite: For development and build tooling.

Backend

• Node.js and Express: For setting up the server and handling API requests.

Installation

Prerequisites

• Node.js and npm installed on your machine.

Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Install all dependencies:

   npm install

3. Start the backend server:

   node server.js

Frontedn Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install all dependencies:

   npm install

3. Start the development server:

   npm run dev

Directory Structure

Backend

backend/ ├── .gitignore ├── package.json └── server.js

Frontend

frontend/ ├── .gitignore ├── eslint.config.js ├── index.html ├── package.json ├── README.md ├── vite.config.js ├── public/ │ └── vite.svg └── src/ ├── App.css ├── App.jsx ├── index.css ├── main.jsx ├── MainLayout.jsx ├── assets/ │ ├── expressJS.svg │ ├── freepik__adjust__26199.png │ ├── image.jpg │ └── me.jpeg └── component/ ├── aboutme/ │ ├── About.jsx │ └── About.module.css ├── experience/ │ ├── Experience.jsx │ └── Experience.module.css ├── navbar/ │ ├── CodeNav.jsx │ ├── CodeNav.module.css │ ├── Navbar.jsx │ └── Navbar.module.css ├── profile/ │ ├── GeeksForGeeks.jsx │ ├── LeetCodeProfile.jsx │ └── Profile.module.css └── resume/ ├── Resume.jsx └── Resume.module.css