Merge pull request #342 from 1chooo/feature/#327

Feature/#327

apps/web/src/app/page.tsx

@@ -5,21 +5,27 @@ import AboutText from '@/components/about/about-text';
 import GitHubStats from '@/components/about/github-stats';
 import TechStack from '@/components/about/tech-stack';
 import LifeStyles from '@/components/about/life-styles';
-import config from '@/config';
 import PageContent from '@/components/page-content';
 import H4 from '@/components/markdown/h4';
+import config from '@/config';
 
 const { about } = config;
 const { subHeader, pronouns } = about;
-const { header } = about;
+const { firstName, lastName } = about;
+const { preferredName } = about;
+
+const title =
+  preferredName === ''
+    ? `About ${firstName} ${lastName} 👨🏻‍💻`
+    : `About ${preferredName} 👨🏻‍💻`;
 
 const About = () => {
   const pathname = usePathname();
 
   return (
     <PageContent
       documentTitle=''
-      title={header}
+      title={title}
       page="about"
       pathName={pathname}
     >

apps/web/src/components/side-bar/avatar-box.tsx

@@ -5,6 +5,15 @@ import { breakpoints } from '@/lib/constants';
 
 import "@/styles/side-bar/avatar-box.css";
 
+import config from '@/config';
+
+const { about } = config;
+const {
+  firstName,
+  lastName,
+  middleName,
+} = about;
+
 type AvatarBoxProps = {
   avatar: string;
 };
@@ -17,7 +26,7 @@ const AvatarBox: React.FC<AvatarBoxProps> = ({ avatar }) => {
       <Image
         id="profile-img"
         src={avatar}
-        alt="Hugo ChunHo Lin"
+        alt={`${firstName} (${middleName}) ${lastName}`}
         width={imageSize.width}
         height={imageSize.height}
         loading="lazy"

apps/web/src/components/side-bar/info-content.tsx

@@ -1,10 +1,23 @@
 import React from 'react';
+import config from '@/config';
+
+const { status } = config;
+const { about } = config;
+const {
+  firstName,
+  lastName,
+  middleName,
+} = about;
 
 const InfoContent: React.FC = () => (
   <div className="info-content">
-    <h1 className="name" title="Hugo ChunHo Lin">Hugo ChunHo Lin</h1>
+    <h1
+      className="name"
+      title={`${firstName} (${middleName}) ${lastName}`}
+    >{firstName} ({middleName}) {lastName}
+    </h1>
     <p className="title">
-      <strong>Day ONE ⚡️</strong>
+      <strong>{status}</strong>
     </p>
   </div>
 );

apps/web/src/config/index.ts

@@ -8,6 +8,7 @@ import { PiBooks } from "react-icons/pi";
 
 const config: Config = {
   avatar: '/images/profile.jpg',
+  status: "Day ONE ⚡️",
   navItems: [
     { path: '/', label: 'About' },
     { path: '/resume', label: 'Resume' },
@@ -22,10 +23,14 @@ const config: Config = {
     "linkedinUsername": "1chooo"
   },
   about: {
-    "header": "About Hugo 👨🏻‍💻",
     "subHeader": "$ ls -al Hugo 👨🏻‍💻",
-    "pronouns": "He/Him",
+    "firstName": 'Chun-Ho',
+    "lastName": 'Lin',
+    "middleName": 'Hugo' || '',
+    "preferredName": 'Hugo' || '',
+    "pronouns": 'He/Him',
     "introductions": [
+      // "#### $ ls -al Hugo 👨🏻‍💻 (He/Him)",
       "I obtained my Bachelor's degree from [National Central University 🐿️](https://www.ncu.edu.tw/), driven by a *sincere passion* for **Software Engineering 💻.**",
       `My current research interests include ***Programming Language Theory, Operating Systems, and Compilers.*** To gain practical experience, I developed my own ***<a href="https://en.wikipedia.org/wiki/Lisp_(programming_language)">Lisp</a>*** interpreter using **<a href="https://en.wikipedia.org/wiki/C_(programming_language)">C</a>** <sup>[[Code](https://github.com/1chooo/compiler-101)]</sup> and implemented [***Monkey Programming***](https://monkeylang.org/) Compiler with [**GO**](https://go.dev/) <sup>[[Code](https://github.com/1chooo/monkey-prog-lang)]</sup>.`,
       "In my spare time, I do workouts 💪🏻, street photography 📸, and tech content writing ✍🏻.",

apps/web/src/types/about.d.ts

@@ -21,8 +21,11 @@ export type TechStack = {
  *   React element.
  */
 export type About = {
-  header: string;
   subHeader: string;
+  firstName: string;
+  lastName: string;
+  middleName: string;
+  preferredName: string;
   pronouns: string;
   introductions: string[];
   lifestyles: LifeStyle[];

apps/web/src/types/config.d.ts

@@ -13,6 +13,7 @@ import type { NavItem } from "@/types/nav-bar";
 
 export type Config = {
   avatar: string;
+  status: string;
   navItems: NavItem[];
   socialMedia: SocialMedia;
   about: About;