diff --git a/src/container/Skills/Skills.scss b/src/container/Skills/Skills.scss index 14635d6..19f4159 100644 --- a/src/container/Skills/Skills.scss +++ b/src/container/Skills/Skills.scss @@ -131,6 +131,17 @@ margin-bottom: 1rem; } } +.app__skills-exp-show-more { + display: flex; + margin-top: 1rem; + cursor: pointer; + color: var(--secondary-color); + font-weight: 500; + :hover { + text-decoration: underline; + color: var(--secondary-color); + } +} .app__skills-exp-item { width: 100%; diff --git a/src/container/Skills/Skills.tsx b/src/container/Skills/Skills.tsx index 8af2d33..495ba61 100644 --- a/src/container/Skills/Skills.tsx +++ b/src/container/Skills/Skills.tsx @@ -85,7 +85,6 @@ interface JobDescriptionCollapsibleProps { const JobDescriptionCollapsible = ({ jobDescriptions, }: JobDescriptionCollapsibleProps) => { - // show only 3 job descriptions const [showCount, setShowCount] = useState(3); const showMore = jobDescriptions.length > showCount; @@ -103,12 +102,19 @@ const JobDescriptionCollapsible = ({ ))} - {showMore && ( + {showMore ? ( -

Show more

+

Show more

+
+ ) : ( + setShowCount(3)} + className="app__skills-exp-show-more" + > +

Show less

)} diff --git a/src/container/Skills/skill.ts b/src/container/Skills/skill.ts index 753e77c..80ebf4a 100644 --- a/src/container/Skills/skill.ts +++ b/src/container/Skills/skill.ts @@ -31,6 +31,6 @@ export const skillData = [ new Skill("TypeScript", images.typescript, "#77c0f0"), new Skill("HTML", images.html, "#eb9580"), new Skill("JavaScript", images.javascript, "#f0db4f"), - new Skill("Git", images.mu5, "#aad4eb"), + new Skill("Git", images.git, "#aad4eb"), new Skill("Node", images.node, "#a9e4a1"), ];