Updated projects

package.json

@@ -21,8 +21,7 @@
 		"react-tsparticles": "^1.28.0",
 		"react-typed": "^1.2.0",
 		"react-vertical-timeline-component": "^2.6.0",
-		"styled-components": "^5.2.0",
-		"use-ackee": "^3.0.0"
+		"styled-components": "^5.2.0"
 	},
 	"scripts": {
 		"start": "react-scripts start",

src/components/Left.js

@@ -1,49 +1,13 @@
 import {Col} from 'react-bootstrap'
 import LeftText from './LeftText'
 import React from 'react'
-import loadable from '@loadable/component'
+// import loadable from '@loadable/component'
 
-const Particles = loadable(() => import('react-tsparticles'))
+// const Particles = loadable(() => import('react-tsparticles'))
 
 function Left() {
 	return (
 		<Col md className='LeftSec'>
-			<Particles
-				className='particlejs'
-				params={{
-					particles: {
-						number: {
-							value: 50,
-						},
-						size: {
-							value: 2,
-						},
-						links: {
-							color: '#ffffff',
-							distance: 150,
-							enable: true,
-							opacity: 0.5,
-							width: 1,
-						},
-						move: {
-							direction: 'none',
-							enable: true,
-							outMode: 'bounce',
-							random: false,
-							speed: 6,
-							straight: false,
-						},
-					},
-					interactivity: {
-						events: {
-							onhover: {
-								enable: true,
-								mode: 'grab',
-							},
-						},
-					},
-				}}
-			/>
 			<LeftText />
 		</Col>
 	)

src/data/homecards.json

@@ -5,47 +5,63 @@
 			"value": [
 				{
 					"id": 1,
-					"title": "Integrated Autonomous guided wheelchair",
-					"projectRoute": "/project/1",
-					"badgeTitle": ["Integerated project"],
+					"title": "Chatbox",
+					"description": "This is an application developed for an in-depth understanding of WebSockets. For the front end, I have used React JS and sockets IO & For the backend, implemented sockets using Express JS.",
+					"projectRoute": "https://chatbox.pranjaljain.me",
+					"githubUrl": "https://github.com/pranjaljain0/chatbox-frontend",
+					"badgeTitle": ["Socket", "ReactJS", "ExpressJS", "HTML", "CSS"],
 					"initialColor": "#56CCF2",
 					"finalColor": "#2F80ED",
 					"language": "C++"
 				},
 				{
 					"id": 2,
-					"title": "Multi terrain vehicle",
-					"projectRoute": "#",
-					"badgeTitle": ["Integerated project"],
+					"title": "The Yellow Mushroom",
+					"description": "Created a website home page for a start-up company that is in the field of Design and Development. Created the frontend using React JS using multiple custom-made reusable components.",
+					"projectRoute": "https://theyellowmushrooms.com",
+					"badgeTitle": ["ReactJS", "ExpressJS", "HTML", "CSS"],
 					"initialColor": "#373B44",
 					"finalColor": "#4286f4",
 					"language": "Java"
 				},
 				{
 					"id": 3,
-					"title": "KOSK",
-					"projectRoute": "#",
-					"badgeTitle": ["Mobile", "Web"],
+					"title": "Refactored Waffles",
+					"description": "This is a web application made as a submission for the MongoDB Atlas Hackathon 2021, This project is an E-commerce store purely made using tools provided by MondoDB",
+					"projectRoute": "https://refactoredwaffles.pranjaljain.me/",
+					"githubUrl": "https://github.com/pranjaljain0/refactored-waffle",
+					"badgeTitle": ["NextJS", "MongoDB", "HTML", "CSS"],
 					"initialColor": "#f12711",
 					"finalColor": "#f5af19",
 					"language": "JavaScript"
 				},
 				{
 					"id": 4,
-					"title": "Edudroid",
-					"projectRoute": "#",
-					"badgeTitle": ["Desktop"],
+					"title": "ZenHotline",
+					"projectRoute": "https://dev.zenhotline.com/",
+					"description": "Initiated a medical teleconsultation platform using reactJS as a front-end framework created almost 40+ reusable components Executed a middleware with ExpressJS that consisted of 60+ endpoints to perform backend operations Integrated nearly 10 accessories tools to schedule, maintain and organize meetings/video calls between clients and professionals",
+					"badgeTitle": ["ReactJS", "ExpressJS", "HTML", "CSS", "Firebase"],
 					"initialColor": "#11998e",
 					"finalColor": "#38ef7d",
 					"language": "Haskell"
 				},
 				{
 					"id": 5,
-					"title": "Smart Grid",
-					"projectRoute": "#",
-					"badgeTitle": ["Internet of things"],
-					"initialColor": "#e1eec3",
-					"finalColor": "#f05053",
+					"title": "Cards",
+					"projectRoute": "https://cards.pranjaljain.me",
+					"description": "Its a project where I was exploring integration of 3D objects which are exported from blender to the web applications which can in turn make the web a more enhanced experience for users.",
+					"badgeTitle": [
+						"ReactJS",
+						"ExpressJS",
+						"HTML",
+						"CSS",
+						"ModelViewer",
+						"Blender",
+						"ThreeJS"
+					],
+					"githubUrl": "https://github.com/pranjaljain0/Credit-Card-Landing-Page-UI",
+					"initialColor": "#f05053",
+					"finalColor": "#e1eec3",
 					"language": "Ruby"
 				}
 			],
@@ -139,6 +155,17 @@
 		{
 			"title": "Education",
 			"value": [
+				{
+					"title": "New Jersey Institute of Technology",
+					"duration": "2021-2023",
+					"location_city": "Newark",
+					"location_state": "New Jersey",
+					"location_country": "US",
+					"description": "Masters of Scinece",
+					"sec_details": "Computer Science & Technology",
+					"color": "#fef54b",
+					"text": "#1d1d1d"
+				},
 				{
 					"title": "Avantika University",
 					"duration": "2017-2021",

src/index.css

@@ -40,6 +40,7 @@ body,
 
 .mainRow {
 	height: 100%;
+	display: flex;
 }
 
 .innerContainer {
@@ -54,6 +55,7 @@ body,
 	background: linear-gradient(0deg, #1d1d1d, rgb(19, 19, 19));
 	color: #fff;
 	z-index: 999;
+	max-width: 100%;
 }
 
 .navbar_logo_container {
@@ -218,7 +220,7 @@ body,
 	top: 0;
 	bottom: 0;
 	left: 0;
-	right: 0;
+	width: 50%;
 }
 
 .preTitle {
@@ -329,6 +331,11 @@ a.projectLink {
 	color: #fff;
 }
 
+.projectGithubIcon {
+	font-size: 1.8rem;
+	margin-left: 10px;
+}
+
 .project_list_item .badge {
 	margin: 4px 6px 4px 0px;
 	font-size: 0.8em;

src/navigation/index.js

@@ -2,21 +2,8 @@ import {Route, BrowserRouter as Router, Switch} from 'react-router-dom'
 
 import React from 'react'
 import routes from './routes'
-import useAckee from 'use-ackee'
 
 export default function Routes() {
-	useAckee(
-		'/',
-		{
-			server: process.env.REACT_APP_ACKEE_DOMAIN_SERVER,
-			domainId: process.env.REACT_APP_ACKEE_DOMAIN_ID,
-		},
-		{
-			detailed: true,
-			ignoreLocalhost: true,
-		}
-	)
-
 	return (
 		<Router>
 			<Switch>

src/pages/ProjectList.js

@@ -1,19 +1,17 @@
+import {AiFillGithub} from 'react-icons/ai'
 import {Badge} from 'react-bootstrap'
 import React from 'react'
-import {useHistory} from 'react-router-dom'
 
 function ProjectList({ProjectListVal}) {
-	const history = useHistory()
-
 	return (
 		<div>
 			{ProjectListVal &&
 				ProjectListVal.map((Obj, index) => {
 					return (
-						<span
+						<a
+							href={Obj.projectRoute}
 							key={`project-list-item-${index}`}
-							className='project_list_item_link'
-							onClick={() => Obj.id && history.push(`/project/${Obj.id}`)}>
+							className='project_list_item_link'>
 							<div
 								style={{
 									background:
@@ -24,19 +22,24 @@ function ProjectList({ProjectListVal}) {
 										`)`,
 								}}
 								className='project_list_item'>
+								<h3>
+									{Obj.title}
+									{Obj.githubUrl && (
+										<a href={Obj.githubUrl}>
+											<AiFillGithub className='projectGithubIcon' />
+										</a>
+									)}
+								</h3>
 								{Object.keys(Obj.badgeTitle).map((item, index) => {
 									return (
 										<Badge pill variant='primary' className='chip' key={index}>
 											{Obj.badgeTitle[item]}
 										</Badge>
 									)
 								})}
-								<Badge pill variant='secondary' className='chip'>
-									{Obj.language}
-								</Badge>
-								<p>{Obj.title}</p>
+								<p>{Obj.description}</p>
 							</div>
-						</span>
+						</a>
 					)
 				})}
 		</div>