Stats for Experience

Author: AttAditya

src/pages/experience/index.jsx

@@ -6,6 +6,7 @@ import { Blob } from "../../components/blob";
 import { ExperienceCard } from "./card";
 
 import "./style.css";
+import { ExperienceStats } from "./stats";
 
 export function ExperiencePage() {
   const [loading, setLoading] = useState(false);
@@ -53,6 +54,8 @@ export function ExperiencePage() {
           </h1>
 
           <div className="experience-content">
+            <ExperienceStats stats={data} />
+
             <div className="experience-list">
               {
                 data.map(experience => <ExperienceCard

src/pages/experience/stats/card/index.jsx

@@ -4,10 +4,12 @@ import "./style.css";
 
 export function StatsCard({ stat, desc }) {
   return (<>
-    <Glass className="stats-card">
-      <h2 className="stat-card-title">{stat}</h2>
-      <p className="stat-card-desc">{desc}</p>
-    </Glass>
+    <div className="stats-card-container">
+      <Glass className="stats-card">
+        <h2 className="stats-card-title">{stat}</h2>
+        <p className="stats-card-desc">{desc}</p>
+      </Glass>
+    </div>
   </>);
 }
 

src/pages/experience/stats/card/style.css

@@ -1,2 +1,27 @@
+.stats-card-container {
+  flex: 1;
+}
+
 .stats-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  gap: 0;
+}
+
+.stats-card-title {
+  font-size: 6rem;
+  font-weight: 600;
+  text-align: center;
+}
+
+.stats-card-desc {
+  font-size: 1rem;
+  text-align: center;
+  color: var(--text-secondary);
 }
+

src/pages/experience/stats/index.jsx

@@ -2,14 +2,66 @@ import { StatsCard } from "./card";
 
 import "./style.css";
 
-export function ExperienceStats() {
+export function ExperienceStats({ stats }) {
+  const findMonths = (exp) => {
+    const { start, end, professional } = exp;
+    if (!professional) return 0;
+    
+    const startDate = new Date(start);
+    const endDate = end ? new Date(end) : new Date();
+
+    const months = (
+      endDate.getFullYear() - startDate.getFullYear()
+    ) * 12 + (endDate.getMonth() - startDate.getMonth()) + 1;
+    
+    return months;
+  }
+
+  const experienceMonths = stats.reduce(
+    (acc, exp) => findMonths(exp) + acc, 0
+  );
+
+  const experienceDomains = new Set(stats.reduce(
+    (acc, exp) => ([
+      ...exp.tags.domains,
+      ...acc,
+    ]), []
+  )).size;
+
+  const experienceTools = new Set(stats.reduce(
+    (acc, exp) => ([
+      ...exp.tags.tools,
+      ...acc,
+    ]), []
+  )).size;
+
   return (<>
     <div className="stats">
       <div className="stats-rows">
-        <StatsCard stat={9} desc={"months of experience"} />
-        <div className="stat-cols">
-          <StatsCard stat={9} desc={"months of experience"} />
-          <StatsCard stat={9} desc={"months of experience"} />
+        <div className="stats-cols">
+        <StatsCard
+          stat={
+            experienceMonths > 12
+            ? (experienceMonths / 12).toFixed(1)
+            : experienceMonths
+          }
+          desc={
+            experienceMonths > 12
+            ? "years of experience"
+            : "months of experience"
+          }
+        />
+        </div>
+        <div className="stats-cols">
+          <StatsCard
+            stat={experienceDomains}
+            desc={"domains worked in"}
+          />
+          
+          <StatsCard
+            stat={experienceTools}
+            desc={"tools used"}
+          />
         </div>
       </div>
     </div>

src/pages/experience/stats/style.css

@@ -4,7 +4,7 @@
 }
 
 .stats-cols {
-  flex: 1;
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -14,7 +14,7 @@
 }
 
 .stats-rows {
-  flex: 1;
+  flex-grow: 1;
   display: flex;
   flex-direction: row;
   align-items: stretch;
@@ -23,3 +23,13 @@
   height: 100%;
 }
 
+@media screen and (max-width: 768px) {
+  .stats-rows {
+    flex-direction: column;
+  }
+  
+  .stats-cols {
+    flex-direction: row;
+  }  
+}
+

src/pages/experience/style.css

@@ -47,7 +47,7 @@
 }
 
 .experience-list {
-  width: 100%;
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;