From c76651e84106effb29b05a822cfa883835a17d82 Mon Sep 17 00:00:00 2001 From: Szymon Kin <68154191+hoolek77@users.noreply.github.com> Date: Sun, 30 Oct 2022 10:29:01 +0100 Subject: [PATCH] Create skills section (#67) --- src/components/atoms/tag.astro | 10 +- .../organisms/levelled-skill-subsection.astro | 15 ++ .../organisms/skill-subsection.astro | 33 ++++ src/components/organisms/skill.astro | 4 +- .../organisms/tag-skill-subsection.astro | 28 +++ src/components/sections/main-section.astro | 8 +- src/components/sections/skills-section.astro | 14 +- src/pages/index.astro | 22 +-- src/pages/playground/skills-section.astro | 160 ++++++++++++++++++ src/pages/playground/tag.astro | 2 +- src/types/skills-section.ts | 2 +- 11 files changed, 276 insertions(+), 22 deletions(-) create mode 100644 src/components/organisms/levelled-skill-subsection.astro create mode 100644 src/components/organisms/skill-subsection.astro create mode 100644 src/components/organisms/tag-skill-subsection.astro create mode 100644 src/pages/playground/skills-section.astro diff --git a/src/components/atoms/tag.astro b/src/components/atoms/tag.astro index 7557735..7d7cb87 100644 --- a/src/components/atoms/tag.astro +++ b/src/components/atoms/tag.astro @@ -4,16 +4,14 @@ import type { IconName } from '@/types/icon'; import Icon from './icon'; export interface Props { - icon?: { - name: IconName; - color?: string; - }; + name?: IconName; + color?: string; } -const { icon } = Astro.props; +const { name, color } = Astro.props; ---
- {icon && } +
diff --git a/src/components/organisms/levelled-skill-subsection.astro b/src/components/organisms/levelled-skill-subsection.astro new file mode 100644 index 0000000..91f30a3 --- /dev/null +++ b/src/components/organisms/levelled-skill-subsection.astro @@ -0,0 +1,15 @@ +--- +import type { LevelledSkill } from '@/types/skills-section'; + +import Skill from './skill.astro'; + +export interface Props { + skills: LevelledSkill[]; +} + +const { skills } = Astro.props; +--- + +
+ {skills.map((skill) => )} +
diff --git a/src/components/organisms/skill-subsection.astro b/src/components/organisms/skill-subsection.astro new file mode 100644 index 0000000..db2915c --- /dev/null +++ b/src/components/organisms/skill-subsection.astro @@ -0,0 +1,33 @@ +--- +import Typography from '@/atoms/typography.astro'; +import type { Tag } from '@/types/common'; +import type { LevelledSkill, SkillSet } from '@/types/skills-section'; + +import LevelledSkillSubsection from './levelled-skill-subsection.astro'; +import TagSkillSubsection from './tag-skill-subsection.astro'; + +export interface Props { + skillSet: SkillSet | SkillSet; +} + +const { + skillSet: { skills, title }, +} = Astro.props; + +const isLevelledSkillSection = (skillsSectionData: Tag[] | LevelledSkill[]): skillsSectionData is LevelledSkill[] => { + if (!skillsSectionData[0]) return false; + + return (skillsSectionData[0] as LevelledSkill).level !== undefined; +}; +--- + +
+ {title} + { + isLevelledSkillSection(skills) ? ( + + ) : ( + + ) + } +
diff --git a/src/components/organisms/skill.astro b/src/components/organisms/skill.astro index fad0e6a..f6ab60a 100644 --- a/src/components/organisms/skill.astro +++ b/src/components/organisms/skill.astro @@ -18,7 +18,9 @@ const IconWrapper = url ? 'a' : 'div'; {...(url && { href: url, target: "_blank", rel: "noopener noreferrer" })} > - {name} + + {name} + diff --git a/src/components/organisms/tag-skill-subsection.astro b/src/components/organisms/tag-skill-subsection.astro new file mode 100644 index 0000000..335a955 --- /dev/null +++ b/src/components/organisms/tag-skill-subsection.astro @@ -0,0 +1,28 @@ +--- +import Tag from '@/atoms/tag.astro'; +import type { Tag as TagData } from '@/types/common'; + +export interface Props { + skills: TagData[]; +} + +const { skills } = Astro.props; +--- + +
+ { + skills.map(({ name, icon, iconColor, url }) => + url ? ( + + + {name} + + + ) : ( + + {name} + + ) + ) + } +
diff --git a/src/components/sections/main-section.astro b/src/components/sections/main-section.astro index b969baa..f88bd1d 100644 --- a/src/components/sections/main-section.astro +++ b/src/components/sections/main-section.astro @@ -68,10 +68,14 @@ const { tags.map(({ icon, iconColor, name, url: tagUrl }) => tagUrl ? ( - {name} + + {name} + ) : ( - {name} + + {name} + ) ) } diff --git a/src/components/sections/skills-section.astro b/src/components/sections/skills-section.astro index 02cebdc..13a3eed 100644 --- a/src/components/sections/skills-section.astro +++ b/src/components/sections/skills-section.astro @@ -1,8 +1,20 @@ --- import SectionCard from '@/atoms/section-card.astro'; +import Typography from '@/atoms/typography.astro'; +import SkillSubsection from '@/organisms/skill-subsection.astro'; import type { SkillsSection } from '@/types/skills-section'; export interface Props extends SkillsSection {} + +const { + config: { title }, + skillSets, +} = Astro.props; --- -Skills section + + {title} +
+ {skillSets.map((skillSet) => )} +
+ diff --git a/src/pages/index.astro b/src/pages/index.astro index 788fccb..93666bb 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -22,8 +22,18 @@ import data from '../data'; -
-
+
+
+ + + {data.skills && } + {data.experience && } + {data.portfolio && } + {data.testimonials && } + {data.favorites && } + +
+
{data.skills && } {data.experience && } @@ -31,14 +41,6 @@ import data from '../data'; {data.testimonials && } {data.favorites && }
- - - {data.skills && } - {data.experience && } - {data.portfolio && } - {data.testimonials && } - {data.favorites && } -
diff --git a/src/pages/playground/skills-section.astro b/src/pages/playground/skills-section.astro new file mode 100644 index 0000000..b23fe90 --- /dev/null +++ b/src/pages/playground/skills-section.astro @@ -0,0 +1,160 @@ +--- +import SkillsSection from '@/sections/skills-section.astro'; +import type { SkillsSection as SkillsSectionData } from '@/types/skills-section'; + +const skills: SkillsSectionData = { + config: { + title: 'Skills', + icon: 'fa6-solid:bars-progress', + }, + skillSets: [ + { + title: 'I already know', + skills: [ + { + icon: 'simple-icons:react', + iconColor: '#61DAFB', + name: 'React.js', + level: 5, + url: 'https://reactjs.org/', + description: + 'Proin ut erat sed massa tempus suscipit. Mauris efficitur nunc sem, nec scelerisque ligula bibendum ut.', + }, + { + icon: 'simple-icons:typescript', + iconColor: '#3178C6', + name: 'TypeScript', + level: 4, + url: 'https://www.typescriptlang.org/', + description: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.', + }, + { + icon: 'simple-icons:sass', + iconColor: '#CC6699', + name: 'SASS', + level: 4, + url: 'https://sass-lang.com/', + description: 'Nulla interdum pellentesque ultricies. Ut id eros commodo, ultrices ligula eu, elementum ante.', + }, + { + icon: 'simple-icons:chakraui', + iconColor: '#319795', + name: 'Chakra UI', + level: 5, + url: 'https://chakra-ui.com/', + }, + { + icon: 'simple-icons:tailwindcss', + iconColor: '#06B6D4', + name: 'Tailwind CSS', + level: 2, + url: 'https://tailwindcss.com/', + }, + { + icon: 'simple-icons:prettier', + iconColor: '#F7B93E', + name: 'Prettier', + level: 5, + url: 'https://prettier.io/', + }, + { + icon: 'simple-icons:eslint', + iconColor: '#4B32C3', + name: 'ESLint', + level: 4, + url: 'https://eslint.org/', + description: + 'Nulla tempor turpis at vehicula pharetra. Vestibulum tellus tortor, commodo et suscipit id, lobortis id nunc.', + }, + { + icon: 'simple-icons:nestjs', + iconColor: '#E0234E', + name: 'NestJS', + level: 2, + url: 'https://nestjs.com/', + description: + 'Praesent feugiat ultricies iaculis. In posuere vehicula odio, sed consequat velit porta viverra.', + }, + { + icon: 'simple-icons:postgresql', + iconColor: '#4169E1', + name: 'PostgreSQL', + level: 2, + url: 'https://www.postgresql.org/', + }, + { + icon: 'simple-icons:mongodb', + iconColor: '#47A248', + name: 'MongoDB', + level: 1, + url: 'https://www.mongodb.com/', + }, + { + icon: 'simple-icons:firebase', + iconColor: '#FFCA28', + name: 'Firebase', + level: 1, + url: 'https://firebase.google.com/', + }, + { + icon: 'simple-icons:pnpm', + iconColor: '#F69220', + name: 'pnpm', + level: 3, + url: 'https://pnpm.io/', + }, + ], + }, + { + title: 'I want to learn', + skills: [ + { + icon: 'simple-icons:apollographql', + iconColor: '#311C87', + name: 'Apollo GraphQL', + }, + { + icon: 'simple-icons:astro', + iconColor: '#FF5D01', + name: 'Astro', + }, + { + icon: 'simple-icons:supabase', + iconColor: '#3ECF8E', + name: 'Supabase', + }, + { + icon: 'simple-icons:cypress', + iconColor: '#17202C', + name: 'Cypress', + }, + ], + }, + { + title: 'I speak', + skills: [ + { + icon: 'circle-flags:pl', + name: 'Polish - native', + }, + { + icon: 'circle-flags:us', + name: 'English - C1', + }, + { + icon: 'circle-flags:es-variant', + name: 'Spanish - B1', + }, + ], + }, + ], +}; +--- + + +
+
+ +
+
+ diff --git a/src/pages/playground/tag.astro b/src/pages/playground/tag.astro index afdcfd3..b393b70 100644 --- a/src/pages/playground/tag.astro +++ b/src/pages/playground/tag.astro @@ -7,5 +7,5 @@ import Tag from '@/atoms/tag.astro';
- Tag text + Tag text
diff --git a/src/types/skills-section.ts b/src/types/skills-section.ts index 7c876a0..dd02f54 100644 --- a/src/types/skills-section.ts +++ b/src/types/skills-section.ts @@ -4,7 +4,7 @@ export interface LevelledSkill extends Tag { level: 1 | 2 | 3 | 4 | 5; } -interface SkillSet { +export interface SkillSet { title: string; skills: SkillType[]; }