Add Projects to project timeline (Homepage) #5

Rollback to react 17 due to some bugs

package.json

@@ -1,12 +1,12 @@
 {
   "homepage": "http://shlok-zanwar.github.io/",
   "name": "shlok-zanwar",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "private": true,
   "dependencies": {
     "@ant-design/charts": "^1.4.2",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@material-ui/core": "^4.11.2",
     "@mui/lab": "^5.0.0-alpha.86",
     "@mui/material": "^5.8.4",
@@ -17,20 +17,21 @@
     "antd": "^4.16.13",
     "aos": "^3.0.0-beta.6",
     "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.5",
     "firebase": "^8.3.1",
     "gh-pages": "^3.1.0",
     "ityped": "^1.0.3",
     "moment": "^2.29.3",
     "notistack": "^1.0.5",
-    "react": "^18.2.0",
+    "rc-util": "^5.24.4",
+    "react": "^17.0.1",
     "react-bootstrap": "^1.4.3",
     "react-canvas-draw": "^1.1.1",
     "react-color": "^2.19.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "^17.0.1",
     "react-ga4": "^1.4.1",
-    "react-global-search": "^0.3.2",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.4.0",
     "react-lineto": "^3.2.0",

src/App.js

@@ -5,7 +5,7 @@ import ReactGA from 'react-ga4';
 // import { GrDocumentText } from "react-icons/gr";
 
 import Homepage from "./Homepage/Homepage";
-// import MyNavbar from "./MyNavbar";
+import MyNavbar from "./MyNavbar";
 // import TodoApp from "./TodoApp/TodoApp";
 // import BSTApp from "./TreeVisulizations/BSTApp";
 // import MinHeapApp from "./TreeVisulizations/MinHeapApp";
@@ -40,7 +40,7 @@ import { SemipolarLoading } from "react-loadingg";
 AOS.init();
 
 // const Homepage = React.lazy(() => import("./Homepage/Homepage"));
-const MyNavbar = React.lazy(() => import("./MyNavbar"));
+// const MyNavbar = React.lazy(() => import("./MyNavbar"));
 const TodoApp = React.lazy(() => import("./TodoApp/TodoApp"));
 const BSTApp = React.lazy(() => import("./TreeVisulizations/BSTApp"));
 const MinHeapApp = React.lazy(() => import("./TreeVisulizations/MinHeapApp"));

src/BlogTemplates/BlogCSS.css

@@ -1,3 +1,7 @@
+:root {
+  --black: #161a2b;
+  --white: #ffffff;
+}
 
 .main-blog-div {
     display: inline-table;

src/Homepage/HomepageCSS.css

@@ -88,7 +88,6 @@
 }
 
 
-
 .profile-skills-chip{
     display: inline-flex;
     align-items: center;
@@ -207,7 +206,7 @@
     color: rgb(230, 227, 227);
     line-height: 1.1;
     list-style-type: square;
-    margin-left: -10px;
+    margin-left: 0px;
 }
 .timeline-list-item-li{
     list-style-position: inside;
@@ -217,6 +216,15 @@
     margin-left: -0.5rem;
 }
 
+.timeline-collapse-panel{
+    margin-top: 5px;
+}
+
+.timeline-collapse-item-outer{
+    padding-left: 25px;
+}
+
+
 .timeline-chip{
     display: inline-flex;
     font-size: 13px;
@@ -239,6 +247,7 @@
 }
 
 
+
 .btn {
     font-family: sans-serif;
     font-size: 15px;

src/Homepage/ProfileProjects.js

@@ -3,11 +3,12 @@ import ProjectCard from './ProjectCard'
 import { HiOutlineCode } from "react-icons/hi";
 import { AiOutlineFileAdd } from "react-icons/ai";
 import { GiBrain } from "react-icons/gi";
-import { SiCss3, SiFastapi, SiFirebase, SiFlask, SiHeroku, SiHtml5, SiJavascript, SiJson, SiMongodb, SiMysql, SiPython, SiReact, SiRedux } from "react-icons/si";
+import { SiCss3, SiFastapi, SiFirebase, SiFlask, SiHeroku, SiHtml5, SiJavascript, SiJson, SiMongodb, SiMysql, SiNpm, SiPython, SiReact, SiRedux } from "react-icons/si";
 import { GrMysql } from "react-icons/gr";
 import { DiSqllite } from "react-icons/di";
+import { BiCircle } from "react-icons/bi";
 import Timeline from '@mui/lab/Timeline';
-import { binaryTreeGithubURL, bstVisulizationURL, coderoomsAboutUsURL, coderoomsGithubURL, dockFormsBlogURL, dockFormsGithubURL, drawbinURL, heapVisulizationURL, hotelManagementBlogURL, hotelManagementGithubURL, mathsyraBackendURL, mathsyraFrontendURL, mnistGithubURL, pastebinGithubURL, pastebinURL, terminalQuizGithubURL, todoAppAppURL, todoAppBlogURL, todoAppGithubURL } from '../constants';
+import { binaryTreeGithubURL, bstVisulizationURL, coderoomsAboutUsURL, coderoomsGithubURL, dockFormsBlogURL, dockFormsGithubURL, drawbinURL, expenseTrackerGithubURL, expenseTrackerURL, globalSearchGithubURL, globalSearchNPMURL, heapVisulizationURL, hotelManagementBlogURL, hotelManagementGithubURL, mathsyraBackendURL, mathsyraFrontendURL, mnistGithubURL, pastebinGithubURL, pastebinURL, terminalQuizGithubURL, todoAppAppURL, todoAppBlogURL, todoAppGithubURL } from '../constants';
 import { useEffect } from 'react';
 
 
@@ -64,6 +65,23 @@ export default function ProfileProjects({isMobile}) {
         ]
     }
 
+    const portfolioWebsiteData = {
+        title: "Portfolio Website",
+        id: "portfolio-website",
+        oppositeContent: (<>Personal Project</>),
+
+        items: [
+            {
+                type: "text",
+                content: "This website is a portfolio website which showcases my projects and skills."
+            },
+            {
+                type: "text",
+                content: "I use this as a platform to experiment with new technologies and learn new things."
+            },
+        ]
+    }
+
     const codeRoomsData = {
         title: "Code Rooms",
         id: "code-rooms",
@@ -538,7 +556,7 @@ export default function ProfileProjects({isMobile}) {
     const pastebinData = {
         title: "Paste Bin",
         id: "pastebin",
-        oppositeContent: "Feb 2020",
+        oppositeContent: "June 2021",
 
         items: [
             {
@@ -616,18 +634,156 @@ export default function ProfileProjects({isMobile}) {
         ]
     }
 
+    const expenseTrackerData = {
+        title: "Expense Tracker",
+        id: "expense-tracker",
+        oppositeContent: "August 2022",
+
+        items: [
+            {
+                type: "text",
+                content: "An application to manage and keep track of your expenses.",
+            },
+            {
+                type: "text",
+                content: "It has a very simple and easy to use UI.",
+            },
+            {
+                type: "text",
+                content: "User can assign tags to their expenses and can filter / visualize their expenses based on the tags.",
+            },
+            {
+                type: "text",
+                content: "I took it as a challenge to complete this app in 24 hours and yess!! i successfully deployed it in 16 hours.",
+            },
+            {
+                type: "collapse",
+                title: "Algorithm",
+                id: "expense-tracker-algorithm",
+                items: [
+                    {
+                        type: "text",
+                        content: "Every pathname of the url defines a new tracker.",
+                    },
+                    {
+                        type: "text",
+                        content: "As i didnt want to get into user authentication and database management,",
+                    },
+                    {
+                        type: "text",
+                        content: "I developed a unique way of authentication without user login.",
+                    },
+                    {
+                        type: "text",
+                        content: "When someone creates a new tracker, he/she can protect the route by setting a password.",
+                    },
+                    {
+                        type: "text",
+                        content: "They can then share the route with others and they can access the tracker by entering the password.",
+                    },
+                    {
+                        type: "text",
+                        content: "OR",
+                    },
+                    {
+                        type: "text",
+                        content: "The can use it on any device by just entering the password.",
+                    },
+                ]
+            },
+            {
+                type: "chips",
+                title: "Tech/Learn Stack",
+                content: [
+                    { text: "React", icon: <SiReact className="timeline-tech-icon" /> },
+                    { text: "FastAPI", icon: <SiFastapi className="timeline-tech-icon" /> },
+                    { text: "Deta Base", icon: <BiCircle className="timeline-tech-icon" /> },
+                    { text: "Html", icon: <SiHtml5 className="timeline-tech-icon" /> },
+                    { text: "CSS", icon: <SiCss3 className="timeline-tech-icon" /> },
+                ]
+            },
+            {
+                type: "links",
+                content: [
+                    { text: "Expense Tracker", link: expenseTrackerURL },
+                    { text: "Github", link: expenseTrackerGithubURL },
+                ]
+            }
+        ]
+    }
+
+    const reactGlobalSearchNPM = {
+        title: "Global Search NPM",
+        id: "global-search-npm",
+        oppositeContent: "Oct 2022",
+
+        items: [
+            {
+                type: "text",
+                content: "A global search modal to navigate through your website with/without a mouse.",
+            },
+            {
+                type: "text",
+                content: "Having a global search modal in your application makes the website a lot more fluid and user experience much better.",
+            },
+            {
+                type: "text",
+                content: "I created it as a NPM package so that it can be used in any react application.",
+            },
+            {
+                type: "text",
+                content: "The package is fully customizable through props.",
+            },
+            {
+                type: "collapse",
+                title: "Usage",
+                id: "global-search-npm-usage",
+                items: [
+                    {
+                        type: "list",
+                        content: [
+                            "You could open the search modal by (developer defined) shortcuts (ctrl + k, ctrl + f, etc.) or by clicking on the search icon.",
+                            "The search modal is a full screen modal which can be closed by clicking on the close button or by pressing the escape key.",
+                            "Search and navigate through the results using the keyboard (up, down, enter, escape).",
+                        ]
+                    }
+                ]
+            },
+            {
+                type: "chips",
+                title: "Tech/Learn Stack",
+                content: [
+                    { text: "React", icon: <SiReact className="timeline-tech-icon" /> },
+                    { text: "NPM", icon: <SiNpm className="timeline-tech-icon" /> },
+                    { text: "Html", icon: <SiHtml5 className="timeline-tech-icon" /> },
+                    { text: "CSS", icon: <SiCss3 className="timeline-tech-icon" /> },
+                ]
+            },
+            {
+                type: "links",
+                content: [
+                    { text: "Github", link: globalSearchGithubURL },
+                    { text: "NPM", link: globalSearchNPMURL },
+                ],
+            }
+        ]
+    }
+
 
     const projects = [
         imagesDashboardData,
-        dockFormsData,
         codeRoomsData,
+        // portfolioWebsiteData,
+        reactGlobalSearchNPM,
+        mnistData,
+        binaryTreeData,
+        dockFormsData,
+        expenseTrackerData,
+        pastebinData,
         mathsyraData,
-        hotelManagemantData,
         todoAppData,
-        mnistData,
+        hotelManagemantData,
         terminalQuizData,
-        pastebinData,
-        binaryTreeData,
     ]
 
     // useEffect(() => {