improved mobile view of cv + added experience section

data/cv.json

@@ -45,12 +45,19 @@
 			"skills": ["Mathematics", "Neuroscience", "Computer science"]
 		},
 		{
-			"title": "VWO (NT&G)",
+			"title": "Highschool VWO (NT&G)",
 			"timeFrame": "2016 - 2022",
 			"institution": "RSG Pantarijn MHV Wageningen",
 			"location": "Wageningen, Netherlands",
 			"skills": ["Biology", "Physics", "Mathematics"]
 		}
 	],
-	"experience": []
+	"experience": [
+		{
+			"title": "Albert Heijn",
+			"timeFrame": "2020 - 2023",
+			"role": "Store employee",
+			"description": ""
+		}
+	]
 }

src/app/cv/Cv.tsx

@@ -14,6 +14,7 @@ import { Fragment } from "react";
 
 import CvProps, {
 	Education as EducationProps,
+	Experience as ExperienceProps,
 	Skill as SkillProps
 } from "@models/cv";
 
@@ -69,22 +70,49 @@ const Education: Component<{ education: EducationProps }> = ({ education }) => {
 	);
 };
 
+const Experience: Component<{ experience: ExperienceProps }> = ({
+	experience
+}) => {
+	return (
+		<Card>
+			<CardBody>
+				<div className="flex justify-between">
+					<div className="flex flex-col">
+						<h1 className="text-md">
+							{experience.role} <span className="text-default-500">at</span>{" "}
+							{experience.title}
+						</h1>
+						<h2 className="text-small text-default-500">
+							{experience.timeFrame}
+						</h2>
+					</div>
+				</div>
+
+				<Spacer y={4} />
+			</CardBody>
+		</Card>
+	);
+};
+
 export const Cv: Component<{ data: CvProps }> = ({ data }) => {
 	return (
-		<div className="container mx-auto min-h-screen py-8">
-			<div className="flex items-center">
+		<div className="px-2 container mx-auto min-h-screen py-8">
+			<div className="md:flex items-center">
+				<div className="flex justify-center">
 					<Image
 						alt={`Professional picture of ${data.fullName}`}
 						as={NextImage}
+						className="mx-auto md:mx-0"
 						width={200}
 						height={200}
 						src="/cv.jpg"
 					/>
+				</div>
 
 				<Spacer x={8} />
 
-				<div className="w-full flex justify-between">
-					<div>
+				<div className="text-center md:text-left flex justify-between">
+					<div className="w-full">
 						<h1 className="text-4xl">{data.fullName}</h1>
 						<Spacer y={4} />
 						<h1 className="text-2xl text-default-600">{data.role}</h1>
@@ -103,7 +131,9 @@ export const Cv: Component<{ data: CvProps }> = ({ data }) => {
 				<div className="w-full lg:w-1/3">
 					<h1 className="text-2xl">Skills</h1>
 
-					{data.skills.map((skill) => (
+					{data.skills
+						.sort((a, b) => b.value - a.value)
+						.map((skill) => (
 							<Skill skill={skill} key={skill.name.toLowerCase()} />
 						))}
 
@@ -111,7 +141,9 @@ export const Cv: Component<{ data: CvProps }> = ({ data }) => {
 
 					<h1 className="text-2xl">Programming Languages</h1>
 
-					{data.programmingLanguages.map((skill) => (
+					{data.programmingLanguages
+						.sort((a, b) => b.value - a.value)
+						.map((skill) => (
 							<Skill skill={skill} key={skill.name.toLowerCase()} />
 						))}
 
@@ -119,6 +151,19 @@ export const Cv: Component<{ data: CvProps }> = ({ data }) => {
 				</div>
 				<Spacer x={8} />
 				<div className="w-full lg:w-2/3">
+					<h1 className="text-2xl">Experience</h1>
+
+					{data.experience.map((experience) => {
+						return (
+							<Fragment key={experience.title.toLowerCase()}>
+								<Spacer y={4} />
+								<Experience experience={experience} />
+							</Fragment>
+						);
+					})}
+
+					<Spacer y={8} />
+
 					<h1 className="text-2xl">Education</h1>
 
 					{data.education.map((education) => {

src/models/cv.ts

@@ -25,6 +25,8 @@ const ExperienceModel = z.object({
 	description: z.string()
 });
 
+export type Experience = z.infer<typeof ExperienceModel>;
+
 export const CvPropsModel = z.object({
 	fullName: z.string(),
 	role: z.string(),

src/utils/cv.ts

@@ -1,4 +1,3 @@
-import { readJson } from "fs-extra";
 import path from "path";
 
 import { readAndParseJsonFile } from "./json";