About me 스타일 오류 수정 및 교육 영역 스타일 변경

pithesun · Sep 30, 2024 · 077f966 · 077f966
1 parent ae345d8
commit 077f966
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 24 deletions.
diff --git a/src/components/Education/index.js b/src/components/Education/index.js
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { row, rowLeft, rowRight } from "./style.module.css";
+
+export const Education = () => {
+  return (
+    <>
+      <h2>Education</h2>
+      <div className={row}>
+        <div className={rowLeft}>
+          <h3>오픈소스 컨트리뷰션 아카데미 수료</h3>
+        </div>
+        <div className={rowRight}>
+          <ul>
+            <li>Git 활용 및 DevOps / MLOps 체험형 수료 (2023.7~2023.8)</li>
+            <li>Githru 오픈소스 참여형 (2024.7 ~)</li>
+          </ul>
+        </div>
+      </div>
+      <div className={row}>
+        <div className={rowLeft}>
+          <h3>현대아이티앤이 채용확정형 </h3>
+        </div>
+        <div className={rowRight}>
+          <ul>
+            <li>
+              웹 개발 전반(vue, spring framework, oracle/java) (2021.7~2021.12)
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className={row}>
+        <div className={rowLeft}>
+          <h3>중앙대학교</h3>
+        </div>
+        <div className={rowRight}>
+          <ul>
+            <li>
+              국어국문학과 졸업 (2017.3~2022.2)
+              <br /> 컴퓨터공학과 복수전공
+            </li>
+          </ul>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Education/style.module.css b/src/components/Education/style.module.css
@@ -0,0 +1,12 @@
+.row {
+  display: flex;
+}
+.row-left {
+  flex-basis: 16rem;
+  flex-shrink: 0;
+  padding-right: 12px;
+}
+
+.row-right {
+  flex-grow: 1;
+}
diff --git a/src/components/WorkExperience/style.module.css b/src/components/WorkExperience/style.module.css
@@ -1,5 +1,5 @@
 .row {
-  display: "flex";
+  display: flex;
 }
 
 /* flexBasis: "16rem", flexShrink: 0, paddingRight: "12px" */

diff --git a/src/pages/about.js b/src/pages/about.js
@@ -3,6 +3,7 @@ import Seo from "../components/Seo";
 import Layout from "../components/layout";
 import { Contact } from "../components/Contact";
 import { WorkExperience } from "../components/WorkExperience";
+import { Education } from "../components/Education";
 
 const AboutPage = () => {
   return (
@@ -18,29 +19,7 @@ const AboutPage = () => {
       </p>
       <Contact />
       <WorkExperience />
-
-      <h2>Education</h2>
-      <table>
-        <colgroup>
-          <col style={{ width: "30%" }} />
-          <col />
-        </colgroup>
-        <tr>
-          <th>오픈소스 컨트리뷰션 아카데미 수료</th>
-          <td> Git 활용 및 DevOps / MLOps 체험형 수료 2023.7~2023.8</td>
-          <td> Githru 오픈소스 참여형 2024.7 ~</td>
-        </tr>
-        <tr>
-          <th>현대아이티앤이 채용확정형 2021.7~2021.12</th>
-          <td>웹 개발 전반(vue, spring framework, oracle/java)</td>
-        </tr>
-        <tr>
-          <th>중앙대학교 2017.3~2022.2</th>
-          <td>
-            국어국문학과 졸업 <br /> 컴퓨터공학과 복수전공
-          </td>
-        </tr>
-      </table>
+      <Education />
     </Layout>
   );
 };