✨ Add publication section

dohyun-ko · Aug 26, 2024 · cbc143c · cbc143c
1 parent 8c0e88f
commit cbc143c
Show file tree

Hide file tree

Showing 13 changed files with 237 additions and 57 deletions.
diff --git a/build/404.html b/build/404.html
@@ -94,7 +94,7 @@
         region: "eu",
       });
     </script>
-    <script type="module" crossorigin src="/assets/index-a75d7eb2.js"></script>
+    <script type="module" crossorigin src="/assets/index-23298fcd.js"></script>
     <link rel="stylesheet" href="/assets/index-32718201.css">
   </head>
   <body>

diff --git a/build/assets/index-a75d7eb2.js → build/assets/index-23298fcd.js b/build/assets/index-a75d7eb2.js → build/assets/index-23298fcd.js
diff --git a/build/index.html b/build/index.html
@@ -94,7 +94,7 @@
         region: "eu",
       });
     </script>
-    <script type="module" crossorigin src="/assets/index-a75d7eb2.js"></script>
+    <script type="module" crossorigin src="/assets/index-23298fcd.js"></script>
     <link rel="stylesheet" href="/assets/index-32718201.css">
   </head>
   <body>

diff --git a/src/locales/en-US/index.ts b/src/locales/en-US/index.ts
@@ -85,6 +85,19 @@ export const main = {
     attendedLecture: "Attended Courses",
     major: "Electrical Engineering and Computer Science",
   },
+  publication: {
+    publications: [
+      {
+        name: "O2ARC 3.0: A Platform for Solving and Creating ARC Tasks",
+        date: "2024-08",
+        isImportant: true,
+        url: "https://www.ijcai.org/proceedings/2024/1034",
+        publisher: "IJCAI 2024",
+        description:
+          "To address the issue of insufficient human solution data for ARC problems and the unsuitability of the collected data for AI training, we developed O2ARC 3.0. This paper focuses on how we improved the quantity and quality of data collection by modifying the UI/UX of the existing tool.",
+      },
+    ],
+  },
   experience: {
     experiences: [
       {

diff --git a/src/locales/ko-KR/index.ts b/src/locales/ko-KR/index.ts
@@ -84,6 +84,19 @@ export const main = {
     attendedLecture: "수강 강좌",
     major: "전기전자컴퓨터공학부",
   },
+  publication: {
+    publications: [
+      {
+        name: "O2ARC 3.0: A Platform for Solving and Creating ARC Tasks",
+        date: "2024-08",
+        isImportant: true,
+        url: "https://www.ijcai.org/proceedings/2024/1034",
+        publisher: "IJCAI 2024 | 공동 1저자",
+        description:
+          "ARC 문제의 사람 풀이 데이터가 부족하며, 수집된 데이터의 품질도 AI 학습에 적합하지 않다는 문제를 해결하기 위해 O2ARC 3.0을 개발했습니다. 기존 툴의 UI/UX를 어떻게 변경하여 데이터 수집 양과 품질을 높일 수 있었는지를 중점으로 설명합니다.",
+      },
+    ],
+  },
   experience: {
     experiences: [
       {

diff --git a/src/pages/home/printable/PrintablePage.tsx b/src/pages/home/printable/PrintablePage.tsx
@@ -1,6 +1,7 @@
 import { Area, Content, Spacer } from "@dohyun-ko/react-atoms";
 import EducationSection from "./sections/EducationSection";
 import ExperienceSection from "./sections/ExperienceSection";
+import PublicationSection from "./sections/PublicationSection";
 import SideProjectSection from "./sections/SideProjectSection";
 import SkillSection from "./sections/SkillSection";
 import TitleSection from "./sections/TitleSection";
@@ -25,6 +26,10 @@ const PrintablePage = () => {
 
         <Spacer height={"30px"} />
 
+        <PublicationSection />
+
+        <Spacer height={"30px"} />
+
         <SideProjectSection />
       </Content>
     </Area>

diff --git a/src/pages/home/printable/components/PublicationCard.tsx b/src/pages/home/printable/components/PublicationCard.tsx
@@ -0,0 +1,39 @@
+import useResponsiveFont from "@/hooks/useResponsiveFont";
+import Font from "@/types/Font";
+import Publication from "@/types/Publication";
+import { formatYearMonth } from "@/utils/dateFormats";
+import { Flex, Text } from "@dohyun-ko/react-atoms";
+import ReactMarkdown from "react-markdown";
+import StylessA from "./StylessA";
+
+interface PublicationCardProps {
+  publication: Publication;
+}
+
+const PublicationCard = ({ publication }: PublicationCardProps) => {
+  const { name, date, url, description, publisher } = publication;
+  const { font } = useResponsiveFont();
+
+  return (
+    <Flex
+      flexDirection="column"
+      style={{
+        fontSize: "0.75rem",
+      }}
+    >
+      <StylessA href={url}>
+        <Text font={Font.SemiBold} size={font(1)}>
+          {name}
+        </Text>
+      </StylessA>
+
+      <Text size={font(0.75)}>
+        {publisher} - {formatYearMonth(new Date(date))}
+      </Text>
+
+      <ReactMarkdown>{description}</ReactMarkdown>
+    </Flex>
+  );
+};
+
+export default PublicationCard;
diff --git a/src/pages/home/printable/sections/PublicationSection.tsx b/src/pages/home/printable/sections/PublicationSection.tsx
@@ -0,0 +1,31 @@
+import Publication from "@/types/Publication";
+import { Flex, Spacer } from "@dohyun-ko/react-atoms";
+import { useTranslation } from "react-i18next";
+import PublicationCard from "../components/PublicationCard";
+import SectionTitle from "../components/SectionTitle";
+
+interface PublicationSectionProps {}
+
+const PublicationSection = ({}: PublicationSectionProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <SectionTitle>Publications</SectionTitle>
+
+      <Spacer height={"30px"} />
+
+      <Flex flexDirection={"column"} gap={"20px"}>
+        {(
+          t("publication.publications", {
+            returnObjects: true,
+          }) as Publication[]
+        ).map((publication) => (
+          <PublicationCard key={publication.name} publication={publication} />
+        ))}
+      </Flex>
+    </>
+  );
+};
+
+export default PublicationSection;
diff --git a/src/pages/home/resume/ResumePage.tsx b/src/pages/home/resume/ResumePage.tsx
@@ -3,6 +3,7 @@ import CurrentSection from "./sections/CurrentSection";
 import EducationSection from "./sections/EducationSection";
 import ExperienceSection from "./sections/ExperienceSection";
 import MetaSection from "./sections/MetaSection";
+import PublicationSection from "./sections/PublicationSection";
 import SideProjectSection from "./sections/SideProjectSection";
 import SkillSection from "./sections/SkillSection";
 import TitleSection from "./sections/TitleSection";
@@ -30,6 +31,10 @@ const ResumePage = ({}: ResumePageProps) => {
 
       <Spacer height={"50px"} />
 
+      <PublicationSection />
+
+      <Spacer height={"50px"} />
+
       <CurrentSection />
 
       <Spacer height={"50px"} />

diff --git a/src/pages/home/resume/components/ProjectCard.tsx b/src/pages/home/resume/components/ProjectCard.tsx
@@ -3,7 +3,7 @@ import useResponsiveFont from "@/hooks/useResponsiveFont";
 import Font from "@/types/Font";
 import Project from "@/types/Project";
 import { formatYearMonth } from "@/utils/dateFormats";
-import { Flex, Spacer, Text } from "@dohyun-ko/react-atoms";
+import { Flex, Text } from "@dohyun-ko/react-atoms";
 import ReactMarkdown from "react-markdown";
 import StylessA from "./StylessA";
 
@@ -30,11 +30,6 @@ const ProjectCard = ({ project }: ProjectCardProps) => {
         {endedAt ? formatYearMonth(new Date(endedAt)) : "Now"}
       </Text>
 
-      <Spacer height={"10px"} />
-
-      <Text font={Font.Medium} size={font(1.25)}>
-        Description
-      </Text>
       <ReactMarkdown>{description}</ReactMarkdown>
 
       <ul

diff --git a/src/pages/home/resume/components/PublicationCard.tsx b/src/pages/home/resume/components/PublicationCard.tsx
@@ -0,0 +1,36 @@
+import useIsMobile from "@/hooks/useIsMobile";
+import useResponsiveFont from "@/hooks/useResponsiveFont";
+import Font from "@/types/Font";
+import Publication from "@/types/Publication";
+import { formatYearMonth } from "@/utils/dateFormats";
+import { Flex, Text } from "@dohyun-ko/react-atoms";
+import ReactMarkdown from "react-markdown";
+import StylessA from "./StylessA";
+
+interface PublicationCardProps {
+  publication: Publication;
+}
+
+const PublicationCard = ({ publication }: PublicationCardProps) => {
+  const { name, date, url, description, publisher } = publication;
+  const { font } = useResponsiveFont();
+  const isMobile = useIsMobile();
+
+  return (
+    <Flex flexDirection="column">
+      <StylessA href={url}>
+        <Text font={Font.SemiBold} size={font(1.5)}>
+          {name}
+        </Text>
+      </StylessA>
+
+      <Text>
+        {publisher} - {formatYearMonth(new Date(date))}
+      </Text>
+
+      <ReactMarkdown>{description}</ReactMarkdown>
+    </Flex>
+  );
+};
+
+export default PublicationCard;
diff --git a/src/pages/home/resume/sections/PublicationSection.tsx b/src/pages/home/resume/sections/PublicationSection.tsx
@@ -0,0 +1,33 @@
+import Publication from "@/types/Publication";
+import { Area, Content, Flex, Spacer } from "@dohyun-ko/react-atoms";
+import { useTranslation } from "react-i18next";
+import PublicationCard from "../components/PublicationCard";
+import SectionTitle from "../components/SectionTitle";
+
+interface PublicationSectionProps {}
+
+const PublicationSection = ({}: PublicationSectionProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Area id="side-project-section">
+      <Content>
+        <SectionTitle>Publications</SectionTitle>
+
+        <Spacer height={"30px"} />
+
+        <Flex flexDirection={"column"} gap={"30px"}>
+          {(
+            t("publication.publications", {
+              returnObjects: true,
+            }) as Publication[]
+          ).map((publication) => (
+            <PublicationCard key={publication.name} publication={publication} />
+          ))}
+        </Flex>
+      </Content>
+    </Area>
+  );
+};
+
+export default PublicationSection;
diff --git a/src/types/Publication.ts b/src/types/Publication.ts
@@ -0,0 +1,10 @@
+interface Publication {
+  name: string;
+  isImportant: boolean;
+  date: string;
+  url?: string;
+  publisher: string;
+  description: string;
+}
+
+export default Publication;