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}
+
+
)
}
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
}