improved mobile view of cv + added experience section
continuous-integration/drone/push Build is passing Details

pull/2/head
Guus van Meerveld 3 months ago
parent e3c73fc3fc
commit 47af546637

@ -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": ""
}
]
}

@ -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">
<Image
alt={`Professional picture of ${data.fullName}`}
as={NextImage}
width={200}
height={200}
src="/cv.jpg"
/>
<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,22 +131,39 @@ 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) => (
<Skill skill={skill} key={skill.name.toLowerCase()} />
))}
{data.skills
.sort((a, b) => b.value - a.value)
.map((skill) => (
<Skill skill={skill} key={skill.name.toLowerCase()} />
))}
<Spacer y={8} />
<h1 className="text-2xl">Programming Languages</h1>
{data.programmingLanguages.map((skill) => (
<Skill skill={skill} key={skill.name.toLowerCase()} />
))}
{data.programmingLanguages
.sort((a, b) => b.value - a.value)
.map((skill) => (
<Skill skill={skill} key={skill.name.toLowerCase()} />
))}
<Spacer y={8} />
</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) => {

@ -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(),

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

Loading…
Cancel
Save