Add My Project

.gitignore copy

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README copy.md

@@ -0,0 +1,122 @@
+# Saksham Jaiswal
+
+Welcome to my personal portfolio website! This site showcases my skills, projects, and experience as a web developer. It's built with modern web technologies to provide a seamless, interactive, and visually appealing experience for users.
+
+Feel free to explore and learn more about my work. If you have any questions or feedback, feel free to get in touch!
+
+---
+
+## Table of Contents
+
+- [Tech Stack](#tech-stack)
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Future Additions](#future-additions)
+- [Contributing](#contributing)
+- [License](#license)
+
+---
+
+## Tech Stack
+
+This portfolio site is built using the following technologies:
+
+- **React**: A JavaScript library for building user interfaces. React powers the dynamic components and page routing in this portfolio.
+- **pnpm**: A fast, disk space-efficient package manager. I use **pnpm** for managing project dependencies, ensuring faster installs and efficient management of packages.
+- **Tailwind CSS**: A utility-first CSS framework that allows for highly customizable, responsive designs with minimal custom CSS.
+- **React Icons**: A collection of SVG icons for use in React projects, allowing me to add scalable icons quickly and easily.
+- **Ibelick.com**: (Include a short description of how this service or tool is used in your project—such as if it’s a custom font or image service integrated into the website).
+- **Google Fonts**: I use Google Fonts to integrate custom fonts into the design, enhancing typography and overall user experience.
+- **Framer Motion**: A powerful library for creating animations in React. I use **Framer Motion** for smooth transitions and interactive animations to enhance the site's look and feel.
+- **Firebase**: Firebase is used for backend services including authentication, real-time database, and hosting. It provides a reliable platform for managing and storing data, as well as hosting the portfolio site.
+
+---
+
+## Features
+
+- **Fully Responsive**: The portfolio is designed to work on all screen sizes, from mobile phones to large desktop displays. It adapts using Tailwind CSS breakpoints and custom styles.
+- **Smooth Animations**: Utilizing **Framer Motion**, elements on the page animate in and out with smooth transitions, creating a more engaging experience.
+- **Interactive Components**: Interactive elements such as project carousels, modals, and hover effects that make the site more engaging and visually appealing.
+- **Real-Time Database (Optional)**: Firebase is used for any real-time data requirements (e.g., blog or contact form submissions), enabling a dynamic and scalable solution.
+- **Authentication (Optional)**: Firebase authentication enables user login, allowing for personalized experiences or secure sections of the portfolio.
+- **SEO Optimized**: Optimized for search engines to ensure the portfolio ranks well for relevant terms and helps others discover your work.
+
+---
+
+## Installation
+
+To run this project locally, follow these steps:
+
+1. **Clone the repository**:
+    ```bash
+    git clone https://github.com/yourusername/your-portfolio.git
+    ```
+
+2. **Navigate to the project directory**:
+    ```bash
+    cd your-portfolio
+    ```
+
+3. **Install dependencies using pnpm**:
+    If you don't have **pnpm** installed, you can install it by running:
+    ```bash
+    npm install -g pnpm
+    ```
+    Then, install the project dependencies:
+    ```bash
+    pnpm install
+    ```
+
+4. **Run the development server**:
+    Start the development server with the following command:
+    ```bash
+    pnpm dev
+    ```
+
+5. **Open the website**:
+    Open your browser and go to `http://localhost:3000` to view your portfolio locally.
+
+---
+
+## Usage
+
+- **Customize Content**: You can easily update the content in the `src` directory, including sections such as `About Me`, `Projects`, and `Contact`. These components are customizable to fit your personal information.
+- **Change Styling**: Tailwind CSS classes are used throughout the site, making it easy to tweak and change the layout, colors, fonts, and more without having to write a lot of custom CSS.
+- **Add New Projects**: You can easily add new projects to the portfolio by creating new components for each project in the `src/components/Projects` folder.
+
+### Firebase Configuration
+
+- Make sure to set up Firebase if you want to use its authentication or database features. Create a Firebase project in the Firebase Console and add your Firebase config details to `src/firebase/config.js`.
+
+---
+
+## Future Additions
+
+Here are some planned features and improvements for the future:
+
+1. **Blog Section**: Implement a personal blog where I can share articles, tutorials, and other thoughts on web development, technology, and related topics.
+2. **Education Section**: Details about my past and current education.
+3. **Dark Mode Toggle**: A toggle switch to allow users to switch between light and dark themes for improved accessibility.
+4. **Project Filter**: A feature that allows users to filter projects by technology used (e.g., React, Firebase, etc.), making it easier to browse through various projects.
+5. **Performance Optimization**: Further optimization of loading times and performance, including lazy loading of images and components.
+6. **Personalized Experience**: Implement a user profile section where users can save their favorite projects or create a custom dashboard based on their preferences.
+
+---
+
+## Contributing
+
+I welcome contributions! If you have suggestions for improving this portfolio, feel free to fork the repository, make changes, and submit a pull request. Here are some ways you can contribute:
+
+- **Fix Bugs**: Help identify and fix any bugs you come across.
+- **Improve Documentation**: Suggest or submit better documentation or code comments.
+- **Feature Requests**: If you have ideas for new features or improvements, feel free to open an issue to discuss them.
+
+Please make sure to follow the code of conduct and submit issues or pull requests according to the project’s guidelines.
+
+---
+
+**Feel free to reach out if you have any questions or feedback. I’m always open to new ideas and collaboration!**
+
+**Built by Saksham Jaiswal**
+

dist/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

dist/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Welcome to Saksham Jaiswal's Portfolio! I am a Full-Stack Web Developer specializing in React, Firebase, and cloud-based services. Explore my projects and discover how I create dynamic, user-friendly web applications. Let's build something amazing together!">
+    <meta name="author" content="Saksham Jaiswal">
+    <meta name="keywords" content="Full-Stack Developer, Web Developer, React Developer, Firebase, Cloud Services, Portfolio, Frontend Development, Backend Development, Dynamic Web Applications, User Experience, Tailwind CSS, JavaScript">
+    <meta property="og:title" content="Saksham Jaiswal's Portfolio">
+    <meta property="og:description" content="Explore my journey as a Full-Stack Web Developer with expertise in React, Firebase, and creating user-friendly web applications. Check out my projects and get in touch!">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://saksham-jaiswal-2004.github.io/My-Portfolio-React/">
+    <link rel="canonical" href="https://saksham-jaiswal-2004.github.io/My-Portfolio-React/">
+    <title>Saksham Jaiswal</title>
+    <script type="module" crossorigin src="/assets/index-CQRGUd_f.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Dbnt5FR1.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

index copy.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Welcome to Saksham Jaiswal's Portfolio! I am a Full-Stack Web Developer specializing in React, Firebase, and cloud-based services. Explore my projects and discover how I create dynamic, user-friendly web applications. Let's build something amazing together!">
+    <meta name="author" content="Saksham Jaiswal">
+    <meta name="keywords" content="Full-Stack Developer, Web Developer, React Developer, Firebase, Cloud Services, Portfolio, Frontend Development, Backend Development, Dynamic Web Applications, User Experience, Tailwind CSS, JavaScript">
+    <meta property="og:title" content="Saksham Jaiswal's Portfolio">
+    <meta property="og:description" content="Explore my journey as a Full-Stack Web Developer with expertise in React, Firebase, and creating user-friendly web applications. Check out my projects and get in touch!">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://saksham-jaiswal-2004.github.io/My-Portfolio-React/">
+    <link rel="canonical" href="https://saksham-jaiswal-2004.github.io/My-Portfolio-React/">
+    <title>Saksham Jaiswal</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>