Update Imlementation

public/.htaccess

@@ -3,7 +3,7 @@ RewriteEngine On
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteRule ^ index.html [QSA,L]
 Header set Content-Security-Policy "default-src 'self'; \
-script-src 'self' 'unsafe-inline' code.jquery.com; \
+script-src 'self' 'unsafe-inline' code.jquery.com *.cloudflareinsights.com; \
 style-src 'self' 'unsafe-inline' fonts.googleapis.com; \
 img-src 'self'; \
 font-src 'self' fonts.gstatic.com; \
@@ -19,4 +19,11 @@ block-all-mixed-content; \
 base-uri 'self'"
 Header set Referrer-Policy "strict-origin-when-cross-origin"
 Header set X-Content-Type-Options "nosniff"
-Header set X-XSS-Protection "1"
+Header set X-XSS-Protection "1"
+
+# php -- BEGIN cPanel-generated handler, do not edit
+# Set the “ea-php82” package as the default “PHP” programming language.
+<IfModule mime_module>
+  AddHandler application/x-httpd-ea-php82___lsphp .php .php8 .phtml
+</IfModule>
+# php -- END cPanel-generated handler, do not edit

public/index.html

@@ -5,11 +5,10 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="My Profile Site" />
-    <meta name="keywords" content="Dave Curriculum Vitae, e92fe1ce8a88db4d6047eb179c8f3eda5a2d3860" />
+    <meta name="description" content="Curriculum Vitae of Debraj Kundu" />
     <meta
-      http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self' 'unsafe-inline' code.jquery.com; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self'; font-src 'self' fonts.gstatic.com; connect-src 'self'; media-src 'self'; object-src 'self'; frame-src 'none'; worker-src 'self'; form-action 'self'; upgrade-insecure-requests; block-all-mixed-content; base-uri 'self'"
+      name="keywords"
+      content="Dave Curriculum Vitae, e92fe1ce8a88db4d6047eb179c8f3eda5a2d3860"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

src/details/content/experience.tsx

@@ -2,6 +2,7 @@ import { Timeline } from "@mui/lab";
 import {
   Chip,
   Container,
+  Grid,
   List,
   ListItem,
   ListItemIcon,
@@ -11,23 +12,41 @@ import {
 import { AxiosResponse } from "axios";
 import { Buffer } from "buffer";
 import { DateTime } from "luxon";
-import React, { Suspense, useCallback, useEffect, useState } from "react";
+import React, {
+  Dispatch,
+  SetStateAction,
+  Suspense,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import { CgSpinner } from "react-icons/cg";
 import { GoDotFill } from "react-icons/go";
 import { AxiosClient } from "../../HTTPClient";
+import { durationAsString } from "../../utils/date-time";
 import "./experience.sass";
 import { IWorkItem, WorkItem } from "./items/data/types/WorkItem";
 import { WorkCard } from "./items/work.card";
 
 export const Experience = () => {
+  const [expDuration, setExpDuration] = useState<string>("");
   return (
     <>
-      <Typography variant="h2" gutterBottom className="extra-padded title">
-        Experience
-      </Typography>
+      <Grid container direction="row" alignItems="baseline" wrap="nowrap">
+        <Grid item xs="auto" sm="auto" md="auto" lg="auto" xl="auto">
+          <Typography variant="h2" gutterBottom className="extra-padded title">
+            Experience
+          </Typography>
+        </Grid>
+        <Grid item xs>
+          <Typography variant="h5" gutterBottom className="extra-padded" component="h2">
+            {expDuration ? "(" + expDuration + ")" : ""}
+          </Typography>
+        </Grid>
+      </Grid>
       <Container className="root-content experience-container">
         <Suspense fallback={<CgSpinner />}>
-          <ExperienceBoard />
+          <ExperienceBoard setTotalExperience={setExpDuration} />
         </Suspense>
       </Container>
     </>
@@ -67,7 +86,7 @@ const ExperienceSkill = (props: { skills: string[] }) => {
   const [expskills, setExpskills] = useState<React.ReactElement[]>([]);
   const convertToList = useCallback(() => {
     setExpskills([]);
-    props.skills.reverse().forEach((val) => {
+    props.skills.toReversed().forEach((val) => {
       const key = Buffer.from(val, "binary").toString("base64");
       setExpskills((expskills) => [
         <Chip style={{ margin: "5px" }} label={val} key={key} />,
@@ -83,13 +102,20 @@ const ExperienceSkill = (props: { skills: string[] }) => {
   return <>{expskills}</>;
 };
 
-const ExperienceBoard = () => {
+const ExperienceBoard = (props: {
+  setTotalExperience: Dispatch<SetStateAction<string>>;
+}) => {
   const [exp, setExp] = useState<React.ReactElement[]>([]);
 
-  const handleResponse = (res: AxiosResponse) => {
+  const handleResponse = (
+    res: AxiosResponse<IWorkItem[]>,
+    setTotalExperience: Dispatch<SetStateAction<string>>
+  ) => {
     setExp([]);
     const length = res.data.length;
-    res.data.reverse().forEach((element: IWorkItem, index: number) => {
+    let start: DateTime | undefined = undefined;
+    let end: DateTime | undefined = undefined;
+    res.data.reverse().forEach((element, index) => {
       let key: string =
         element.designation + element.organization + element.from;
       key = Buffer.from(key, "binary").toString("base64");
@@ -103,17 +129,39 @@ const ExperienceBoard = () => {
         skills: <ExperienceSkill skills={element.skills} />,
       };
       if (element.include) {
+        if (!start) {
+          start = value.from;
+        } else {
+          start = DateTime.min(start, value.from);
+        }
+        if (!end && value.to) {
+          end = value.to;
+        } else if (end) {
+          if (!value.to) {
+            end = DateTime.now();
+          } else {
+            end = DateTime.max(end, value.to);
+          }
+        }
         setExp((exp) => [
           <WorkCard index={index} value={value} key={key} length={length} />,
           ...exp,
         ]);
       }
     });
+    setTotalExperience(
+      durationAsString(
+        !start ? DateTime.now() : start,
+        !end ? DateTime.now() : end
+      )
+    );
   };
 
   const dataFetch = useCallback(() => {
-    AxiosClient().get("work.list.json").then(handleResponse);
-  }, []);
+    AxiosClient()
+      .get("work.list.json")
+      .then((res) => handleResponse(res, props.setTotalExperience));
+  }, [props.setTotalExperience]);
 
   useEffect(() => {
     dataFetch();

src/details/content/items/data/types/icon.map.tsx

@@ -40,6 +40,7 @@ import {
   SiScikitlearn,
   SiSpring,
   SiSpringboot,
+  SiTerraform,
   SiTypescript,
   SiVisualstudiocode,
 } from "react-icons/si";
@@ -84,4 +85,5 @@ export const IconMap: { [key: string]: React.ReactElement<IconBaseProps> } = {
   FaLinux: React.createElement(FaLinux),
   SiJupyter: React.createElement(SiJupyter),
   SiVisualstudiocode: React.createElement(SiVisualstudiocode),
+  SiTerraform: React.createElement(SiTerraform),
 };

src/details/content/items/work.card.tsx

@@ -14,9 +14,9 @@ import {
   Grid,
   Typography,
 } from "@mui/material";
-import { DateTime, Duration } from "luxon";
 import { FaArrowRight, FaAt, FaBriefcase, FaClock } from "react-icons/fa";
 import { FaLocationDot } from "react-icons/fa6";
+import { durationAsString } from "../../../utils/date-time";
 import { WorkItem } from "./data/types/WorkItem";
 
 export type WorkCardPropType = {
@@ -26,28 +26,7 @@ export type WorkCardPropType = {
 };
 
 export const WorkCard = (props: WorkCardPropType) => {
-  let duration: Duration;
-  let durationout = "";
-
-  if (!props.value.to) {
-    duration = DateTime.now().diff(props.value.from, ["year", "months"], {
-      conversionAccuracy: "longterm",
-    });
-  } else {
-    duration = props.value.to.diff(props.value.from, ["years", "months"], {
-      conversionAccuracy: "longterm",
-    });
-  }
-
-  if (parseInt(duration.years.toFixed(0)) !== 0) {
-    durationout += duration.years.toFixed(0) + " yr";
-    durationout += Math.abs(duration.years) > 1 ? "s " : " ";
-  }
-
-  if (parseInt(duration.months.toFixed(0)) !== 0) {
-    durationout += Math.ceil(Number(duration.months.toFixed(2))) + " mth";
-    durationout += Math.abs(duration.months) > 1 ? "s " : " ";
-  }
+  const durationout = durationAsString(props.value.from, props.value.to);
 
   return (
     <TimelineItem key={props.index.toString()} className="work-edu-container">

src/nav-bar/toolbar.tsx

@@ -9,7 +9,7 @@ export const DrawerToolbar = (props: PropType) => {
   if (!props.handler) {
     return (
       <Toolbar disableGutters>
-        <Box>Image</Box>
+        <Box></Box>
       </Toolbar>
     );
   } else {

src/utils/date-time.ts

@@ -0,0 +1,30 @@
+import { DateTime, Duration } from "luxon";
+
+export const durationAsString = (from: DateTime, to?: DateTime): string => {
+  let duration: Duration;
+  let formatedString = "";
+  if (!to) {
+    duration = DateTime.now().diff(from, ["year", "months"], {
+      conversionAccuracy: "longterm",
+    });
+  } else {
+    duration = to.diff(from, ["years", "months"], {
+      conversionAccuracy: "longterm",
+    });
+  }
+
+  if (parseInt(duration.years.toFixed(0)) !== 0) {
+    formatedString += duration.years.toFixed(0) + " yr";
+    formatedString += Math.abs(duration.years) > 1 ? "s" : "";
+  }
+
+  if (parseInt(duration.months.toFixed(0)) !== 0) {
+    if (formatedString.length > 0) {
+      formatedString += " "
+    }
+    formatedString += Math.ceil(Number(duration.months.toFixed(2))) + " mth";
+    formatedString += Math.abs(duration.months) > 1 ? "s" : "";
+  }
+
+  return formatedString;
+};

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "target": "ES2023",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }