Add configuration for skills section title and to exclude section (#158)
This commit is contained in:
parent
04dfc6e659
commit
4b96b84c31
3 changed files with 40 additions and 30 deletions
|
|
@ -27,6 +27,7 @@ const skillsData: SkillsSection = {
|
|||
skillSets: [
|
||||
{
|
||||
title: 'I already know',
|
||||
pdfTitle: 'Technologies',
|
||||
skills: [
|
||||
react({
|
||||
level: 5,
|
||||
|
|
@ -62,10 +63,12 @@ const skillsData: SkillsSection = {
|
|||
},
|
||||
{
|
||||
title: 'I want to learn',
|
||||
excludeFromPdf: true,
|
||||
skills: [apolloGraphql(), astro(), supabase(), cypress()],
|
||||
},
|
||||
{
|
||||
title: 'I speak',
|
||||
pdfTitle: 'Languages',
|
||||
skills: [
|
||||
{ icon: 'circle-flags:pl', name: 'Polish - native' },
|
||||
{ icon: 'circle-flags:us', name: 'English - C1' },
|
||||
|
|
|
|||
|
|
@ -14,38 +14,43 @@ const {
|
|||
<SectionHeading>{title}</SectionHeading>
|
||||
<div class="flex flex-col gap-5">
|
||||
{
|
||||
skillSets.map((skillSet) => (
|
||||
<div>
|
||||
<div class="text-base font-extrabold text-gray-900">{skillSet.title}</div>
|
||||
<div class="mt-2 flex flex-wrap gap-3.5 text-sm text-gray-700">
|
||||
{skillSet.skills.map((skill) => {
|
||||
if ('level' in skill) {
|
||||
return (
|
||||
<div class="flex h-6 w-fit overflow-hidden rounded">
|
||||
<div class="flex items-center bg-gray-100 pl-2.5 pr-2 font-medium">{skill.name}</div>
|
||||
<div class="flex items-center bg-gray-200 pr-2.5 pl-2 font-normal">{skill.level}/5</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
skillSets.map(
|
||||
(skillSet) =>
|
||||
!skillSet.excludeFromPdf && (
|
||||
<div>
|
||||
<div class="text-base font-extrabold text-gray-900">{skillSet.pdfTitle || skillSet.title}</div>
|
||||
<div class="mt-2 flex flex-wrap gap-3.5 text-sm text-gray-700">
|
||||
{skillSet.skills.map((skill) => {
|
||||
if ('level' in skill) {
|
||||
return (
|
||||
<div class="flex h-6 w-fit overflow-hidden rounded">
|
||||
<div class="flex items-center bg-gray-100 pl-2.5 pr-2 font-medium">{skill.name}</div>
|
||||
<div class="flex items-center bg-gray-200 pr-2.5 pl-2 font-normal">{skill.level}/5</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (skill.name.includes(' - ')) {
|
||||
return (
|
||||
<div class="flex h-6 w-fit overflow-hidden rounded">
|
||||
<div class="flex items-center bg-gray-100 pl-2.5 pr-2 font-medium">
|
||||
{skill.name.split(' - ')[0]}
|
||||
</div>
|
||||
<div class="flex items-center bg-gray-200 pr-2.5 pl-2 font-normal">
|
||||
{skill.name.split(' - ')[1]}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (skill.name.includes(' - ')) {
|
||||
return (
|
||||
<div class="flex h-6 w-fit overflow-hidden rounded">
|
||||
<div class="flex items-center bg-gray-100 pl-2.5 pr-2 font-medium">
|
||||
{skill.name.split(' - ')[0]}
|
||||
</div>
|
||||
<div class="flex items-center bg-gray-200 pr-2.5 pl-2 font-normal">
|
||||
{skill.name.split(' - ')[1]}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <div class="flex h-6 w-fit items-center rounded bg-gray-100 px-2.5 font-medium">{skill.name}</div>;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
return (
|
||||
<div class="flex h-6 w-fit items-center rounded bg-gray-100 px-2.5 font-medium">{skill.name}</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ export interface LevelledSkill extends Tag {
|
|||
export interface SkillSet<SkillType> {
|
||||
title: string;
|
||||
skills: SkillType[];
|
||||
pdfTitle?: string;
|
||||
excludeFromPdf?: boolean;
|
||||
}
|
||||
|
||||
export interface SkillsSection {
|
||||
|
|
|
|||
Loading…
Reference in a new issue