design : 디자인 일부 변경

goodchuck · May 14, 2024 · f1c3a75 · f1c3a75
1 parent 2bbdc9e
commit f1c3a75
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 33 deletions.
diff --git a/src/app/_component/SkillComponent.tsx b/src/app/_component/SkillComponent.tsx
@@ -13,7 +13,7 @@ export const SkillComponent = ({ src, width, height, alt, text }: props) => {
     return (
         <Flex vertical justify="center" align="center" gap='small'>
             <Image src={src} width={width ? width : 32} height={height ? height : 32} alt={alt ? alt : 'null'}></Image>
-            <div>{text}</div>
+            <div><b>{text}</b></div>
         </Flex>
     )
 }
diff --git a/src/app/_component/Styledmain.ts b/src/app/_component/Styledmain.ts
@@ -6,34 +6,9 @@ export const StyledMain = styled.main`
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    font-family: "Archivo Black", sans-serif;
-    font-weight: 400;
+    font-family: "Noto Sans KR", sans-serif;
+    /* font-weight: 400; */
     color: #212529;
-    @font-face {
-        font-family: "GOR";
-        src: url("./fonts/GasoekOne-Regular.ttf") format("truetype");
-        font-weight: normal;
-        font-style: normal;
-    }
-    @font-face {
-        font-family: "Black Han Sans";
-        src: url("./fonts/BlackHanSans-Regular.ttf") format("truetype");
-        font-weight: normal;
-        font-style: normal;
-    }
-    @font-face {
-        font-family: "Noto Sans KR";
-        src: url("./fonts/NotoSansKR-VariableFont_wght.ttf") format("truetype");
-        font-weight: normal;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: "Archivo Black", sans-serif;
-        src: url("./fonts/ArchivoBlack-Regular.ttf") format("truetype");
-        font-weight: 400;
-        font-style: normal;
-    }
 
     & > .main-container {
         width: 100%;

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -108,3 +108,28 @@ a {
         color-scheme: dark;
     }
 }
+@font-face {
+    font-family: "GOR";
+    src: url("/fonts/GasoekOne-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: "Black Han Sans";
+    src: url("/fonts/BlackHanSans-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: "Noto Sans KR";
+    src: url("/fonts/NotoSansKR-VariableFont_wght.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Archivo Black";
+    src: url("/fonts/ArchivoBlack-Regular.ttf") format("truetype");
+    font-weight: 400;
+    font-style: normal;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -498,7 +498,7 @@ export default function Home() {
         <Flex vertical gap={'middle'} className="container" >
           {/* 프론트엔드 */}
           <Flex vertical gap={'middle'} className="skills-container">
-            <div className="title">Front-End</div>
+            <div className="title"><b>Front-End</b></div>
             <Flex gap={'large'} className="skill-row">
               <SkillComponent src='./icons/html5-color.svg' text='HTML5' />
               <SkillComponent src='./icons/css3-color.svg' text='CSS3' />
@@ -515,7 +515,7 @@ export default function Home() {
 
           {/* 상태관리 */}
           <Flex vertical gap={'middle'} className="skills-container">
-            <div className="title">상태관리 및 라이브러리</div>
+            <div className="title"><b>상태관리 및 라이브러리</b></div>
             <Flex gap={'large'} className="skill-row">
               <SkillComponent src='https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1675253316/noticon/gg2mfsvpu2aje4f8rpuc.png' text='zustand' />
               <SkillComponent src='https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1570521380/noticon/lbpvcvhvvszxrlu78vnc.png' text='electron' />
@@ -526,7 +526,7 @@ export default function Home() {
 
           {/* Depolyment */}
           <Flex vertical gap={'middle'} className="skills-container">
-            <div className="title">Deployment</div>
+            <div className="title"><b>Deployment</b></div>
             <Flex gap={'large'} className="skill-row">
               <SkillComponent src='https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566777755/noticon/yfmwxv8nhnr5aqaxhxpg.png' text='AWS' />
               <SkillComponent src='https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1679312641/noticon/rx8rni4npifrbo9ckxmt.png' text='Vercel' />
@@ -535,13 +535,13 @@ export default function Home() {
 
           {/* AI */}
           <Flex vertical gap={'middle'} className="skills-container">
-            <div className="title">AI</div>
+            <div className="title"><b>AI</b></div>
             <Flex gap={'large'} className="skill-row">
               <SkillComponent src='./icons/openai-color.svg' text='OpenAI' />
             </Flex>
           </Flex>
           <Flex vertical gap={'middle'} className="skills-container">
-            <div className="title">ETC</div>
+            <div className="title"><b>ETC</b></div>
             <Flex gap={'large'} className="skill-row">
               <SkillComponent src='https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1567128822/noticon/osiivsvhnu4nt8doquo0.png' text='Git' />
               <SkillComponent src='https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1640982247/noticon/tpvr26zp02angin4t0jv.png' text='Figma' />