Merge pull request #296 from 1chooo/refactor/#203

Refactor/#203

Author: 1chooo

apps/web/src/app/page.tsx

@@ -5,19 +5,21 @@ 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 { abouts } from '@/config/about';
+import config from '@/config';
 import PageContent from '@/components/page-content';
 import H4 from '@/components/markdown/h4';
 
-const { subHeader, pronouns } = abouts;
+const { about } = config;
+const { subHeader, pronouns } = about;
+const { header } = about;
 
 const About = () => {
   const pathname = usePathname();
 
   return (
     <PageContent
       documentTitle=''
-      title={abouts.header}
+      title={header}
       page="about"
       pathName={pathname}
     >

apps/web/src/app/post/page.tsx

@@ -4,12 +4,16 @@ import React from "react";
 import { usePathname } from 'next/navigation';
 import DownloadCV from '@/components/resume/download-cv';
 import TimeLine from '@/components/resume/timeline';
-import {
-  professionalExperiences, educations,
-  awardLeaderships, teachingExperiences
-} from '@/config/resume';
 import PageContent from '@/components/page-content';
 
+import config from "@/config";
+
+const { resume } = config;
+const { professionalExperiences } = resume;
+const { educations } = resume;
+const { awardLeaderships } = resume;
+const { teachingExperiences } = resume;
+
 const profExp = <TimeLine data={professionalExperiences} />;
 const education = <TimeLine data={educations} />;
 const awardLeadership = <TimeLine data={awardLeaderships} />;

apps/web/src/app/resume/page.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import MarkdownRenderer from '@/components/markdown/markdown-renderer';
 
-import { abouts } from '@/config/about';
+import config from '@/config';
 import "@/styles/about/about-text.css"
 
-const { introductions } = abouts;
+const { introductions } = config.about;
 
 const AboutText: React.FC = () => {
 

apps/web/src/components/about/about-text.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useState, FC } from 'react';
 import GitHubCalendar from 'react-github-calendar';
 import { ThemeInput } from 'react-activity-calendar';
 
-import H4 from '../markdown/h4';
+import H4 from '@/components/markdown/h4';
 
-import { abouts } from '@/config/about';
+import config from '@/config';
 
 /* 
 * goto https://grubersjoe.github.io/react-activity-calendar/
@@ -15,8 +15,11 @@ const yellowTheme: ThemeInput = {
   dark: ['hsl(0, 0%, 22%)', '#FFDA6B'],
 };
 
-const { socialMedia: { githubUsername } } = abouts;
+const { socialMedia } = config;
+const { githubUsername } = socialMedia;
+
 const subHeaderText = '$ ls -al GitHub Stats';
+
 const MOBILE_CALENDAR_SIZE = 12;
 const LAPTOP_CALENDAR_SIZE = 12;
 const MOBILE_BREAKPOINT = 768;

apps/web/src/components/about/github-stats.tsx

@@ -1,18 +1,20 @@
-import H4 from '../markdown/h4';
-import { abouts } from '@/config/about';
+import H4 from '@/components/markdown/h4';
 import ServiceItem from './service-item';
 
+import config from '@/config';
+import type { LifeStyle } from '@/types/about';
+
+const { about } = config;
+const { lifestyles } = about;
 const subHeader = "$ ls -al Life Style";
 
 const LifeStyles: React.FC = () => {
-  const { lifestyle: lifestyles } = abouts;
-
   return (
     <section className="service">
       <H4 text={subHeader} />
 
       <ul className="service-list">
-        {lifestyles.map((lifestyle) => (
+        {lifestyles.map((lifestyle: LifeStyle) => (
           <ServiceItem lifestyle={lifestyle} key={lifestyle.title} />
         ))}
       </ul>

apps/web/src/components/about/life-styles.tsx

@@ -1,11 +1,12 @@
 import Image from 'next/image';
-import H4 from '../markdown/h4';
+import H4 from '@/components/markdown/h4';
 
+import config from '@/config';
 import type { TechStack as TechStackType } from '@/types/about';
-import { abouts } from '@/config/about';
 
 const subHeader = "$ ls -al Tech Stack";
-const { programmingLanguage, devOps } = abouts;
+const { about } = config;
+const { programmingLanguage, devOps } = about;
 
 const TechStack: React.FC = () => {
   const renderTechStackList = (techStack: TechStackType[]) => {

apps/web/src/components/about/tech-stack.tsx

@@ -3,10 +3,12 @@
 import React from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { navItems } from '@/config/nav-bar';
+import config from '@/config';
 
 import '@/styles/nav-bar.css'
 
+const navItems = config.navItems;
+
 export const NavBar: React.FC = () => {
   const pathname = usePathname();