[upgrade] Abstract components on the page into subcomponents

components/about-page/Introduction.tsx

@@ -0,0 +1,19 @@
+export const Introduction = () => {
+  return (
+    <div className={"my-5 justify-center content-font md:flex md:space-x-10"}>
+      <div className="my-auto flex md:w-1/3">
+        <img alt="my-profile" className="mx-auto my-auto max-h-[23rem] rounded-lg" src="/images/profile.webp" />
+      </div>
+      <div className="my-auto md:w-1/3">
+        <div className="mt-5 mb-3 font-bold text-3xl">Hi, there👋</div>I am a student / entrepreneur / engineer (Your
+        profession) majoring in (Your Research Field) born in XXXX (Your birth year)
+        <br />
+        <br />
+        My main research interests includes XXXX
+        <br />
+        <br />
+        Additionally, I am also interested in XXXX.
+      </div>
+    </div>
+  );
+};

components/about-page/PersonalStatus.tsx

@@ -0,0 +1,30 @@
+import { Config } from "@/data/config";
+import Link from "next/link";
+
+export const PersonalStatus = () => {
+  return (
+    <ul className="mx-auto my-10 list-disc px-5 md:w-2/3">
+      {Config.SocialLinks.github && (
+        <li className="my-2">
+          {"📕 Check out my github profile at "}
+          <Link className="underline" href={`https://github.com/${Config.SocialLinks.github}`} target="_blank">
+            Github
+          </Link>
+        </li>
+      )}
+      <li className="my-2">🖥️ Programming stack: TypeScript, JavaScript, C++, C, Rust, Go and so on.</li>
+      <li className="my-2">🤝 I am looking for friends who are fund of XXXX</li>
+      {Config.SocialLinks.twitter && (
+        <li className="my-2">
+          {"📫 How to reach me on Twitter: "}
+          <Link className="link" href={`https://twitter.com/${Config.SocialLinks.twitter}`} target="_blank">
+            {Config.SocialLinks.twitter}
+          </Link>
+        </li>
+      )}
+      <li className="my-2">Language : 汉语 / English / 한국어 / 日本語 </li>
+      <li className="my-2">Pronouns : Male / Female / MTF / FTM / And Others</li>
+      <li className="my-2">From : Your Country, State / Province</li>
+    </ul>
+  );
+};