CV Page

package.json

@@ -17,7 +17,8 @@
     "@t3-oss/env-nextjs": "^0.9.2",
     "firebase": "^10.9.0",
     "firebase-admin": "^12.0.0",
-    "next": "^14.1.0",
+    "next": "^14.1.4",
+    "node": "^21.7.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "zod": "^3.22.4"

src/components/Project.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import SingleProject from "./SingleProject";
+
+const Project = () => {
+	return (
+		<div className="mx-auto flex w-[87vw] flex-col rounded-3xl border-[2px] border-[#E0EEEE] bg-[#FFFF] py-5 shadow lg:w-[51vw]">
+			<h1 className="font-500 px-6 py-5 text-2xl text-[#101010] lg:px-8 lg:py-7 lg:text-3xl">
+				Projects
+			</h1>
+			<div className="flex flex-wrap justify-around gap-3">
+				<SingleProject />
+				<SingleProject />
+				<SingleProject />
+				<SingleProject />
+				<SingleProject />
+				<SingleProject />
+				<SingleProject />
+				<SingleProject />
+				<SingleProject />
+				<SingleProject />
+				<SingleProject />
+				<SingleProject />
+			</div>
+		</div>
+	);
+};
+
+export default Project;

src/components/SingleProject.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+const SingleProject = () => {
+	return (
+		<div
+			className="bg-[#FFFFFF]; flex h-[70px] w-80 items-center justify-around gap-3 rounded-3xl border-2 border-solid  border-[#60606033] sm:w-64 md:w-48
+		"
+		>
+			<div>
+				<img src="images/Arrow.svg" alt="Arrow" className="w-8 p-1" />
+			</div>
+			<div>
+				<h2 className="text-lg">Project X</h2>
+				<sub>apps.apple.com</sub>
+			</div>
+			<div className="w-8 p-2">
+				<a>
+					<img src="images/Arrow.svg" alt="Arrow" />
+				</a>
+			</div>
+		</div>
+	);
+};
+
+export default SingleProject;

src/components/achievements.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Certificates from "./certificates";
+const Achievements = () => {
+	const imageArray = [
+		"images/certificate.png",
+		"images/certificate.png",
+		"images/certificate.png",
+	];
+
+	// made up variables for the moment
+
+	const name = "Google UX Foundations";
+	const website = "google.com";
+	const description =
+		"This certificate covers the fundamental principles of UX design, including user research, wireframing, prototyping, and usability testing.";
+	return (
+		<div className="mx-auto flex w-[87vw] justify-between rounded-3xl border-[2px] border-[#E0EEEE] bg-[#FFFF] font-mainFont lg:w-[51vw]">
+			<div className="px-6 py-10 lg:px-8 lg:py-7">
+				<p className="font-500 text-2xl text-[#101010] lg:text-3xl">
+					Achievements
+				</p>
+				<div className="px-2 lg:px-3">
+					<Certificates
+						name={name}
+						website={website}
+						description={description}
+						image={imageArray}
+					/>
+					<div className="mt-4 border-t-2 border-dashed border-[#C0C0C066]"></div>
+					<Certificates
+						name={name}
+						website={website}
+						description={description}
+						image={imageArray}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Achievements;

src/components/certificates.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+interface certificatesProps {
+	name: string;
+	website: string;
+	description: string;
+	image: Array<string>;
+}
+
+const Certificates: React.FC<certificatesProps> = ({
+	name,
+	website,
+	description,
+	image,
+}) => {
+	return (
+		<div className="text-[0.8rem] lg:text-[1rem]">
+			<p className="pt-4 text-xl font-[400]">{name}</p>
+			<p className="h-[1rem] self-center text-[0.89rem] text-[#606060] lg:text-[0.9rem] ">
+				{website}
+			</p>
+			<div className="flex gap-5">
+				<img className="my-5" src="images/Exp_arrow.svg" />
+				<p className="flex self-center py-5 ">{description}</p>
+			</div>
+			<div className="flex flex-col gap-5">
+				{image.map((img, index) => (
+					<div className="flex flex-row gap-5" key={index}>
+						<img
+							src={img}
+							alt={`Image ${index}`}
+							className="rounded-2xl border-2 border-[#C0C0C066]"
+						/>
+						<p className="self-center">
+							Certificate Number {index + 1}
+						</p>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default Certificates;