feat: Add separate job and education experience sections

- Create JOB_EXPERIENCES and EDUCATION_EXPERIENCES in constants
- Update Experience component to display job and education separately
- Modify ExperienceCard to handle both job and education data
- Add CGPA display for education experiences
- Implement different timeline positioning for education experiences

components/main/experience.tsx

@@ -8,18 +8,19 @@ import {
 } from "react-vertical-timeline-component";
 
 import { parseStringWithBold } from "@/lib/utils";
-import { EXPERIENCES } from "@/constants";
+import { JOB_EXPERIENCES, EDUCATION_EXPERIENCES } from "@/constants";
 import { textVariant } from "@/lib/motion";
 
 import "react-vertical-timeline-component/style.min.css";
 import { useInView } from "react-intersection-observer";
 
 type ExperienceCardProps = {
-  experience: (typeof EXPERIENCES)[number];
+  experience: (typeof JOB_EXPERIENCES | typeof EDUCATION_EXPERIENCES)[number];
+  position?: "left" | "right";
 };
 
 // Experience Card
-const ExperienceCard = ({ experience }: ExperienceCardProps) => {
+const ExperienceCard = ({ experience, position }: ExperienceCardProps) => {
   const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
 
   return (
@@ -29,13 +30,14 @@ const ExperienceCard = ({ experience }: ExperienceCardProps) => {
       date={experience.date}
       iconStyle={{ background: experience.iconBg }}
       visible={inView}
+      position={position}
       icon={
         <div className="flex justify-center items-center w-full h-full">
           <Image
             src={`/experiences/${experience.icon}`}
             width={80}
             height={80}
-            alt={experience.company_name}
+            alt={experience.name}
             className="w-[60%] h-[60%] object-contain"
             draggable={false}
           />
@@ -49,20 +51,29 @@ const ExperienceCard = ({ experience }: ExperienceCardProps) => {
           className="text-secondary text-[16px] font-semibold"
           style={{ margin: 0 }}
         >
-          {experience.company_name}
+          {experience.name}
         </p>
 
         {/* Experience Points */}
-        <ul className="mt-5 list-disc ml-5 space-y-2">
-          {experience.points.map((point, i) => (
-            <li
-              key={`experience-point-${i}`}
-              className="text-white-100 text-[14px] pl-1 tracking-wider"
-            >
-              {parseStringWithBold(point)}
-            </li>
-          ))}
-        </ul>
+        {"points" in experience && (
+          <ul className="mt-5 list-disc ml-5 space-y-2">
+            {experience.points.map((point, i) => (
+              <li
+                key={`experience-point-${i}`}
+                className="text-white-100 text-[14px] pl-1 tracking-wider"
+              >
+                {parseStringWithBold(point)}
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {/* cgpa */}
+        {"cgpa" in experience && (
+          <p className="text-white-100 text-[14px] pl-1 tracking-wider">
+            CGPA: {parseStringWithBold(experience.cgpa)}
+          </p>
+        )}
       </div>
     </VerticalTimelineElement>
   );
@@ -94,11 +105,26 @@ export const Experience = () => {
       {/* Experience Card */}
       <div className="empty-20 flex flex-col">
         <VerticalTimeline>
-          {EXPERIENCES.map((experience, i) => (
+          {JOB_EXPERIENCES.map((experience, i) => (
             <ExperienceCard key={i} experience={experience} />
           ))}
         </VerticalTimeline>
       </div>
+
+      <motion.div variants={textVariant()}>
+        <h2 className="text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]">
+          Education Experience.
+        </h2>
+      </motion.div>
+
+      {/* Experience Card */}
+      <div className="empty-20 flex flex-col">
+        <VerticalTimeline>
+          {EDUCATION_EXPERIENCES.map((experience, i) => (
+            <ExperienceCard key={i} experience={experience} position="right" />
+          ))}
+        </VerticalTimeline>
+      </div>
     </section>
   );
 };

constants/index.ts

@@ -22,22 +22,38 @@ export const SERVICES = [
   },
 ] as const;
 
-export const EXPERIENCES = [
+export const EDUCATION_EXPERIENCES = [
   {
-    title: "Self-Employed",
-    company_name: "Wordpress Content Creator/Developer",
+    title: "B.Sc. in Computer Science and Engineering",
+    name: "Brac University",
+    icon: "bracu.webp",
+    iconBg: "#E6DEDD",
+    date: "Jan 2020 - Jan 2024",
+    cgpa: "**3.82**",
+  },
+] as const;
+
+export const JOB_EXPERIENCES = [
+  {
+    title: "Full Stack Web Developer",
+    name: "Tekinouchi",
     icon: "tekinouchi.png",
     iconBg: "#E6DEDD",
-    date: "Feb 2019 - Jul 2023",
+    date: "Jan 2023 - Present",
     points: [
-      "Delivered high-quality, insightful, informative, and entertaining written content.",
-      "Set up the hosting environment in **AWS EC2, Lightsail** and custom **cpanel hostings**.",
-      "Implemented automated scraping using **Selenium** python library and published content using **wordpress REST API.**",
+      "Maintained strong skill set in various technologies to update, optimize and rectify issues with corporate website.",
+      "Maintained  version control systems such as **Git** in order to keep track of changes made to the source code.",
+      "Provided technical support and troubleshooting services when needed.",
+      "Designed creative user interfaces for websites with a focus on usability",
+      "Developed, tested and debugged web applications using **HTML5, CSS3, JS and Laravel**",
+      "Modified existing WordPress plugin or theme to add functionality.",
+      "Configured databases such as **MySQL** in order to store data securely",
+      "Integrated **third-party APIs** into web applications for enhanced functionality",
     ],
   },
   {
     title: "Frontend Web Developer",
-    company_name: "Fiver",
+    name: "Fiver",
     icon: "fiver.png",
     iconBg: "#383E56",
     date: "Feb 2023 - Jul 2023",
@@ -49,20 +65,15 @@ export const EXPERIENCES = [
     ],
   },
   {
-    title: "Full Stack Web Developer",
-    company_name: "Tekinouchi",
+    title: "Self-Employed",
+    name: "Wordpress Content Creator/Developer",
     icon: "tekinouchi.png",
     iconBg: "#E6DEDD",
-    date: "May 2023 - Present",
+    date: "Feb 2019 - Jul 2023",
     points: [
-      "Maintained strong skill set in various technologies to update, optimize and rectify issues with corporate website.",
-      "Maintained  version control systems such as **Git** in order to keep track of changes made to the source code.",
-      "Provided technical support and troubleshooting services when needed.",
-      "Designed creative user interfaces for websites with a focus on usability",
-      "Developed, tested and debugged web applications using **HTML5, CSS3, JS and Laravel**",
-      "Modified existing WordPress plugin or theme to add functionality.",
-      "Configured databases such as **MySQL** in order to store data securely",
-      "Integrated **third-party APIs** into web applications for enhanced functionality",
+      "Delivered high-quality, insightful, informative, and entertaining written content.",
+      "Set up the hosting environment in **AWS EC2, Lightsail** and custom **cpanel hostings**.",
+      "Implemented automated scraping using **Selenium** python library and published content using **wordpress REST API.**",
     ],
   },
 ] as const;