diff --git a/public/images/skills/rails.svg b/public/images/skills/rails.svg new file mode 100644 index 00000000..d87e0ae9 --- /dev/null +++ b/public/images/skills/rails.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/skills/react.svg b/public/images/skills/react.svg new file mode 100644 index 00000000..3a27f7ce --- /dev/null +++ b/public/images/skills/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Common/PieItem.tsx b/src/components/Common/PieItem.tsx index 67d6967c..2e951f5c 100644 --- a/src/components/Common/PieItem.tsx +++ b/src/components/Common/PieItem.tsx @@ -1,6 +1,7 @@ +import { ReactNode } from 'react' import styled from 'styled-components' -const CircleSpan = styled.span` +const CircleDiv = styled.div` width: 160px; height: 160px; background-color: white; @@ -9,6 +10,7 @@ const CircleSpan = styled.span` top: 20px; left: 20px; display: flex; + flex-direction: column; justify-content: center; align-items: center; font-size: 30px; @@ -33,13 +35,13 @@ const PieDiv = styled.div<{ export type PieItemProps = { percent: number - label: string + children: ReactNode className?: string } export const PieItem: React.FC = ({ percent, - label, + children, className, }) => { const start = [0, 85, 255] @@ -48,7 +50,7 @@ export const PieItem: React.FC = ({ return ( - {label} + {children} ) } diff --git a/src/components/Portfolio/SkillItem.tsx b/src/components/Portfolio/SkillItem.tsx index c9061191..f3cc34a0 100644 --- a/src/components/Portfolio/SkillItem.tsx +++ b/src/components/Portfolio/SkillItem.tsx @@ -1,5 +1,6 @@ import { SkillType } from '@/resources/types' import { PieItem } from '../Common/PieItem' +import Image from 'next/image' export type SkillItemProps = { skill: SkillType @@ -9,7 +10,21 @@ export type SkillItemProps = { export const SkillItem: React.FC = ({ skill, className }) => { return (
- + +
+ {skill.logoSrc && ( +
+ {`${skill.name}-logo`} +
+ )} + {skill.name} +
+
) } diff --git a/src/data/skills.ts b/src/data/skills.ts index cec1048d..898fb81b 100644 --- a/src/data/skills.ts +++ b/src/data/skills.ts @@ -4,10 +4,12 @@ export const skillsData: SkillType[] = [ { name: 'Rails', percent: 90, + logoSrc: '/images/skills/rails.svg', }, { name: 'React', percent: 90, + logoSrc: '/images/skills/react.svg', }, { name: 'Typescript', diff --git a/src/resources/types.ts b/src/resources/types.ts index 7012cbb8..e265b757 100644 --- a/src/resources/types.ts +++ b/src/resources/types.ts @@ -3,4 +3,5 @@ export type Theme = 'dark' | 'light' export type SkillType = { name: string percent: number + logoSrc?: string }