about view done, projects mostly done, some minor styling left!

src/components/subComponents/Projects/ProjectCard.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import "../../../css/ProjectCard.css";
+import GitHubIcon from "../../../assets/icons/socials/square-github.svg?react";
+import GlobeIcon from "../../../assets/icons/socials/globe.svg?react";
+
+const ProjectCard = ({ project }) => {
+  return (
+    <div className="projectCard">
+      <div className={project.imgs.length > 1 ? "imgs" : "img"}>
+        {project.imgs.map((img, index) => (
+          <img
+            key={index}
+            src={img}
+            alt={`${project.name} screenshot ${index + 1}`}
+            style={
+              project.imgs.length > 1
+                ? { width: `${100 / project.imgs.length}%` }
+                : {}
+            }
+          />
+        ))}
+      </div>
+
+      <div className="projectInfo">
+        <h3>
+          {project.name} <span>({project.year})</span>
+        </h3>
+        <p className="projectJob">{project.job}</p>
+        <div className="projectLinks">
+        {Object.entries(project.urls).map(([key, value]) => {
+            // Determine the correct icon to render based on the key
+            const Icon = key === "ghUrl" ? GitHubIcon : GlobeIcon;
+
+            return (
+              <a
+                key={key}
+                className="socialIconAnchor"
+                target="_blank"
+                rel="noopener noreferrer"
+                href={value}
+              >
+                <Icon className="socialIcon"/>
+              </a>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCard;

src/components/subComponents/Projects/ProjectsMain.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import "../../../css/ProjectsMain.css";
+import { useState } from "react";
+import ProjectCard from "./ProjectCard";
+
+const ProjectsMain = ({
+  initialAnimation,
+  onMouseEnter,
+  onAnimationEnd,
+  projects,
+}) => {
+  const [animation, setAnimation] = useState(initialAnimation);
+
+  return (
+    <div
+      className={`projectsMain container animate__animated ${animation}`}
+      /* onMouseEnter={() => onMouseEnter(setAnimation)} */
+      onAnimationEnd={() => onAnimationEnd(setAnimation)}
+    >
+      <h2>Some of my latest projects:</h2>
+      <div className="projectsDiv">
+          {projects.map((project) => (
+            <ProjectCard key={project.id} project={project} />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default ProjectsMain;