Component for project experience

src/_globalColor.scss

@@ -56,6 +56,12 @@ $experienceCardBannerLG: linear-gradient(
   rgba(0, 0, 0, 0.7),
   rgba(0, 0, 0, 0.5)
 );
+$projectCardBannerLG: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
+
+$projectCardBlurredDivLG: linear-gradient(
+  rgba(0, 0, 0, 0.4),
+  rgba(0, 0, 0, 0.2)
+);
 
 // borders
 $progressBarBackground: rgb(243, 239, 239);

src/components/header/Header.js

@@ -6,6 +6,7 @@ import StyleContext from "../../contexts/StyleContext";
 import {
   greeting,
   workExperiences,
+  projectExperiences,
   skillsSection,
   openSource,
   blogSection,
@@ -16,6 +17,7 @@ import {
 function Header() {
   const {isDark} = useContext(StyleContext);
   const viewExperience = workExperiences.display;
+  const viewProjectExperience = projectExperiences.display;
   const viewOpenSource = openSource.display;
   const viewSkills = skillsSection.display;
   const viewAchievement = achievementSection.display;
@@ -49,6 +51,11 @@ function Header() {
               <a href="#experience">Work Experiences</a>
             </li>
           )}
+          {viewProjectExperience && (
+            <li>
+              <a href="#projectExperience">Project Experiences</a>
+            </li>
+          )}
           {viewOpenSource && (
             <li>
               <a href="#opensource">Open Source</a>

src/components/projectCard/ProjectCard.js

@@ -0,0 +1,87 @@
+import React, {useState, createRef} from "react";
+import "./ProjectCard.scss";
+import ColorThief from "colorthief";
+
+export default function ProjectCard({cardInfo, isDark}) {
+  const [colorArrays, setColorArrays] = useState([]);
+  const imgRef = createRef();
+
+  function getColorArrays() {
+    const colorThief = new ColorThief();
+    setColorArrays(colorThief.getColor(imgRef.current));
+  }
+
+  function rgb(values) {
+    return typeof values === "undefined"
+      ? null
+      : "rgb(" + values.join(", ") + ")";
+  }
+
+  const GetDescBullets = ({descBullets, isDark}) => {
+    return descBullets
+      ? descBullets.map((item, i) => (
+          <li
+            key={i}
+            className={isDark ? "subTitle dark-mode-text" : "subTitle"}
+          >
+            {item}
+          </li>
+        ))
+      : null;
+  };
+
+  return (
+    <div className={isDark ? "project-card-dark" : "experience-card"}>
+      <div style={{background: rgb(colorArrays)}} className="experience-banner">
+        <div className="experience-blurred_div"></div>
+        <div className="experience-div-company">
+          <h5 className="experience-text-company">{cardInfo.projectname}</h5>
+        </div>
+
+        <img
+          crossOrigin={"anonymous"}
+          ref={imgRef}
+          className="experience-roundedimg"
+          src={cardInfo.projectlanguage}
+          alt={cardInfo.language}
+          onLoad={() => getColorArrays()}
+        />
+      </div>
+      <div className="experience-text-details">
+        <h5
+          className={
+            isDark
+              ? "experience-text-role dark-mode-text"
+              : "experience-text-role"
+          }
+        >
+          {cardInfo.role}
+        </h5>
+        <h5
+          className={
+            isDark
+              ? "experience-text-date dark-mode-text"
+              : "experience-text-date"
+          }
+        >
+          {cardInfo.date}
+        </h5>
+        <p
+          className={
+            isDark
+              ? "subTitle experience-text-desc dark-mode-text"
+              : "subTitle experience-text-desc"
+          }
+        >
+          {cardInfo.desc}
+        </p>
+        <ul>
+          <GetDescBullets descBullets={cardInfo.descBullets} isDark={isDark} />
+        </ul>
+      </div>
+      <div className="project-image">
+        <img src={cardInfo.projectImage} alt={cardInfo.projectname} />
+      </div>
+    </div>
+  );
+}

src/components/projectCard/ProjectCard.scss

@@ -0,0 +1,160 @@
+@import "../../_globalColor";
+
+.project-card {
+  position: relative;
+  background-color: $lightBackground2;
+  box-shadow: $lightBoxShadowDark 0px 10px 30px -15px;
+  border-radius: 10px;
+  border: 1px solid $lightBorder1;
+}
+
+.project-card-dark {
+  position: relative;
+  background-color: $darkBackground;
+  box-shadow: $lightBoxShadowDark 0px 10px 30px -15px;
+  border-radius: 10px;
+  border: 1px solid $lightBorder1;
+}
+
+.project-card:hover {
+  box-shadow: $lightBoxShadowDark 0px 20px 30px -10px;
+}
+
+.experience-banner {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 150%;
+  background: $experienceCardBannerLG;
+  border-radius: 10px 10px 0px 0px;
+  -webkit-filter: blur(0px);
+  -moz-filter: blur(0px);
+  -o-filter: blur(0px);
+  -ms-filter: blur(0px);
+  filter: blur(0px);
+  height: 11rem;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.project-image {
+  height: 30rem;
+}
+
+.experience-blurred_div {
+  position: absolute;
+  background: $experienceCardBlurredDivLG;
+  -webkit-filter: blur(5px);
+  -moz-filter: blur(5px);
+  -o-filter: blur(5px);
+  -ms-filter: blur(5px);
+  filter: blur(5px);
+  height: 11rem;
+  top: 0;
+  left: 0;
+  width: 100%;
+  border-radius: 10px 10px 0px 0px;
+}
+
+.experience-div-company {
+  position: absolute;
+  background: transparent;
+  height: 9rem;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.experience-text-company {
+  text-align: center;
+  padding: 1.5rem;
+  margin: 0;
+  color: $lightBackground1;
+  font-size: 25px;
+  text-align: center;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.experience-roundedimg {
+  position: absolute;
+  object-fit: cover;
+  left: 0;
+  right: 0;
+  top: 7rem;
+  margin-left: auto;
+  margin-right: auto;
+  width: 8rem;
+  height: 8rem;
+  box-shadow: 0 0.5rem 1rem $lightBoxShadowDarker;
+  border-radius: 50%;
+}
+
+.experience-text-role {
+  text-align: center;
+  color: $textColor;
+  font-weight: 700;
+  font-size: 25px;
+  margin: 0px;
+  padding-top: 1.5rem;
+  line-height: normal;
+}
+.dark-mode-text {
+  color: $textColorDark !important;
+}
+.experience-text-date {
+  text-align: center;
+  color: $textColor;
+  font-size: 20px;
+  margin: 0px;
+  padding-top: 1rem;
+  font-weight: 600;
+}
+
+.experience-text-desc {
+  text-align: center;
+}
+
+.experience-text-details {
+  padding: 1.5rem;
+  margin-top: 2rem;
+}
+
+/* Media Query */
+
+@media (max-width: 1380px) {
+  .experience-text-role {
+    padding-top: 0.5rem;
+    font-size: 22px;
+  }
+  .experience-text-company {
+    font-size: 22px;
+  }
+  .experience-text-date {
+    font-size: 18px;
+  }
+  .experience-roundedimg {
+    width: 6.5rem;
+    height: 6.5rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .experience-text-role {
+    font-size: 22px;
+  }
+  .experience-text-company {
+    font-size: 22px;
+  }
+  .experience-text-date {
+    font-size: 18px;
+  }
+  .experience-text-desc {
+    font-size: 16px;
+  }
+}

src/containers/Main.js

@@ -6,6 +6,7 @@ import StackProgress from "./skillProgress/skillProgress";
 import WorkExperience from "./workExperience/WorkExperience";
 import Projects from "./projects/Projects";
 import StartupProject from "./StartupProjects/StartupProject";
+import ProjectExperience from "./projectExperience/ProjectExperience";
 import Achievement from "./achievement/Achievement";
 import Blogs from "./blogs/Blogs";
 import Footer from "../components/footer/Footer";
@@ -56,6 +57,7 @@ const Main = () => {
             <StackProgress />
             <Education />
             <WorkExperience />
+            <ProjectExperience />
             <Projects />
             <StartupProject />
             <Achievement />

src/containers/projectExperience/ProjectExperience.js

@@ -0,0 +1,50 @@
+import React, {useContext} from "react";
+import "./ProjectExperience.scss";
+// import ExperienceCard from "../../components/experienceCard/ExperienceCard";
+import ProjectCard from "../../components/projectCard/ProjectCard";
+import {projectExperiences} from "../../portfolio";
+import {Fade} from "react-reveal";
+import StyleContext from "../../contexts/StyleContext";
+
+export default function ProjectExperience() {
+  const {isDark} = useContext(StyleContext);
+
+  // This could be any date you choose to filter experiences by.
+  const cutoffDate = new Date("2023-01-01");
+
+  if (projectExperiences.display) {
+    return (
+      <div id="experience">
+        <Fade bottom duration={1000} distance="20px">
+          <div className="experience-container" id="projectExperience">
+            <div>
+              <h1 className="experience-heading">Project Experiences</h1>
+              <div className="experience-cards-div">
+                {projectExperiences.experience
+                  //.filter(card => new Date(card.date) >= cutoffDate)
+                  .map((card, i) => {
+                    return (
+                      <ProjectCard
+                        key={i}
+                        isDark={isDark}
+                        cardInfo={{
+                          projectname: card.projectName, // changed from card.company to card.projectName
+                          desc: card.desc,
+                          date: card.date,
+                          projectlanguage: card.projectlogo, // changed from card.companylogo to card.projectlogo
+                          role: card.role,
+                          descBullets: card.descBullets,
+                          projectImage: card.projectImage
+                        }}
+                      />
+                    );
+                  })}
+              </div>
+            </div>
+          </div>
+        </Fade>
+      </div>
+    );
+  }
+  return null;
+}

src/containers/projectExperience/ProjectExperience.scss

@@ -0,0 +1,37 @@
+.experience-cards-div {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+  gap: 1rem 1rem;
+}
+
+.experience-heading {
+  font-size: 56px;
+  font-weight: 400;
+}
+
+.experience-container {
+  display: flex;
+  width: 90%;
+  padding: 20px 10px;
+  margin: 0px auto;
+  margin-top: 2rem;
+}
+
+.experience-container > * {
+  flex: 1;
+}
+
+/* Media Query */
+
+@media (max-width: 1380px) {
+  .experience-heading {
+    font-size: 40px;
+  }
+}
+
+@media (max-width: 768px) {
+  .experience-heading {
+    font-size: 30px;
+    text-align: center;
+  }
+}