refactor(about): separate about config with components

src/components/About/AboutText.tsx

@@ -1,20 +1,31 @@
-import {
-  messages
-} from '../../config/About/AboutData';
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import Anchor from '../Anchor';
 
+import { abouts } from '../../config/about';
 
 const AboutText: React.FC = () => {
+  const { subHeader, description } = abouts;
+
+  const renderDescription = () =>
+    description.map((item, index) => (
+      <ReactMarkdown
+        key={index}
+        children={item}
+        remarkPlugins={[remarkGfm]}
+        components={{ a: ({ node, ...props }) => <Anchor {...props} /> }}
+      />
+    ));
 
   return (
     <section className="about-text">
       <p>
-        <h3><code> $ ls -al Hugo 👨🏻‍💻 (He/Him)</code></h3>
+        <h3><code>{subHeader}</code></h3>
       </p>
-
-      {messages.map((message: JSX.Element) => message)}
-
+      {renderDescription()}
     </section>
   );
-}
+};
 
 export default AboutText;

src/config/about.ts

@@ -0,0 +1,13 @@
+import IAbout from '../interface/IAbout';
+
+
+export const abouts: IAbout = {
+  "header": "About Hugo 👨🏻‍💻",
+  "subHeader": "$ ls -al Hugo 👨🏻‍💻 (He/Him)",
+  "pronouns": "He/Him",
+  "description": [
+    "I'm **Hugo ChunHo Lin**, a 4th-year student at [National Central University 🐿️](https://www.ncu.edu.tw/), fueled by a ***sincere passion*** for the field of **Software Engineering 💻.**",
+    "*I do **Web Development and Cloud Development** with a focus on **creating APIs and handling backend tasks** using `FastAPI, Gin, and AWS`. In general, I define new problems and find existing problems, transforming solutions into helpful documents or articles to assist everyone in the process, and eventually apply them to make social impacts.*",
+    "In my spare time, I do *street photography 📷* and *consistently share my findings on GitHub with Global 🌏*.",
+  ],
+}

src/interface/IAbout.ts

@@ -0,0 +1,8 @@
+interface IAbout {
+  header: string;
+  subHeader: string;
+  pronouns: string;
+  description: string[];
+}
+
+export default IAbout;

src/page/about/index.tsx

@@ -3,7 +3,7 @@ import {
   useLocation
 } from 'react-router-dom';
 
-import { aboutHeader } from "../../config/About/AboutData";
+import { abouts } from "../../config/about";
 
 import NavBar from "../../components/Navbar";
 import Sidebar from "../../components/SideBar/SideBar";
@@ -32,7 +32,7 @@ const About: React.FC = () => {
           className={`about ${location.pathname === '/' ? 'active' : ''}`}
           data-page="about"
         >
-          <Header title={aboutHeader} />
+          <Header title={abouts.header} />
           <AboutText />
           <TechStack />
           <LifeStyles />