juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add configuration for skills section title and to exclude section (#158)

Browse source
This commit is contained in:
Szymon Kin 2023-01-18 20:39:22 +01:00 committed by GitHub
parent 04dfc6e659
commit 4b96b84c31
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/data/sections/skills.ts
View file

@ -27,6 +27,7 @@ const skillsData: SkillsSection = {
skillSets: [ skillSets: [
{ {
title: 'I already know', title: 'I already know',
pdfTitle: 'Technologies',
skills: [ skills: [
react({ react({
level: 5, level: 5,
@ -62,10 +63,12 @@ const skillsData: SkillsSection = {
}, },
{ {
title: 'I want to learn', title: 'I want to learn',
excludeFromPdf: true,
skills: [apolloGraphql(), astro(), supabase(), cypress()], skills: [apolloGraphql(), astro(), supabase(), cypress()],
}, },
{ {
title: 'I speak', title: 'I speak',
pdfTitle: 'Languages',
skills: [ skills: [
{ icon: 'circle-flags:pl', name: 'Polish - native' }, { icon: 'circle-flags:pl', name: 'Polish - native' },
{ icon: 'circle-flags:us', name: 'English - C1' }, { icon: 'circle-flags:us', name: 'English - C1' },

65
src/pdf/sections/skills-section.pdf.astro
View file

@ -14,38 +14,43 @@ const {
<SectionHeading>{title}</SectionHeading> <SectionHeading>{title}</SectionHeading>
<div class="flex flex-col gap-5"> <div class="flex flex-col gap-5">
{ {
skillSets.map((skillSet) => ( skillSets.map(
<div> (skillSet) =>
<div class="text-base font-extrabold text-gray-900">{skillSet.title}</div> !skillSet.excludeFromPdf && (
<div class="mt-2 flex flex-wrap gap-3.5 text-sm text-gray-700"> <div>
{skillSet.skills.map((skill) => { <div class="text-base font-extrabold text-gray-900">{skillSet.pdfTitle || skillSet.title}</div>
if ('level' in skill) { <div class="mt-2 flex flex-wrap gap-3.5 text-sm text-gray-700">
return ( {skillSet.skills.map((skill) => {
<div class="flex h-6 w-fit overflow-hidden rounded"> if ('level' in skill) {
<div class="flex items-center bg-gray-100 pl-2.5 pr-2 font-medium">{skill.name}</div> return (
<div class="flex items-center bg-gray-200 pr-2.5 pl-2 font-normal">{skill.level}/5</div> <div class="flex h-6 w-fit overflow-hidden rounded">
</div> <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(' - ')) { if (skill.name.includes(' - ')) {
return ( return (
<div class="flex h-6 w-fit overflow-hidden rounded"> <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"> <div class="flex items-center bg-gray-100 pl-2.5 pr-2 font-medium">
{skill.name.split(' - ')[0]} {skill.name.split(' - ')[0]}
</div> </div>
<div class="flex items-center bg-gray-200 pr-2.5 pl-2 font-normal"> <div class="flex items-center bg-gray-200 pr-2.5 pl-2 font-normal">
{skill.name.split(' - ')[1]} {skill.name.split(' - ')[1]}
</div> </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>; 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>
)
)
} }
</div> </div>
</div> </div>

2
src/types/skills-section.ts
View file

@ -7,6 +7,8 @@ export interface LevelledSkill extends Tag {
export interface SkillSet<SkillType> { export interface SkillSet<SkillType> {
title: string; title: string;
skills: SkillType[]; skills: SkillType[];
pdfTitle?: string;
excludeFromPdf?: boolean;
} }
export interface SkillsSection { export interface SkillsSection {