update:work history component

components/SingleWorkItem.js

@@ -0,0 +1,45 @@
+import styles from "../styles/About.module.scss";
+import { useGlobalDispatchContext } from "../context/globalContext";
+
+function SingleWorkItem({
+  company,
+  position,
+  time,
+  description,
+  link,
+  handleWorkHover,
+  handleWorkNotHover,
+}) {
+  const dispatch = useGlobalDispatchContext();
+
+  return (
+    <article
+      className={styles.workHistoryItem}
+      onMouseEnter={() =>
+        handleWorkHover(
+          company.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split(".")[0]
+        )
+      }
+      onMouseLeave={handleWorkNotHover}
+    >
+      <h3>
+        {company} ({time})
+      </h3>
+      <p>{position}</p>
+      <a
+        href={link}
+        onMouseEnter={() =>
+          dispatch({ type: "CURSOR_STYLES", cursorStyles: "link" })
+        }
+        onMouseLeave={() =>
+          dispatch({ type: "CURSOR_STYLES", cursorStyles: "default" })
+        }
+      >
+        {link.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "")}
+        <span>→</span>
+      </a>
+    </article>
+  );
+}
+
+export default SingleWorkItem;

pages/about.js

@@ -5,6 +5,8 @@ import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
 import HeadTag from "../components/HeadTag";
 import MagneticButton from "../components/MagneticButton";
+import workHistory from "../utils/work-history";
+import SingleWorkItem from "../components/SingleWorkItem";
 
 function AboutPage() {
   const dispatch = useGlobalDispatchContext();
@@ -58,12 +60,17 @@ function AboutPage() {
   };
 
   const handleWorkHover = (workItem) => {
-    if (workItem === "ditalVault") {
+    if (workItem === "hoppscotch") {
+      dispatch({
+        type: "CURSOR_STYLES",
+        cursorStyles: "link-hoppscotch",
+      });
+    } else if (workItem === "ditalvault") {
       dispatch({
         type: "CURSOR_STYLES",
         cursorStyles: "link-digitalvault",
       });
-    } else if (workItem === "quantek") {
+    } else if (workItem === "myservicecube") {
       dispatch({
         type: "CURSOR_STYLES",
         cursorStyles: "link-quantek",
@@ -207,7 +214,7 @@ function AboutPage() {
             <p data-scroll data-scroll-speed="3">
               A Front End Developer working remotely for{" "}
               <a
-                href="https://digitalvault.in/"
+                href="https://hoppscotch.io"
                 target="_blank"
                 rel="noopener noreferrer"
                 onMouseEnter={() =>
@@ -217,10 +224,10 @@ function AboutPage() {
                   dispatch({ type: "CURSOR_STYLES", cursorStyles: "default" })
                 }
               >
-                <span>Digital Vault</span>
+                <span>Hoppscotch</span>
               </a>{" "}
-              Mumbai, Nashik having 1.5 years of experience in web development,
-              mostly with Front-end but working on backend as well.
+              having 2 years of experience in web development, mostly with
+              Front-end but working on backend as well.
               <br />I am doing my final year B.tech in Computer Science apart
               from freelancing. <br />I think understanding the human experience
               is essential for creating useful and effective products that make
@@ -233,7 +240,19 @@ function AboutPage() {
       <section className={styles.workHistorySection} data-scroll-section>
         <h2>Work History</h2>
         <div className={styles.workHistoryContainer}>
-          <div
+          {workHistory.map((work) => (
+            <SingleWorkItem
+              company={work.company}
+              position={work.position}
+              time={work.time}
+              link={work.link}
+              description={work.description}
+              key={work.id}
+              handleWorkHover={handleWorkHover}
+              handleWorkNotHover={handleWorkNotHover}
+            />
+          ))}
+          {/* <div
             className={styles.workHistoryItem}
             onMouseEnter={() => handleWorkHover("ditalVault")}
             onMouseLeave={handleWorkNotHover}
@@ -289,7 +308,7 @@ function AboutPage() {
             >
               sapne.org.in <span>→</span>
             </a>
-          </div>
+          </div> */}
           {/* <div className={styles.workImageContainer}>
             {workHover.hover && (
               <motion.img

styles/globals.scss

@@ -77,6 +77,7 @@
   font-family: "Helvetica", "Arial", sans-serif;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 html,

utils/work-history.js

@@ -0,0 +1,41 @@
+const workHistory = [
+  {
+    id: 1,
+    company: "Hoppscotch",
+    position: "Product Engineer",
+    time: "2022 - Present",
+    description:
+      "Hoppscotch is light-weight, web based API development suite. It was built from ground up with ease of use and accessibility in mind providing all the functionality needed for API developers with minimalist, unobtrusive UI. It is free-to-use and as an added perk completely Open Source!",
+    link: "https://hoppscotch.io",
+  },
+
+  {
+    id: 2,
+    company: "Digital Vault",
+    position: "Front End Developer",
+    time: "2021-2022",
+    description:
+      "Digital Vault is a global services company offering business and knowledge processing services to organizations seeking higher operational effectiveness, greater flexibility and lower operating cost. We have been serving companies of all sizes which have been relying on our capabilities to leverage the benefits of globalization and gain a competitive advantage",
+    link: "https://digitalvault.in",
+  },
+  {
+    id: 3,
+    company: "Quantek",
+    position: "React Developer Internship",
+    time: "2021 - 2 Months",
+    description:
+      "Quantek is a software company that develops and maintains software for the e-commerce industry. I worked on the development of a web application that allows users to create and manage their product selling. I was responsible for the front-end development of the application.",
+    link: "https://myservicecube.com",
+  },
+  {
+    id: 4,
+    company: "Sapne NGO",
+    position: "Web Development Internship",
+    time: "2020 - 3 Months",
+    description:
+      "Sapne NGO is a non-profit organization that provides education and awareness to the underprivileged children of India. I worked on their webpage development and design.",
+    link: "https://www.sapne.org.in",
+  },
+];
+
+export default workHistory;